SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scriptaculous, AJAX issues in IE7

    I have been having a problem over a couple of sites involving Scriptaculous' Ajax.Request() function when using my application in IE7.

    The operation that I am trying to do is submit a new record and have it through AJAX be added to the existing list without refreshing the page. It works well in FF2, but it doesn't work in IE. I ran updates to make sure I am fully up to date. I updated scriptaculous and prototype to the latest versions and I have been switching on/off IE's "enable native XMLHTTP" option.

    So here is the process:

    I click the "Add New Event" link
    The form is toggled "on"
    I fill out the form and submit.
    The record is inserted and onComplete runs the script to getEvents.

    In IE, I find that the record inserts, but is not updated unless I close the browser and reopen.

    Here is my javascript (hopefully, I made my mistake here)

    Code:
    function getEvents() {
    	document.getElementById('upcomingUsherEvents').innerHTML = 'Loading...';
    	new Ajax.Updater('upcomingUsherEvents', 'getEvents.php', {method:'get', parameters:formVars})
    }
    
    function saveEvent() {
    	var params = Form.serialize("event");
    	var eventInsert = new Ajax.Request("addEvent.php", {method:'post', parameters:params, onComplete:function(){getEvents(); new Effect.Highlight('upcomingUsherEvents');}});
    	document.getElementById("newEvent").style.display = "none";
    	document.getElementById("neweventlink").style.display = "block";
    	document.getElementById("insertEventyes").style.display = "block";
    	Effect.Fade('insertEventyes', {duration: 2.5 });
    }
    The form tag:

    Code:
    <form name="event" id="event" onsubmit="return false;">
    The submit button"

    Code:
    <button onclick="saveEvent();return false;">Schedule this event</button>
    Has this happened with anyone else?

  2. #2
    SitePoint Member
    Join Date
    Dec 2007
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, so after a bit of researching, I can answer my own question.

    Turns out that the problem is with IE's caching. When I initially load the page, the getEvents function is being called successfully (and after the insert as well). IE caches the page and so when I insert a record, it is grabbing the cached version therefore not changing any data. When I close the browser it dumps the cache and I see that the record has been added.

    So a simple fix is to add a random number to the end of your URL, that way IE sees that it needs to refresh the data since it is getting a new URL.

    Here is the code:

    Code:
    new Ajax.Updater('upcomingUsherEvents', 'getEvents.php?r='+ Math.floor(Math.random()*1000), {method:'get', parameters:params, asynchronous:true});
    That should do the trick.


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
  •