Page 1 of 1

AJAX form submit

Posted: Mon Oct 19, 2009 11:45 am
by gth759k
I recently built a form that submits data to my database with an ajax function that is called through onClick="function ..." on the submit button. That all works perfectly, however the information shown on the page needs to update to reflect the new data so I made that work by calling another ajax function, which also works. The problem is I also have jQuery in the page. When the page loads the jQuery all works, after the ajax function updates the page (without refreshing the browser) none of the jquery works. Any suggestions?

here's the ajax function for updating the data

Code: Select all

 
// Get the HTTP Object
function getHTTPObject(){
    if (window.ActiveXObject) 
        return new ActiveXObject("Microsoft.XMLHTTP");
    else if (window.XMLHttpRequest) 
        return new XMLHttpRequest();
    else {
        alert("Your browser does not support AJAX.");
        return null;
    }
}
 
var httpObject = null;
 
// Set up the updating routine
function displayRegularFeeds(user_id){
    httpObject = getHTTPObject();
    
    var fast = "http://localhost/capicy/regularfeeds.php?id="+user_id;
    if (httpObject != null) {
        httpObject.open("GET", fast, true);
        httpObject.send(null);
        httpObject.onreadystatechange = recieveRegularFeeds;
    }
}
// Recieve the time and display it
function recieveRegularFeeds(){
    if(httpObject.readyState == 4){
        document.getElementById('regularbox').innerHTML = httpObject.responseText;
    }
}
 
heres the onclick from the submit button

Code: Select all

 
echo '<input type="button" id="share" name="share" value="Share" class="sharebuttonlink" onClick="javascript&#058;var phrase = document.getElementById(\'status\').value; shareStatus(phrase); displayRegularFeeds(\''."$user".'\');">';
 
heres the file displayRegularFeeds executes

Code: Select all

 
    include('mysql.php');
    include('feeds.php');
    
    feeds('regular', 'home');
 
Please help!

Re: AJAX form submit

Posted: Mon Oct 19, 2009 12:49 pm
by nshiell
What?
Stuff works, doesn't work I'm confused?
Is any of the page being overwritten?


p.s. why don't you submit the form using jQuery rather that your own functions.

Re: AJAX form submit

Posted: Mon Oct 19, 2009 1:10 pm
by gth759k
How do you do it with jquery?

Re: AJAX form submit

Posted: Mon Oct 19, 2009 3:28 pm
by Mirge
gth759k wrote:How do you do it with jquery?
By reading the jQuery docs available at http://jquery.com/.

Re: AJAX form submit

Posted: Mon Oct 19, 2009 5:07 pm
by el_gato
Your problem was on browser DOM element update. After ajax request call, you must update the DOM elements so the jquery script works. The problem was not on the jquery but on your script that's call ajax request. you must call any function to update the DOM elements. I never used native ajax request like yours (XMLHTTPRequest). i always use prototye to for ajax operation, in prototype this solved by call Ajax.updater function.

Kind Regards
- Lorensius W. L. T
- http://www.londatiga.net -

Re: AJAX form submit

Posted: Thu Oct 22, 2009 2:13 pm
by gth759k
Since my problem was just that the jQuery no longer worked after the div was updated, I replaced what the jQuery was doing with regular old javascript and now everything works fine.