Bad html formatting with jQuery.html()

Question

I have something that I can't understand and i'm struggling with that for 2 days. For the story, I'm using VICOPO api to get zipcode/city (France only I think). The thing is that the code I'm generating is not really good interpreted by jQuery (or maybe I'm doing it wrong) Here is the code:

$('#postcode').val($('#postcode').val().toUpperCase());

    if ($('#postcode').val().length == 5)
    {
        var $ville = $('#postcode');    
        $.vicopo($ville.val(), function (input, cities) {

          if(input == $ville.val() && cities[0]) {

          if (cities.length == 1)
            $('#city').val(cities[0].city);
          else
          {
              var html = '';                                
              html += '<div style=\'text-align:center\'>';

              for (var i=0; i<cities.length; i++)
              {
                 var v = cities[i].city;
                 // --- HERE IS MY PROBLEM ---
                 html += '<p onclick=\'alert(\'' + v + '\');\'>' + v + '</p>';
              }                             

              html += '</div>';

              console.log(html);

              $('#multi_ville').html(html);
        }
    }
 });

When I inspect the elements in the multi_div this is what I get:

<p onclick="alert(" billey');'>BILLEY</p>
<p onclick="alert(" flagey-les-auxonne');'>FLAGEY-LES-AUXONNE</p>
etc ....

And when I inspect the console log, all looks correct:

<p onclick='alert('BILLEY');'>BILLEY</p>
<p onclick='alert('FLAGEY-LES-AUXONNE');'>FLAGEY-LES-AUXONNE</p>
<p onclick='alert('VILLERS-LES-POTS');'>VILLERS-LES-POTS</p>
etc ....

If someone have an idea or what I'm doing wrong, it would cool.

(may I mention, this code is in a smarty tpl file surrounded with the {literal} tag)

YouneL · Accepted Answer · 2018-01-15 12:09:58Z

1

Try to create self closed tags via jquery and then append them to #multi_ville, here is an example:

// create div element
var div = $('<div/>', {
    'style' : 'text-align:center'
});

for (var i=0; i<cities.length; i++)
{
    var v = cities[i].city;

    // create p element with click event and then append it to div
    $('<p/>').on('click', function() { 
        alert(v); 
    }).text(v).appendTo(div);

}                             

$('#multi_ville').append(div);

EDIT It seems that my code above always alert the last city when we click on a element, that's because alert takes the value that v variable has at the time it runs, to solve this we can use let statement:

let v = cities[i].city;

Or a function:

for (var i=0; i<cities.length; i++) {

    var v = cities[i];

    createPTag(v, div);

}

function createPTag(v, div) {

    $('<p/>').on('click', function() { 
        alert(v); 
    }).text(v).appendTo(div);

}

edited Jan 15, 2018 at 12:09

answered Jan 15, 2018 at 1:15

YouneL

8,3692 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stv Over a year ago

Nice one ! but the problem now is that when i click on an element, it's always the text of the last one.

YouneL Over a year ago

I see, You could resolve this by using let v = cities[i].city or use function inside the loop that accept v as argument, I updated my answer

YouneL Over a year ago

Glad it helped,

swinn · Accepted Answer · 2018-01-15 00:44:21Z

1

Instead of

html += '<p onclick=\'alert(\'' + v + '\');\'>' + v + '</p>';

try this:

html += '<p onclick="alert(\'' + v + '\');">' + v + '</p>';

Here's some info on when and how to use double/single quotes.

EDIT:

Also, check the else on this if statement:

if (cities.length == 1)

You need a closing curly bracket (}) to close in the else. It should be added directly after this line:

$('#multi_ville').html(html);

edited Jan 15, 2018 at 0:44

answered Jan 15, 2018 at 0:30

swinn

8801 gold badge16 silver badges48 bronze badges

5 Comments

Stv Over a year ago

Thanks, but still have : Uncaught SyntaxError: Unexpected token }

Argus Duong Over a year ago

@Stv, you missed } at the top if. Here is the correct code: jsfiddle.net/g372p837/1. Remember write a beautiful code and you never get this error again.

Stv Over a year ago

@Anh, nothing is missing else i will have an error before, the thing is, the injected code in the div is not the same i'm generating (as i can see in the console)

YouneL Over a year ago

Does the alert(v) shows up when you click on one of those elements?

Stv Over a year ago

Nope, as v is a string it need to be surrounded by single quote so i have alert(BILLEY); and then BILLEY is undefined.

Collectives™ on Stack Overflow

Bad html formatting with jQuery.html()

2 Answers 2

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related