Using jQuery to set value after SPAN element

Question

How can I put AJAX data in after a </span>?

$(function () {
  function check_messages() {
    $.ajax({
      url: '/check/',
      cache: false,
      success: function (data) {
        $('.here').text(data)
        complete: function () {
          window.setTimeout(check_messages, 20000);
        }
    });
  };
  check_messages();
});

<button type="button" class="navbar-toggle collapsed msg" data-toggle="collapse" data-target="#search">
  <span class="glyphicon glyphicon-envelope here" aria-hidden="true"></span>
  HERE ajax data
</button>

Your AJAX call is missing a } to close the success block. Is that just a typo in the question? — Rory McCrossan
– Rory McCrossan, Commented Oct 18, 2017 at 7:42
@RakeshRaj he want to set the data result after the span, not inside it. — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Oct 18, 2017 at 7:45
@RoryMcCrossan my comment to Rakesh was based on hes first comment being use $(".here").html(data) — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Oct 18, 2017 at 7:49

Axel · Accepted Answer · 2017-10-18 17:52:46Z

1

Actually your snippet was buggy. For example: the complete callback was inside of the success callback or one could say the outermost function wasn't closed depending on how you want to read it.

Here we go with a sanitized version including jQuery after() method to add the data right after the DOM element you like:

$(function () {
    function check_messages() {
        $.ajax({
            url: '/check/',
            cache: false,
            success: function (data) {
                // instead of $('.here').text(data)
                $('.here').after(data)
            },
            complete: function () {
                window.setTimeout(check_messages, 20000);
            }
        });
    };
    check_messages();
});

EDIT:

$(function () {
    var $CheckMessages = $('<span/>').insertAfter('.here');
    function check_messages() {
        $.ajax({
            url: '/check/',
            cache: false,
            success: function (data) {
                $CheckMessages.html(data);
                // if data is text only (no HTML) it would be more secure to use .text() method...
                // $CheckMessages.text(data);
            },
            complete: function () {
                window.setTimeout(check_messages, 20000);
            }
        });
    };
    check_messages();
});

edited Oct 18, 2017 at 17:52

answered Oct 18, 2017 at 11:00

Axel

3,33111 gold badges39 silver badges61 bronze badges

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

1 Comment

Akash D Over a year ago

sry now only saw your post.actually it is working but the problem is data is overwriting with existing one. for eg: i get notify after </spam> .like this 1 so after 10 seconds again it read backend data and update. now the problem is 11.it kept writing again and again with every 10secs.anyway thanks for your post i cahnged that success

Collectives™ on Stack Overflow

Using jQuery to set value after SPAN element

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related