jQuery append: can't get the quotes right

Question

I'm trying to add some HTML to a div, but I can't get the quotes right... This is what I thought would work, but doesn't...:

success: function (data) {
id = data.photo_id;
$("#successtext").append('<a href="https://www.theurl.com/' + id + '" data-role="button">The link</a><a href="#" data-role="button">Log Out</a>');
$("#success").show();
$("#uploading").hide();
$("#turn").hide();
turnable = 0;
}

As you can see, this is part of an Ajax calls. Note that the append does work, just not with the right button markup.

Note: the first link links to, for example, https://www.theurl.com/223424324

What am I doing wrong, and why? Thanks!

Answer 1

Existing:

 '<a href="https://www.theurl.com/"'+id+'"

You're ending your quotes for href attribute before adding the id to it and after adding id you're adding the quotes again, which is breaking the things.

Correct:

'<a href="https://www.theurl.com/'+id+'"

The basic thing is that when you're appending text after you're ajax request then jquery mobile is not creating its own DOM element around your link to look it like a button. So for that we need to allow jquery mobile to create its DOM after appending the text. Try below function.

$.mobile.activePage.find('#successtext').trigger('create');

Fiddle

Answer 2

you have extra quote at www.theurl.com/"'+id+'" , change to:

$("#successtext").append('<a href="https://www.theurl.com/'+id+'" data-role="button">The link</a><a href="#" data-role="button">Log Out</a>');

Update:: call .trigger('create') after appending

$("#successtext")
    .append('<a href="https://www.theurl.com/'+id+'" data-role="button">The link</a><a href="#" data-role="button">Log Out</a>')
    .trigger('create');

Demo:: jsFiddle

Answer 3

Try this :

JS :

$('#successtext').append('<a href="https://www.theurl.com/'+id+'" data-role="button">The link</a><a href="#" data-role="button">Log Out</a>');

Answer 4

jsFiddle Demo

As others have pointed out, the issue is that your href has two closing quotation marks (basically href="..."" ). It does however highlight the issue you can run into with manually stuffing long html fragments into JS strings before appending them with jQuery. Consider instead treating the html elements as objects, and constructing them as such with jQuery:

$("#successtext").append($("<a />", {
    href: "https://www.theurl.com/" + id,
    "data-role": "button",
    text: "The link"
}), $("<a />", {
    href: "#",
    "data-role": "button",
    text: "Log Out"
}));