I want to create dynamic html which needs to render as code given below:
<a rel="{gallery: 'gal', smallimage: 'a',largeimage: 'b'}" href="javascript:void(0);"><img src="x1.jpg"></a>
What I wrote following code in jQuery to achive above:
for(i=1; i<=4; i++){
var rela="{gallery:'gal', smallimage:'a', largeimage: 'b'}";
html += "<a href='javascript:void(0);' rel='"+rela+"' ><img src='x"+i+".jpg' /></a>";
}
But when it's executed it renders as below:
<a 'b'}'="" largeimage:="" smallimage:'a',="" gal',="" rel="{gallery:" href="javascript:void(0);"><img src="x1" class="img1"></a>
Using attributes to store data on objects isn't exactly a smart idea as you found out yourself, it doesn't work as you might want it to work. Especially json.
In your case you're trying to store json? Or an object with qoutes in it in the html, the browser however will treat the first qoute it encounters as a closure of the rel attribute.. messing stuff up bigtime.
Store the different properties in a seperate data attribute, or considder storing the items in a js variable and the anchor an id. When you need the data again you use the id on the anchor to recapture the data from the js variable. (read more here on data attributes).
html += "<a href='javascript:void(0);' rel=\""+rela+"\" ><img src='x"+i+".jpg' /></a>";
or
var rela='{gallery:"gal", smallimage:"a", largeimage: "b"}';
Related
I've got a variable and I want to display the value of it in a specific place of my HTML.
Much like +variable+ within javascript.
My setup is as followed:
The HTML:
short version:
addthis:url="http://example.com/script.php?code="
the HTML full version:
<div class="addthis_toolbox addthis_default_style "
addthis:url="http://example.com/script.php?code="
addthis:title="An Example Title"
addthis:description="An Example Description">
Share
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
I would like to "print" the value of my variable after the = so it would result in:
addthis:url="http://example.com/script.php?code=myVar"
I had found document.write but this won't work since I will have to place the script tags between quotes.
Hope someone can help me out!
String concatenation
addthis:url="http://example.com/script.php?code=" + myVar;
Try to use a placeholder and replace it with jquery:
https://stackoverflow.com/a/7480394/1380486
You wont be able to do it the way you want (with document.write). Even if you solve the quote problem, you will still have to have script tags inside of your div tags like this:
HTML
<div addthis:url=<script>document.write("http://example.com/script.php?code=myVar")<script>>
This simply will not work.
With jQuery you could select that element and add the attribute when the dom is ready.
JavaScript
$(document).ready(function(){
$(".addthis_toolbox").attr("addthis:url","http://example.com/script.php?code=myVar")
});
How can I add a param to the removeSound function in this JavaScript code?
I cannot get it to work.
var param = "111";
coder = '<a href="javascript:;" onClick="javascript: removeSound(' + param + ');" >Delete</a>'
Update
I do not know why code = was removed! This is needed to explain the problem context.
I just want to add a proper double quoting escape method to the answers as none showed a correct way to escape double quotes inside of an onClick attribute.
In HTML it is not sufficient to use only a backslash when escaping a JavaScript double quote. You need the proper HTML entity which is "
This is a live example:
Delete
However for readability I would recommend using Antony Scott's way by using single quotes.
Delete
To add the param as a variable from whatever script your HTML is generated in you should do this:
code = '<a href="javascript:;" onClick="javascript: removeSound("' + the_param + '");" >Delete</a>';
The other possible way should be:
code = '<a href="javascript:;" onClick="javascript: removeSound(\'' + the_param + '\');" >Delete</a>';
You need to use different quotes. Try something like this ...
<a href="javascript:;" onClick="javascript: removeSound('PARAM HERE');" >Delete</a>
try this
code = 'Delete';
try this
<a href="#" onClick="removeSound('121212')" >Delete</a>
I want to dynamically load content using jquery's .load() function. Im storing the links in the .rel attribute of the links. I've got it setup like this:
<script>
$(document).ready(function(){
$('.sidebar_link').click(function(){
var link = this.attr('rel');
event.preventDefault();
$('#content').empty();
$('#content').load(link '#content');
});
});
</script>
<div class="main_menu">
<a class="sidebar_link" href="#" rel="photos.htm">Photography</a>
<a class="sidebar_link" href="#" rel="furniture.htm">Furniture</a>
<a class="sidebar_link" href="#" rel="services.htm">Services</a>
</div>
</div>
Its not working - It doesn't seem to be grabbing the link out of the rel attribute and Im not sure why. Any ideas?
Try this:
var link = $(this).attr('rel');
.attr is not a native JavaScript function, it is from jQuery so you have to wrap this with jQuery
And this:
$('#content').load(link);
You can pass an id for loading fragments, however the url and the id need to be a string literal like so $('#content').load('photos.htm #content') The photos.htm page would need to have an element on the page with id content. If you just want to display the entire contents of the page, just use the url.
In your click handler this is a pure dom element; you need to call the jQuery function on it before accessing the rel attribue
$('#content').load($(this).attr("rel"));
$('#content').load(link '#content');
This is almost certainly throwing a syntax error -- check your JavaScript console. I think you just want .load(link);.
I have a page that I am trying to dynamically add some links to. The links are getting added to the page fine, but the '[' and ']' at either end of the line are getting dropped. The code from my .js file is:
var html = "[ <a href='#'>Change</a> | <a href='#'>Remove </a> ]";
$(html).appendTo("#id123");
The result I want is:
[ <a href='#'>Change</a> | <a href='#'>Remove</a> ]
The result I'm getting is:
<a href='#'>Change</a> | <a href='#'>Remove</a>
If I wrap the line in a <span> tag like so:
var html = "<span>[ <a href='#'>Change</a> | <a href='#'>Remove </a> ]</span>";
$(html).appendTo("#id123");
it renders as expected. I set a breakpoint on the code and checked the html var right before the .appendTo and it contains the '[' and ']'.
Anyone know why this is happening? Are '[' and ']' special character that need escaped and I'm just forgetting that fact?
When you wrap your html variable inside of "$()", it creates a jQuery object out of it. That object removes anything that's outside of a markup tag (like <a> or <span>). You can take out the"[" and put "TESTING THIS" in it's place and you'll see it still won't show up.
So that's why you're losing it in your output.
No, those are just not valid XHTML. If you put the '[' and ']' in their own spans, like so:
"<span>[ </span><a href='#'>Change</a> | <a href='#'>Remove </a></span> ]</span>"
You would also get your expected text. jQuery will parse and create valid HTML, and the brackets aren't contained in an element.
I'm not sure why this happens. It seems like something internal to the appendTo() I tried it with append() and it worked out fine. So you could write $("#id123").append(html)
I have several templates for faceboxes (lightbox) that I need at different points of the application. These are stored in different partials and files.
I will initialize different javascript functions in accordance to which ones I need. The question is, what is the best way to append the external HTML page into my body using javascript?
Since you tagged the question with it, here's a jQuery solution.
$("body").append("text");
Remember that the parameter can also be a DOM element. So you can do this :
var p = $("<p/>").text("a paragraph");
$("body").append(p);
the easy way with jQuery is:
$('#result').load('test.html');
<div id="result"><!--/ Hold My Data! /--></div>
obviously you can change #result with body
Also you can try some templates library..
Like handlebar and underscore..
and append in the el provided by backbone.js
Suppose you want to append this html in your template, then you can use the below code according to your application
Consider the code
Example 1:
rowData += '<div style="width: 130px;">'+param1+'</div>';
rowData += '<div style="width: 130px;">'+param2+'</div>';
$('#ID').html(rowData);
and please make sure that the js should be include in that file.
Here is the information of variable used above:
row data - the html that you want to append,
param- if you want to show the value of java script variable on browser dynamically,
#ID- ID of the div in which you want to append this html
example 2:
Consider the following HTML:
<h2>Hello World</h2>
<div class="user">
<div class="inner">Hi</div>
<div class="inner">Bye</div>
</div>
You can create content and insert it into several elements at once:
$( ".inner" ).append( "<p>Lorem Ipsum</p>" );