AJAX: $(this) on event listener

1174 views javascript
-2

I have two files, one contains the html and javascript code and the other one contains texts. It works but only on the first div because I specified it on the javascript code. Now I would like to display the text only on the clicked element. I would like to use the $(this) property but how ?

HTML code

<div id="ajax">
    <div>
        <ul>
            <li>list 1</li>
        </ul>
        <a href="" class="link">show</a>
    </div>

    <div>
        <ul>
            <li>Another list</li>
            <li>Another list 2</li>
        </ul>
        <a href="" class="link">show</a>        
    </div>

</div>

<script type="text/javascript">

var btns = document.querySelectorAll('.link');
var username = "username";
var message = "This is my message";

for (var i = 0; i < btns.length; i++) {
    var btn = btns[i];
    btn.addEventListener('click', function(e){
        e.preventDefault();

        var xmlhttp = new XMLHttpRequest();

        xmlhttp.onreadystatechange = function() {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {

                    var li = document.createElement('li');
                    $('#ajax div ul')[0].append(li);
                    document.getElementsByTagName('ul')[0].lastChild.innerHTML = xmlhttp.responseText;
                }
            }

            xmlhttp.open('GET', 'insert.php?username='+username+'&msg='+message, true);
            xmlhttp.send();

    })
}

</script>

answered question

Hi @Marcel, what do you mean by "I would like to use the $(this) property" ?

1 Answer

4

Use your code I have made some changes, I hope it is not an inconvenience:

var username = "username";
var message = "This is my message";

$('.link').click((e) => {
  
  var divContext = $(e.target).parent();
  var xmlhttp = new XMLHttpRequest();
  $(e.target).parent().find("li:last").append("<li>New li</li>")
  
  xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {

        var li = document.createElement('li');
        divContext.append(li);
        document.getElementsByTagName('ul')[0].lastChild.innerHTML = xmlhttp.responseText;
    }
  }

  xmlhttp.open('GET', 'insert.php?username='+username+'&msg='+message, true);
  xmlhttp.send();

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ajax">
    <div>
        <ul>
            <li>list 1</li>
        </ul>
        <a href="" class="link">show</a>
    </div>

    <div>
        <ul>
            <li>Another list</li>
            <li>Another list 2</li>
        </ul>
        <a href="" class="link">show</a>        
    </div>

</div>

1) I replaced var btns = document.querySelectorAll('.link'); and btn.addEventListener('click', function(e){ whit $('.link').click((e) => {

2) If you look into the click function, you'll can see this line var divContext = $(e.target).parent();, $(e.target) is equivalent to $(this) in arrow function with jquery. If don't like arrow function you can use it this way:

$('.link').click(function() {

      var divContext = $(this).parent();
      var xmlhttp = new XMLHttpRequest();
      $(e.target).parent().find("li:last").append("<li>New li</li>")

      xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {

            var li = document.createElement('li');
            divContext.append(li);
            document.getElementsByTagName('ul')[0].lastChild.innerHTML = xmlhttp.responseText;
        }
      }

      xmlhttp.open('GET', 'insert.php?username='+username+'&msg='+message, true);
      xmlhttp.send();

    });

posted this

Have an answer?

JD

Please login first before posting an answer.