concatenate variable with background style broken in my case - javascript

$("#home").append('<div style="background:url("http://example.com/images/'+obj[i]+'.jpg")"');
what's wrong here? I think I'd closed it properly..

You have issues with mis-matching quotes - you need to escape the double quotes in the url properties' value, or remove them. You have also not closed the div tag properly. Try this:
$("#home").append('<div style="background:url(http://example.com/images/' + obj[i] + '.jpg)"></div>');
Example fiddle

the problem issued with the string you're building:
'<div style="background:url("http://example.com/images/'+obj[i]+'.jpg")"'
let's assume obj[i]==1.
your div will look like this:
<div style="background:url("http://example.com/images/1.jpg")"
notice two important isssues:
the div has no closing ('>' character)
the style attribute is "background:url(" - having same type of quotes prevent the navigator to understand you.
try use:
$("#home").append('<div style="background:url(/'http://example.com/images/'+obj[i]+'.jpg/')">');
good luck!

Related

Jquery, Escaping url with variable

trying to escape and html for appending in jquery with adding a dynamic variable that i am bringing in with ajax and I seem to not be able to get the escaping correct. Here is what I have -
$("<div><div class='presiImg' style='background: url(/\'/gleam\/public\/images\/itPrecedents\/" + keep.logo + "');'></div></div>").appendTo(".myDiv');
I am unsure how to escape this correctly so I can use the variable. Thanks.
You've got a couple issues here:
You're escaping the forward slashes in your URL and that is not necessary
You are using inconsistent quotes in your .appendTo()
As a suggestion, when I append raw HTML using JS/jQuery I try to use the single-quote and the JavaScript quote, and then use the double-quotes in the HTML. For me it is just easier to see that way. Also, the single-quote in the CSS url is not required, and is perhaps confusing the matter.
Anyway, if you change your line to the following it will work:
$('<div><div class="presiImg" style="background: url(\'/gleam/public/images/itPrecedents/' + keep.logo + '\');"></div></div>').appendTo('.myDiv');
There is a runnable example below if you want to see it in action:
$(function() {
var keep = { logo : "test.jpg" };
$('<div><div class="presiImg" style="background: url(\'/gleam/public/images/itPrecedents/' + keep.logo + '\');"></div></div>').appendTo('.myDiv');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myDiv"></div>
try
$("<div />",{
"class":"presiImg",
"style":"background: url(/gleam/public/images/itPrecedents/"+keep.logo+")"
}).appendTo(".myDiv");

Escape quotes in Javascript function

I'm trying to use a href onclick event in kendo grid template. When I click on the link I need the alert to diplay path text but it gives "PDF undefined error". I think it could be an issue with escape quotes.
${PDF} returns a string value.
template: "<a id='${PDF}' class='clsPDF' onclick='setpdf(\${PDF});' href='\\#'>View</a>"
<script>
function setpdf(path)
{
alert(path);
}
</script>
I would suggest slightly different approach. Instead of using inline function you can use a delegate function attached to your Grid element which will take care of all buttons like the one you defined in the template.
e.g.
$("#gridName").on("click", ".clsPDF" , function(){
var model = $("#gridName").data("kendoGrid").dataItem($(this).closest("tr"));
alert('you clicked on item with id' + model.TheIdProperty);
})
I hope this gives you the idea. I think it is cleaner this way.
When the browser looks at the link make sure it sees it like this:
<a id='someId' class='clsPDF' onclick='setpdf("pdf.pdf");' href='#'>View</a>
If it sees it like this:
<a id='someId' class='clsPDF' onclick='setpdf(pdf.pdf);' href='\\#'>View</a>
It will think pdf is a javascript object/variable and try and use it.
So you are right it is most likely a problem with quotes. You could try wrapping your \${PDF} with escaped double quotes:
\"\${PDF}\"

Add an image to a div using jquery

I have a sticky menu/floater bar when a user scrolls down on the page ... using jQuery I add the floater-bar class to the #menu-wrapper.
My goal is to add an image within an anchor at the same time floater-bar class is added so that the logo is on the floater bar as well.
if ($(window).scrollTop() > $header_top_pos) {
$("#menu-wrapper").addClass("floater-bar");
} else {
$("#menu-wrapper").removeClass("floater-bar");
}
I have tried the following:
$("#menu-wrapper").append("<img src="image" />");
Tried .add and .prepend as well
It makes the whole script fail as the floater-bar class no longer gets added into the menu.
Do this instead:
$("#menu-wrapper").append("<a href='#'><img src='image' /></a>");
You're using " to start and end the append, but then using it also to assign a href and the src, which is canceling out the string.
So only use " to start and end it, and if you need quotes inside, use ', or escape the double quotes by using \".
If you wanted to do string concatenation (although not what you asked for, could come in handy later on), you do something like this:
$("#menu-wrapper").append("<a href='"+url+"'><img src='"+image+"' /></a>");
image and url would be variables. + is used to concatenate the string, giving you access to use variables within the string.
try this
var anchor = $("a").attr("href","#");
var img = $("img").attr("src","img_source");
anchor.append(img);
$("#menu-wrapper").append(anchor);

HTML DOM manipulation : properly replace tag by heading tag

I want to replace some tag-inside-a-paragraph-tag by a heading-tag-enclosed-by-a-paragraph tag. This would result in proper W3C coding, but it seems that jQuery is not able to manipulate the DOM in the right way!? I tried several ways of (jQuery) coding, but i can't get it to work ..
Original code:
<p>some text <span>replace me</span> some more text</p>
Desired code:
<p>some text</p><h2>my heading</h2><p>some more text</p>
Resulting code by jQuery replaceWith():
<p>some text<p></p><h2>my heading</h2><p></p>some more text</p>
Demo: http://jsfiddle.net/foleox/J43rN/4/
In this demo, look at "make H2 custom" : i expect this to work (it's a logical replace statement), but it results in adding two empty p-tags .. The other 2 functions ("make code" and "make H2 pure") are for reference.
Officially the W3C definition states that any heading tag should not be inside a paragraph tag - you can check this by doing a W3C validation. So, why does jQuery add empty paragraph tags? Does anybody know a way to achieve this? Am i mistaken somehow?
You can achieve this with this code. However it's pretty ugly:
$('.replaceMe').each(function() {
var $parent = $(this).parent(),
$h2 = $(this).before('$sep$').wrap('<h2>').parent().insertAfter($parent);
var split = $parent.html().split('$sep$');
$parent.before('<p>' + split[0] + '</p>');
$h2.after('<p>' + split[1] + '</p>');
$parent.remove();
});
http://jsfiddle.net/J43rN/5/
If you read the jQuery docs, you will find:
When the parameter has a single tag (with optional closing tag or
quick-closing) — $("<img />") or $("<img>"), $("<a></a>") or $("<a>")
— jQuery creates the element using the native JavaScript
createElement() function.
So that is exactly what it is doing. And as I said in my comment, you can't change a parent node from a child node, you're altering the DOM here, not HTML code. So you'll need to either use replaceWith on the parent node and replace everything or use something like remove and append to split it up in multiple elements which you append after each other.
Try this:
var temp = "<p>some text <span>replace me</span> some more text</p>";
temp.replace(/(\<span\>replace me\<\/span\>)/gi, '</p><h2>my heading</h2><p>');
This will do a case insensitive replace for multiple occurences as well.
Read more about capturing groups here
Original credit to this question!
Please try this I have updated the http://jsfiddle.net/J43rN/6/ example by the below java script function please check I hope it will work for you
function fnMakeCode() {
$('#myP #replaceMe').html("<code id='replaceMe'>My Code</code>");
}
function fnMakeH2pure() {
$('#myP #replaceMe').html("<h2 id='replaceMe'>My H2 pure</h2>");
}
function fnMakeH2custom() {
$('#replaceMe').html("<p></p>").html("<h2>My H2 custom</h2>");
}

addClass/removeClass to a SubClass?

I am new to javascript and still learning the ropes. I am trying to use addClass to a subclass
I assumed that this would work:
jQuery('#wrow .text').addClass("error");
jQuery('#wrow .text').removeClass("error");
But it doesn't ? Little unsure how to do this to subclasses ? I am sure you gurus will help in a jiffy! :)
Edit: I am actually using
jQuery('#wrow_' + nameSpace + '.text').addClass("error");
but it isn't working?
If this is your actual code
jQuery('#wrow_' + nameSpace + '.text').addClass("error");
Then I suspect you're missing a space
jQuery('#wrow_' + nameSpace + ' .text').addClass("error");
// put a space right here -----^
Perhaps describe a little bit more as to what you're trying to accomplish?
$('#wrow .text').addClass("error");
$('#wrow .text').removeClass("error");
Will take any descendent of #wrow with the .text class and add the error class to those elements.
If you want to find the #wrow element when it also has the class "text", then it should look like this:
$('#wrow.text').addClass("error"); // no space in the selector
I don't think that's what you want either because you'd really only have one #wrow in the page (if you have more, you have another problem as IDs are supposed to be unique) so please clarify.
how does your html looks like. I'm just guessing that .text is child element of #wrow?
jQuery('#wrow > .text').addClass("error");
jQuery('#wrow > .text').removeClass("error");
jQuery('#wrow_' + nameSpace + '.text').addClass("error");
What is nameSpace? Will it actually contain a space? If not you may need a space on one or both sides

Categories