Dynamic Ajax Request only shows final responsetext [duplicate]

StackOverflow https://stackoverflow.com/questions/15369812

  •  23-03-2022
  •  | 
  •  

سؤال

I saw the similar problem below: 2 AJAX commands that work, but I only see the last "responseText"

But I am using an array of fields, so I am not sure if that makes it different. For testing I added this to the top to define some data:

<?php
    $a = array('star_wars','marvel','board_games','','The_Han_Solo_Omnibus');
    $b = implode("~",$a);
    $count = count($a);
?>

I saw in the answers above he defined: var httpRequest; to fix the problem. I tried - var xmlhttp; but that didn't do it.

Any ideas on how to get all the sections to load, not just the final one? I even added tons of delays and nothing is working.

THANKS

<script>

function showDiv(a)
{
var temp = new Array();
var delay = 2000;            // 1 second
var result = 'loading';    // the result from your AJAX response
var xmlhttp;

        temp = a.split('~');
        for(i=0;i<temp.length;i++)
        {
            alert(temp[i]); 
                divno =  i + 1;
            currentdiv = "loadArea" + divno;
            alert (currentdiv);

                    //var pageNumber = 1;
                    //eval("var text" + pageNumber + "=123;");
                    //alert(text1);

            if (temp[i]=="")
                  {
                  document.getElementById(currentdiv).innerHTML=""; //increment
                  }

            if (window.XMLHttpRequest)
                    {// code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();//increment
                    alert ("usingchrome");
                    }
            else
                    {// code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//increment
                    //alert ("using IE");
                    }

            xmlhttp.onreadystatechange=setTimeout(function()  //increment
                    {
                        alert ("inreadystate");
                         if (xmlhttp.readyState==4 && xmlhttp.status==200) //increment
                                {
                                if (temp[i] !="") {
                                setTimeout(function() {     
                                document.getElementById(currentdiv).innerHTML=xmlhttp.responseText; //increment                         

                                                    }, delay);



                                alert ('valueisgood');
                                                 }

                                }
                      }, delay);


                                if (temp[i] !="") {
                                    url = "http://zocreative.com/load.php?f="+temp[i];
                                    xmlhttp.open("GET",url,true);
                                    xmlhttp.send();
                                }

                  } 
        }





</script>
</head>
<body id="page1" onload="showDiv('<?php echo $b; ?>');">

<?php

$i = 1;
while ($i <= $count) {

    echo ("<div id='loadArea". $i ."'><br />
    <!-- AJAX content will load here-->
    loading ... ". $i ."
    </div>");
      /* the printed value would be
                   $i before the increment
                   (post-increment) */
    $i++;
}
?>
<div id="note"></div>
هل كانت مفيدة؟

المحلول

I highly recommend that you take a look at jQuery.load: http://api.jquery.com/load/. What you're trying to do isn't as complicated as the code you've written.

I'm not going to guarantee exact syntax here, but here's a simplification of the Javascript code you have above re-written using jQuery and jQuery load:

function showDiv(a) {
var temp = a.split('~'),
    divno;

for(i = 0; i < temp.length; i += 1) {
    divno =  i + 1;
    jQuery('#loadArea' + divno.toString()).load('http://zocreative.com/load.php?f=' + temp[i]);
}

The key here is that you're asking jQuery to load the URL into the specified div without having to track the asynchronous response yourself. There are several options to the jQuery.load method that will allow you to respond to completion, so read the docs.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top