CODEWITHSUNDEEP
javascriptphpjqueryajax
mattchambers
mattchambers

Reputation: 185

Ajax and PHP while loop situation

I have a .js document with AJAX and jQuery that pulls info from a PHP page with a loop.

My problem is that whenever I call the JS file from on PHP file's while loop the JavaScript only pulls the data from the top iteration and not the 2nd, 3rd, 5th or any other below the 1st data.

This is the JS file

var delete_group = function load_xml() {
  var xmlhttp;

  if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
  } else {
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
  }

  xmlhttp.onreadystatechange = function() {
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById('status').innerHTML = xmlhttp.responseText;
    }
  }

  var id = document.getElementsByClassName('id')[0].innerHTML

  xmlhttp.open('POST', 'ajax/file.php?id='+id, true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send()
}

$(document).ready( function pop_window() {
  $('.delete_group').click( function show_window() {
    $.fallr('show', {
      content: 'Status: <div id="status"> </div>',
      position: 'bottom',
      buttons: {
        button1: {text: 'Yes', danger: true, onclick: delete_group},
        button2: {text: 'Cancel'}
      },
      content: '<p>Are you sure want to delete this?</p>'
               + 'Status: <div id="status"> </div>',
      icon: 'error'
    })
  })
});

and this is the PHP cut of the while loop:

echo '<li>
        <h4>'.$name.'</h4>
        <div class="btn dropup">
          <button data-toggle="dropdown" class="btn dropdown-toggle">
            Options... <span class="caret"></span>
          </button>
          <ul class="dropdown-menu">
            <li><a href="view.php?id='.$id.'">View</a></li>
            <li><a href="file.php?id='.$id.'">Add Multiple Contacts</a></li>
            <li class="divider"></li>
            <li><a class="delete_group">Delete</a><p hidden class="id">'.$id.'</p></li>
          </ul>
        </div>
      </li>'

If I activate the JavaScript and make the script do what it's suppose to do, it's going to call the 1st value from the 1st class='id'

How can I fix this and make document.getElementsByClassName loop and get the right value from the item that I want?

Upvotes: 0

Views: 1067

Answers (1)

Luke
Luke

Reputation: 2486

Okay, I think I understand your question. Apologies if I have misunderstood anything, but I will try to give you an answer now.

As I understand it, your problem is that you need to figure out which '.delete-group' element was clicked in order to find the ID of the element that you want to delete.

Luckily, jQuery gives you this in event callbacks in the form of 'this' which is a standard JavaScript DOM object. (or, perhaps that's just a feature of JavaScript itself, but we'll call it jQuery's fault for the sake of argument.)

So, if I have a 'click' callback in jQuery I can use $(this) to get a jQuery object referencing the invoking DOM object. I can then use jQuery functions to find associated attributes and parent/child/sibling DOM objects.

In this case, you might want to use $(this).siblings('.id') which should give you a list of all siblings (that is, DOM elements of the same parent) of the class 'id' as jQuery objects. In your case you'll only have one sibling so can simply access the first element $(this).siblings('.id')[0].

You can then pass this through to your fallr onclick callback function so you can use it for your AJAX call along with the .html() method.

Please, let me know if I have misunderstood you at any point, but I believe this should be the solution you are looking for. I also recommend, as andrew said in a comment, using jQuery ($.ajax() or $.post()) for your AJAX call as it is easier to read and more consistent.

Upvotes: 1

Related Questions