SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Ajax doesn't work when I run few AJAX events

    Hello guys,

    I'm using simple AJAX function on my site and it works fine until I run it few times during 1-2 seconds. Then it's just stops working.

    I wonder why does it happen and how can I fix it?

    Ajax code is here:

    Code:
    var AJAX = null;
    if (window.XMLHttpRequest) {
        AJAX=new XMLHttpRequest();
    }else{
        AJAX=new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    AJAX.onreadystatechange = function() {
    if (AJAX.readyState==4 || AJAX.readyState=="complete"){
        showAjax(AJAX.responseText, AJAX.status);
    }
    }
    
    function showAjax(ajaxData, serverStatus) {
    	document.getElementById(someDiv).innerHTML = ajaxData;
    }
    Last edited by al9; Oct 30, 2007 at 15:54.

  2. #2
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what about it stops functioning, are you clicking it too many times before it has finished loading?

  3. #3
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by gimbles View Post
    what about it stops functioning, are you clicking it too many times before it has finished loading?
    Something like this. Actually this function is called when I put mouse cursor over one of 20-30 small images (each image has it's own id, which is sending to server).

    So, when I put cursor over 3-4 images during 1 second, for example, Ajax function doesn't work work.

  4. #4
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any idea how to fix it guys?

  5. #5
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Try creating an ajax object per request, its most likely due to ajax response conflicting with the next ajax request since mostly likely you have one ajax object.

  6. #6
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by wonshikee View Post
    Try creating an ajax object per request, its most likely due to ajax response conflicting with the next ajax request since mostly likely you have one ajax object.
    How can I do it? I'm sorry for maybe stupid questions, but I don't know how can I do it.

  7. #7
    SitePoint Wizard wonshikee's Avatar
    Join Date
    Jan 2007
    Posts
    1,223
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    You could do something like this

    HTML Code:
    <script>
    var ajaxObj = new Array();
    var ajaxCount = 0;
    function ajaxFunc()
    {
        var ajaxObj[ajaxCount] = new XMLHttpRequest();
        ajaxCount++;
        // and so on..
    
    
    
    }
    </script>
    So the idea is to store it in an array, and each time one is created you raise the index, but make sure that the request goes out with the right index.

    Also AJAX.onreadystatechange = function() {
    if (AJAX.readyState==4 || AJAX.readyState=="complete"){
    showAjax(AJAX.responseText, AJAX.status);
    }

    should be something like

    ajaxObj[(ajaxCount-1)].onreadystatechange = function() {
    if (this.readyState==4 || this.readyState=="complete"){
    showAjax(this.responseText, this.status);
    }

    Not sure if this will work like this, but i have no time to test it but i'm sure a javascript guru could help you out if this doesn't get you pointed in the right direction.

    Also note that there is GC, so this would eventually stink up your computer if you don't clean it out.

  8. #8
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for idea. I tried i, but it doesn't work.

    The Firebug shows this errors when I put mouse cursor over few images during 1-2 seconds:

    [Exception... "Component returned failure code: 0xc1f30001 (NS_ERROR_NOT_INITIALIZED) [nsIXMLHttpRequest.send]" nsresult: "0xc1f30001 (NS_ERROR_NOT_INITIALIZED)" location: "JS frame :: javascript: eval(__firebugTemp__); :: anonymous :: line 1" data: no]
    mc(mouseout clientX=0, clientY=0, div#map)main.js (line 240)
    ne(mouseout clientX=0, clientY=0)main.js (line 540)
    iv(mouseout clientX=0, clientY=0)
    My code looks like this now:

    var AJAXphoto = Array();

    function sendAjaxPhoto (photoId, photo_big){
    var url='http://www.site.com/ajaxShowPhoto.php?photoId=' + photoId + '&photoBig=' + photo_big;
    AJAXphoto[photoId].open("GET", url, true);
    AJAXphoto[photoId].send(null);
    }

    function showPhoto (ajaxData, serverStatus){
    photoWindow = document.getElementById("infoWindow");
    photoWindow.innerHTML = ajaxData;
    }

    big function that creates images(....){

    ....

    if (window.XMLHttpRequest) {
    AJAXphoto[photoId] = new XMLHttpRequest();
    }else{
    AJAXphoto[photoId] = new ActiveXObject("Microsoft.XMLHTTP");
    }

    AJAXphoto[photoId].onreadystatechange = function() {
    if (this.readyState==4 || this.readyState=="complete"){
    showPhoto(this.responseText, this.status);
    }
    }

    ....

    event.addListener(image, "mouseover", function() {
    sendAjaxPhoto(photoId, photo_big);
    }

    ....

    }

    But it doesn't work. Can you look into it please. Maybe I made some error here.

  9. #9
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Anyone? I'd really like to make this function work.

  10. #10
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This part is what creates the object:

    Code:
    if (window.XMLHttpRequest) {
    AJAXphoto[photoId] = new XMLHttpRequest();
    }else{
    AJAXphoto[photoId] = new ActiveXObject("Microsoft.XMLHTTP");
    }
    I'd stick that at the beginning of your sendAjaxPhoto function

  11. #11
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    This part is what creates the object:

    Code:
    if (window.XMLHttpRequest) {
    AJAXphoto[photoId] = new XMLHttpRequest();
    }else{
    AJAXphoto[photoId] = new ActiveXObject("Microsoft.XMLHTTP");
    }
    I'd stick that at the beginning of your sendAjaxPhoto function
    Thanks Jim.

    I've tried this, but I get error in Firebug:

    AJAXphoto[photoId] has no properties
    [Break on this error] AJAXphoto[photoId].onreadystatechange = function() {
    I think it's because when script calls sendAjaxPhoto, AJAXphoto object wasn't created yet.

    My big function that creates images (look at quote in my previous message please) is creates image with AJAXphoto object and mouseover event that calls sendAjaxPhoto() function.

  12. #12
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're loading an image with AJAX? Or are you loading image details (title, description). Because you can load images asynchronously without ajax just by creating an <img> tag and setting the .src property to the url of your image.

  13. #13
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    You're loading an image with AJAX? Or are you loading image details (title, description). Because you can load images asynchronously without ajax just by creating an <img> tag and setting the .src property to the url of your image.
    No Jim, I'm running PHP script which checks something in MySQL, preparing image and sends photo id back to JS.

    I've fixed biggest bug in the script above by changing "this" to full object name.

    But I still get errors like I described above when I do mouseover few times per second. Should I ignore them?

    And also I have problem when I do mouseover for one image twice per second. Script doesn't work when I do it. But when I do mouseover for like 7 different images, script works. It's strange and I can't understand why does it happen. Do you have any idea?

  14. #14
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's probably because you mouseover an image and it creates the object
    AJAXphoto[photoId]

    When you mouseover again, it tries to use that object to resend an ajax request, and perhaps the first one hasn't finished yet.

    You could check it first:
    Code:
    function sendAjaxPhoto(photoId, photo_big) {
      if (!AJAXPhoto(photoId)) {
        // create and dispatch ajax object
      }
    }

  15. #15
    SitePoint Guru
    Join Date
    Mar 2004
    Posts
    639
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    It's probably because you mouseover an image and it creates the object
    AJAXphoto[photoId]

    When you mouseover again, it tries to use that object to resend an ajax request, and perhaps the first one hasn't finished yet.

    You could check it first:
    Code:
    function sendAjaxPhoto(photoId, photo_big) {
      if (!AJAXPhoto(photoId)) {
        // create and dispatch ajax object
      }
    }
    Thanks for the idea Jim. You're the best.

    I've added this line into my sendAjaxPhoto() function and it works now:

    Code:
    if (AJAXphoto[photoId].readyState == 0 || AJAXphoto[photoId].readyState == 4) {


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •