I was looking at the code in my Blogger template for the threaded comments because I wanted to find out how the <div> is a direct descendant of the <ol>? I don't think that is supposed to be so(Correct me if I'm wrong and cheer me on if I am right. I'm new to this).
Here is the thing,
I see the threaded comments are using <script type="text/javascript">, so I disabled JavaScript in my browser(Chrome), went back to a Blogger blog with a page with threaded comments and they were threaded.
The JSON stuff is in the same <script> to make the threaded look, which got me confused.
Does that mean that JSON is read and works even though JavaScript is disabled or is it something else?
No, when viewing source you will see that the comments get delivered both as inline json data and usual html. So the script (when active) doesn't need to retrieve the data from the dom to build its model structure.
Related
So, I was taking a look at some websites that display video on their front page, and I came across this website. I wanted to know how they had accomplished such a remarkable result, so I inspected the element that contained the video. To my surprise, I encountered html attributes I had never seen before.
My question is: If this is not standard html, then what is it?, and how can I use it?
Here is a snippet of the code they are using:
<div class="frontpage-head-wrapper" data-has-video="1" data-video-mp4="http://d27shkkua6xyjc.cloudfront.net/videos/maaemo-film-2.mp4?mtime=20141113185431" data-video-ogv="http://d27shkkua6xyjc.cloudfront.net/videos/maaemo-film-2.ogv?mtime=20141113185421">
</div>
A point before I answer your question is that the data attributes are custom attributes in which user can store any data. These were introduced in HTML5. For more information please refer to this
From what I understand looking at the code link https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes
Now to your question
what happens is that the website is using custom data attributes and the custom attributes specifies the url where the video is stored. And when I dug further in the code, I found that they are displaying video using ajax calls
Those are data attributes. They are useful because they are standardized, and
allow easy JavaScript access:
ch = document.querySelector('div').dataset;
// 1
ch.hasVideo;
// http://d27shkkua6xyjc.cloudfront.net/videos/maaemo-film-2.mp4?mtime=20141113185431
ch.videoMp4;
// http://d27shkkua6xyjc.cloudfront.net/videos/maaemo-film-2.ogv?mtime=20141113185421
ch.videoOgv;
Using data attributes
I have a HTML page that displays a SVG element (a Business process diagram) using some javascript libraries. A String variable, say 'str' needs to be given to html function.
After reading this, I plan to use widgets. So far I understand that I need to copy all scripts to Widgets: Test. For creating the hook, I write
{{#widget:Test|str=UserTask_1}}
The problem is that UserTask_1 is a variable as well. It is different each time.
Can someone help how can I add this dynamic information to my hook? This hook is a hyperlink from a previous page. In the previous page, I send the str=UserTask_1 through JavaWiki Bot.
PS: I have come-across SMW for first time. Please excuse if my language is not very technical at the moment.
Thanks.
I just want to automate a web application, where that application parses the HTML page and pulls all the HTML Tags inner text based on some condition like if we have a tag called Span Example has given whose class="spanclass_1"
This is span tag...
which has particular class id. so that app parses and pulls that span into it.
And here the main pain area is, I should not use the developer code to automate that same parsing the HTML.
I want to automate that parsing done correctly, simply by using the parsed data which is shown in UI.
Any help, would be great.
Appreciating your time reading this.
(Note span tag is not shown)
Thanks buddies.
not enough details.
is this html page just a file in local filesystem on it is internet webpage?
do u have access to pages? can u modify it ? if answer yes, that just add javascript to page which will extract data and post to server.
if answer not, than it depends on language u use to programm.
Find good framework to parse html. load page parse it and extract data. Several situation can be there.
Worse scenario - page generated on client side using js.
Best scenario - page is in xhtml mode( u are lucky. any xml parser will help to build dom and extract data)
So so - page is simple html format (try several html parser to find most suitable for u)
I am developing a project and find that there are elements that are common to all pages, I wonder if there is any way to define these elements generally and call them from your html to avoid having to define each of the pages. thank you very much for your help
test.html
<div>Menu</div>
When you need to have this menu, just call this code in your page:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
load()
Another option could be AngularJS, or just something like includes with PHP.
I don't know any way to do exactly this with pure HTML, but by mixing in a little server side script, you can. Just to give you an idea what it would look like:
This example uses PHP. If you are on a Microsoft server, you would need to translate this example into .NET or .aspx.
First, save the following to a file called "mytest.php" in the same folder as your other pages. (You can put it in a subfolder if you wish, but for this example I will keep it simple).
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Just one line for this test. A little useless, but you can see the point.
Now, in the <head> tag of your HTML, you can do this (I added the <head> tags just so you can see it... You would not want to have TWO sets of <head> tags.)
<head>
<?php include 'mytest.php'; ?>
</head>
Now, visit the page and display the HTML and you should see that line incorporated into your HTML. Note that any document that contains PHP code (as above) must end with a .php extension.
As #loops suggested, I would highly recommend AngularJS for the rescue.
It's a great MVC framework built with JavaScript and no external dependencies.
It offers the possibility to create custom elements using their Directives
So you could create a new element <mymenu></mymenu> and you can give this new tag some behaviour as well as bind events to it.
AngularJS takes care of all the rest and your new tag will be available across all the pages of your application.
And yes, you are correct thinking that should be done on the client side rather than server side.
I am happy to provide a full working example for you once you get your head around the framework first. Otherwise I think it will be too much information at once ;)
I initially set out to learn how to handle "ajax-ready file uploads"; I found, and comprehend, one of the main concepts: it's not possible as ajax, but you can submit a form with the target set to a hidden iFrame's id [1]. That seems to be generally accepted by the community and compatible with all browsers. Is that an accurate assessment?
My question is: what are the pitfalls to this approach? Because if there are none, it seems to me that every "ajax-ready post" could be done in this same fashion. Remove the file upload component and this approach versus, say, a jQuery.post() approach appear to have identical outcomes.
In all the questions and resources I've researched, I've only been able to find "solutions" for handling my initial issue. I've been unable to find any sort of "pro v. con list" or "pitfalls to this approach" anywhere regarding a form targeting an iFrame; if you know of one, please feel free to share it!
[1] HTML Example:
<form method="post" target="take_the_reload">
...
</form>
<iframe class="hide_me" id="take_the_reload" name="take_the_reload"></iframe>
Much obliged,
Beez
References: Just a couple of the resources I've used:
http://www.joshclarkson.net/blog/file-uploads-in-a-hidden-iframe-using-jquery/
Firefox form targetting an iframe is opening new tab
http://terminalapp.net/submitting-a-form-with-target-set-to-a-script-generated-iframe-on-ie/
javascript: submit form in an iframe...help
http://www.openjs.com/articles/ajax/ajax_file_upload/
When I first started AJAX (before jQuery and Prototype came along) I used to do exactly that with all my forms....just post them to a hidden Iframe. It was easy and painless.
The drawbacks of form-post:
It's not really "pure" AJAX (file uploads aside). I'm sure all the DOM manipulation in the iframe for the result is slower than just getting back a response via XHR.
The error handling is more difficult - you have to look at what the server puts in the Iframe as a result
Things are moving towards JSON-based data handling which forms alone don't do
Sometimes you want to do something "in the middle" between the form and the server such as some field mapping or including other client-side data