How To Call Javascript In Ajax Response? IE: Close a form div upon success

I have a form that when you submit it, it sends the data for validation to another php script via ajax. Validation errors are echo'd back in a div in my form. A success message also is returned if validation passes.

The problem is that the form is still displayed after submit and successful validation. I want to hid the div after success.

So, I wrote this simple CSS method which works fine when called from the page the form is displayed on.

The problem is that I cannot seem to call the hide script via returned code. I can return html like

echo "<p>Thanks, your form passed validation and is being sent</p>";

So I assumed I could simply echo another line after that

echo "window.onload=displayDiv()";
inside script tags (which I cannot get to display here)...

and that it would hide the form div.

It does not work. I am assuming that the problem is that the javascript is being returned incorrectly and not being interpreted by the browser...

How can I invoke my 'hide' script on the page via returned data from my validation script? I can echo back text but the script call is ineffective.

Thanks!

This is the script on the page with the form...

I can call it to show/hide with something like onclick="displayDiv()" while on the form but I don't want the user to invoke this... it has be called as the result of a successful validation when I write the results back to the div...

<script language="javascript" type="text/javascript">
    function displayDiv()
    {
        var divstyle = new String();
        divstyle = document.getElementById("myForm").style.display;
        if(divstyle.toLowerCase()=="block" || divstyle == "")
        {
            document.getElementById("myForm").style.display = "none";
        }
        else
        {
            document.getElementById("myForm").style.display = "block";
        }
    }
    </script>

PS: I am using the mootools.js library for the form validation if this matters for the syntax..

The AJAX call is:

window.addEvent('domready', function(){
$('myForm').addEvent('submit', function(e) {
new Event(e).stop();
var log = $('log_res').empty().addClass('ajax-loading');
this.send({
update: log,
onComplete: function() {
log.removeClass('ajax-loading');
}
});
});
});

Div ID log is where the ajax call back text (validation errors and success message) and loading graphic appear

Answers:

Answer

This is a duplicate of How to make JS execute in HTML response received using Ajax? where I provided the chosen solution.

var response = "html\<script type=\"text/javascript\">alert(\"foo\");<\/script>html";
 var reScript = /\<script.*?>(.*)<\/script>/mg;
 response = response.replace(reScript, function(m,m1) {
     eval(m1); //will run alert("foo");
     return "";
 });
alert(response); // will alert "htmlhtml"
Answer

Your AJAX call should have a "success" callback. It looks like you can simply call displayDiv() in that callback.

Also note that the var divstyle = new String(); line is unnecessary. Strings are immutable in JavaScript, so you are creating an empty string object, which remains unreferenced in the following line. Simply declare the variable when you assign it from document.getElementById():

var divstyle = document.getElementById("myForm").style.display;
Answer
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

//Since your making php do the validation, there would be two cases,
//the first case is that the php script is not echoing any thing on success, and 
//the other case is that its echoing the error massages which will be assignedxmhttp.responseText
//so we need to check that xmlhttp.resposeText has been asigned a value.

   if(xmlhttp.resposeText){
       document.getElementById(displayContainers_id).innerHTML=xmlhttp.responseText;
   }
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.