I'm implementing some third-party web software for my company. It returns some html which I can't directly change. I'd like to make some minor updates using jQuery but am not familiar with this syntax.
<div c:id="container"> </div>
How do I find this div in the dom using jQuery? What is "c:id" anyway? I've never seen that syntax before.
Thanks.
c:id is just an html attribute like any other. You can access it in jQuery using the attribute selectors:
var container = $('[c\\:id="container"]');
Could you post the entire XML ?
It probably is an XML namespace define with xmlns:c={url}
You can;
var el = $('div[c\\:id="container"]');
(unescaped : being a pseudo-class)
Related
I'm building a website to use with Cordova on mobile. I found this great javascript framework called nativedroid2. This framework generates html classes, effects and the like which are applied to html code.
Now what I am trying to do is dynamically generating html code in jQuery by using AJAX calls to a server (I want javascript to make the HTML to remove the load of the server). However when I try to use html() on some divs to load some HTML, the nativedroid javascript function does not apply to the HTML, so no styling is done and everything looks like I am not even using nativedroid2. I am not using AJAX calls yet because I was testing if the html() works with nativedroid.
var html1;
var html2;
function loadpage(id, data) {
generateContent(id, data);
$('[data-role="header"]').html(html1);
$('[role="main"]').html(html2);
}
function generateContent(id, data) {
html1 = "bunch of html for the header"
html2 = "bunch of html for the body"
Does anyone know a better alternative to html() or a fix to make this work?
Alternative for html()
You can use JavaScript function createElement()
var P_tag=$("#your_div_id").createElement('p');
This will create an element P-tag, after that, you can set text to it
P_tag.text("Text");
So I read online that I had to escape the quotation marks. I used an online tool for that. However the online tool made " into "", which is read as an empty string. Removing that fixed it.
Thank you for your time if you answered
I'm new to javascript and jquery.
I wonder if there are any ways to download content of a target html page.
And bind the downloaded content to a variable , and later I can search for its tags inside or not.
Can anyone give me an answer please ? :)
Thank you
Yes, you can, using the jQuery 'load()' function: api.jquery.com
If you want to load it into a variable instead of an element, you cah use the 'get' function. After you loaded the html into a variable, you can wrap it to get a jQuery element.
A simple example (just pseudocode, copy/paste probably won't work):
$.get("/example.html", function( data ) {
var source = $(data);
//and now you have a jQuery element. You can use 'find' to seach the including tags
}, 'html');
Using HTMLAgilityPack to get the content from target html,like as
HtmlWeb htmlWeb = new HtmlWeb();
HtmlDocument doc = htmlWeb.Load(url);
doc.DocumentNode.SelectSingleNode(#"id('content')/div/div[1]/");
hopefully this help you.
For example, lets say you have something like this:
<div data-object="{'str': '<h1>This is a nice headline</h1>'}"></div>
Is this allowed in HTML5 and will it render properly in all browsers?
Edit:
With properly I mean that the browser will ignore and NOT render the H1 in any way ;)
Yes, it's allowed as long as it's quoted correctly.
Will it render? The H1 element? No - because it's not an element, it's just a bit of text inside an attribute of the div element.
Yes, browsers won't render any HTML tags inside attributes. This is pretty much common when you want to move the element later so it would show up. The only problem is that this is not a way to go as this does not create an element in DOM, thus, it will be much slower.
Try to find a way or ask for an alternative/better way to reuse the element which is hidden when the page is loaded.
Yes it's allowed and possible, but to make it work you have to make it valid JSON by using double quotes:
<div data-object='{"str": "<h1>This is a nice headline</h1>"}'></div>
Now to parse it just have: (jQuery will parse it to JSON all by itself)
var element = $("div").eq(0);
var rawData = element.data("object");
var rawHTML = rawData["str"];
$(rawHTML).appendTo("body");
Live test case.
For my website I make the visitor choose between two different images. Is it possible to store the image that they chose as a variable? I then need to use that variable in an if conditional. Also is it possible to name each image as if it were a class?
Thanks!
Jenise
Best to use Javascript + jQuery:
var my_images = [];
$('img').click(function(){
my_images.push(this);
});
This will store the HTML DOM elements in an array for use later.
Highly recommend getting to grips with Javascript and then using jQuery (a Javascript library) for anything DOM related.
http://jquery.com/
I'd like to know your thoughts about HTML code generation in my JS code.
I just think that the html.push("<tag>" + something + "</tag>") style pretty annoying.
I've already tried something with templates inside my HTML file (and put some placeholders therein), and then used its content to a replace the placeholders to my real values.
But maybe you guys have other ideas, possibly one using jQuery.
jQuery is the way to go. You can do things like this:
// create some HTML
var mySpan = $("<span/>").append("Something").addClass("highlight");
it is cross-browser compatible,
it is an easy to use syntax
There is also a templating plugin.
You can use createelement, appendchild, and innerHTML to do this.
Here's an article from A List Apart that uses these functions in the process of generating a dropdown menu.
jQuery has javascript template plugins like jBind and jTemplate. I haven't used them myself but I do recommend jQuery whenever possible.
A note on html generation, it is not searchable by search engines in most cases.
I'm a big fan of how PrototypeJS handles templates.
First you create an instance of the Template class and pass it a string containing the template HTML.
var tpl = new Template('Here is a link to #{sitename}');
Then you pass it data containing the values to replace within the template.
$('someDiv').innerHTML = tpl.evaluate( {link: 'http://www.stackoverflow.com', sitename: 'StackOverflow'} );
In the above example, I have a div with id="someDiv" and I'm replacing the contents of the div with the result of the template evaluation.
Resig has a little blog entry on creating a very lightweight template system.
There are a bunch of JQuery function that support this. In particular, you should look at append(content), appendTo(content) prepend(content) prependTo(content), replaceWith(content), after(content), before(content), insertAfter(content), and insertBefore(content).