CODEWITHSUNDEEP
javascriptjquerycsshtml
Surya
Surya

Reputation: 16002

jQuery appending wrong html elements

I have this code for my form in jQuery:

$('form.ajax_form').on('submit', function(){
    event.preventDefault();
    var form_errors_space = $(this).find('.ajax_form_errors:first');
    $.ajax({
      type: "POST",
      dataType: 'script',
      url: $(this).attr('action'), 
      data: $(this).serialize(),
      // show success response from server.
      success: function(data, status, jqXHR) {
        console.log(data);
        console.log(status);
        console.log(jqXHR);
      },
      // show error response from the server.
      error: function(data, status, error_message) {
        console.log(data);
        console.log(status);
        console.log(error_message);
        var errors_html = $("<div class='alert alert-danger'><div>");
        // $(errors_html).append('Status code: ' + data.status + '. Message: ' + error_message);
        if (data.status == 422){
          var error_messages = JSON.parse(data.responseText);
          var ul = $('<ul></ul>');
          for (i in error_messages){
            console.log(error_messages[i]);
            var li = $('<li>' + error_messages[i] +'<li>');
            $(ul).append(li);
          }
          $(errors_html).append(ul);
        }
        console.log('some value');
        console.log($(errors_html));
        form_errors_space.html($(errors_html));
        form_errors_space.show();
      }
    });
  });

This generates following HTML:

<div class='alert alert-danger'>
  <div></div>
  <ul>
    <li>Content can't be blank</li>
    <li></li>
    <li>Interstitial width can't be blank</li>
    <li></li>
    <li>Interstitial height can't be blank</li>
    <li></li>
    <li>Start date can't be blank</li>
    <li></li>
    <li>End date can't be blank</li>
    <li></li>
    <li>Priority can't be blank</li>
    <li></li>
    <li>Tag can't be blank</li>
    <li></li>
    <li>Is for employees with rewards can't be blank</li>
    <li></li>
  </ul>
</div>

When I expect the output to be:

<div class='alert alert-danger'>
  <ul>
    <li>Content can't be blank</li>
    <li>Interstitial width can't be blank</li>
    <li>Interstitial height can't be blank</li>
    <li>Start date can't be blank</li>
    <li>End date can't be blank</li>
    <li>Priority can't be blank</li>
    <li>Tag can't be blank</li>
    <li>Is for employees with rewards can't be blank</li>
  </ul>
</div>

Value of data.responseText is:

"["Content can't be blank","Interstitial width can't be blank","Interstitial height can't be blank","Start date can't be blank","End date can't be blank","Priority can't be blank","Tag can't be blank","Is for employees with rewards can't be blank"]"

What am I doing wrong here??

Upvotes: 1

Views: 658

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337570

The li you create does not have a closing tag, so you have two <li> elements created. The browser is then adding the closing tag for you to try and maintain page validity.

Change this:

var li = $('<li>' + error_messages[i] + '<li>');

To this:

var li = $('<li>' + error_messages[i] + '</li>'); // < note the '/'

Or a better method to avoid problems like this:

var li = $('<li />', { text: error_messages[i] });

Upvotes: 1

Stanislav Demydiuk
Stanislav Demydiuk

Reputation: 141

Your error in

var li = $('<li>' + error_messages[i] +'<li>');

It should be

var li = $('<li>' + error_messages[i] +'</li>');

Upvotes: 1

Related Questions