Ajax and PHP while loop situation

Question

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?

why would you handle the ajax manually when you're including jquery? use $.post or $.ajax — andrew
– andrew, Commented Jan 19, 2014 at 19:29
I'm a beginner to jQuery but will it fix my problem if I use ajax in jQuery? @andrew — mattchambers
– mattchambers, Commented Jan 19, 2014 at 19:44
it won't necessarily fix the issue but it will make your life easier. an ajax requst with jquery is as simple as $.post('url',{data1name:data1val,data2name:data2val},function(theAjaxResponse){do something with theAjaxResponse}); — andrew
– andrew, Commented Jan 19, 2014 at 19:50
AJAX in jQuery is really a lot simpler: api.jquery.com/jquery.ajax — Luke
– Luke, Commented Jan 20, 2014 at 16:09
Why don't you pass the ID through to the AJAX call from your click function? You also don't need to name your functions if you are passing them straight into a function... "function load_xml()", "function pop_window()" and "function show_window()" can all just be "function()" — Luke
– Luke, Commented Jan 20, 2014 at 16:17

Luke · Accepted Answer · 2014-01-20 16:47:43Z

1

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.

answered Jan 20, 2014 at 16:47

Luke

2,4969 gold badges40 silver badges67 bronze badges

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

4 Comments

mattchambers Over a year ago

You understand what I'm asking but I have to pass a $_GET variable to the PHP file, how do I do that? Do I create a var like 'var id = $(this).siblings('.id')[0] and ad to the end of the url string in ajax jQuery?'

Luke Over a year ago

Well, to find out how to send a querystring you ought to read the jQuery documentation I linked as that will tell you better than I can. However, yes, one of your options is simply to append it to your URL. As far as getting it is concerned, I understood that the actual ID was in the 'innerHTML' of your '.id' object. In the jQuery world you access this with .html(). So var id = $(this).siblings('.id')[0].html(); then in your fallr setup you add onclick: delete_group(id)... then you can send the data in your AJAX call within your delete_group function.

Luke Over a year ago

@mattchambers Also, since you are using the POST method, the data your PHP file will receive in the HTTP request will be found in the $_POST variable. If you wanted $_GET you should use the GET method in your AJAX code. I would recommend using POST in this instance, however, given the nature of the operation. GET should only really be used when retreiving data rather than when modifying it... there are other methods (PUT, DELETE) but that's a whole other topic... (en.wikipedia.org/wiki/Representational_state_transfer)

Luke Over a year ago

@mattchambers did this answer your question? Do you need further help?

Collectives™ on Stack Overflow

Ajax and PHP while loop situation

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related