multiple <div> update using ajax.

[sayedsohail]

Hi everyone,

 

I got a small problem at the moment, i got two form fields:

 

1. <INPUT type='text' onkeyup='sndReqCity(this.value);'>

and

2. <INPUT type='text' onkeyup='sndReqMaterial(this.value);'>

 

I created two separated functions to call ajax and its working fine, but the problem is i am repeating the same function twice.

 

Is there anyway i could just create one generic function, which could handle all requests with different phpfiles and get/post variables and updated the relevant div tags.

 

Please help.

 

thanks,

 

[tomfmason]

Sure you can do that. I have never really tried it but I don't see any reason as to why you can't. Here is how I would do it.

 

function createRequestObject() {
    if (window.XMLHttpRequest) { // Mozilla, Safari, Opera...
        var xmlhttp = new XMLHttpRequest();
        //for actual xml responses
	//if (xmlhttp.overrideMimeType)
		//xmlhttp.overrideMimeType('text/xml');
    }
else if (window.ActiveXObject) { // IE
        try {
            var xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }

    if (!xmlhttp) {
        alert('Giving up  Cannot create an XMLHTTP instance');
        return false;
    }
return xmlhttp;
}

function ajaxUpdate(method, url, vars, div) {
       switch(method) {
              case "post":
                   var http = createRequestObject();
                   http.open('POST', url);
           http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
           http.send(vars);
           http.onreadystatechange = function() {
                           if (http.readyState == 4 && http.status = 200) {
                               document.getElementById(div).innerHTML = http.responseText;
                           }
                   }
                   
                   break;
              case "get":
                   var http = createRequestObject();
                   http.open('Get', url + '?' + vars, true);
                   http.send(null);
                   http.onreadystatechange = function() {
                           if (http.readyState == 4 && http.status = 200) {
                               document.getElementById(div).innerHTML = http.responseText;
                           }        
                   }
                   break;
       }
}

 

That is a simplified version of how I would do it. You may want to through and put in some error checking and stuff like that but it should give you a good start.

 

Good Luck,

Tom

[sayedsohail]

Thanks a million, sorry i am new to ajax,

1. how do i refer to different php files and different vars submitted via post or get using this function.

 

2. since i got two inputs in my form and both are refering to different data tables, thus it creatig bit of mess when I tried to instantiate var http = createRequestObject() twice, one after the other as my form got two inputs onkeyup refering to the same function.

 

Please help.

[tomfmason]

I fixed a few things in the first post. I posted it without testing it. I also removed the var before http. That was most likely the source of your problems. Here is the revised function.

 

function ajaxUpdate(method, url, vars, div) {
       switch(method) {
              case "post":
                   http = createRequestObject();
                   http.open('POST', url);
               http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
               http.send(vars);
               http.onreadystatechange = function() {
                           if (http.readyState == 4 && http.status == 200) {
                               document.getElementById(div).innerHTML = http.responseText;
                           }
                   }
                   
                   break;
              case "get":
                   http = createRequestObject();
                   http.open('Get', url + '?' + vars, true);
                   http.send(null);
                   http.onreadystatechange = function() {
                           if (http.readyState == 4 && http.status == 200) {
                               document.getElementById(div).innerHTML = http.responseText;
                           }        
                   }
                   break;
       }
}

 

You can use it like this

<a onclick="ajaxUpdate('get', 'your_phpfile.php', 'some_variable=something&another_one=somethingelse', 'some_div_id');">Click me</a>

 

*note

if you want it to validate you should use & instead of &

[sayedsohail]

I just got a small doubt about post issue, when i call this function for method = post

 

do i need to send vars = a+a+b+b, this is more like a get method, or how do i link all the form fields = vars, please explain.

 

since we use  http.send(vars);. please help and explain.

 

fm=  addslashes($_POST['f_manufact']);

 

 

ajaxUpdate(method, url, vars, div){
       switch(method) {

case "post":
                   http = createRequestObject();
                   http.open('POST', url);
               http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
               http.send(vars);

 

 

 

2) &amp instead of &, how do i validate.

[tomfmason]

ok this is the last time I am going to post in the thread. I wrote this as a simple example and only meant for it to be a place for you to start. I am not going to write the whole thing for you. Here is the php file that I used to test it. Maybe this will give you a better understanding on how to use it.

 

<?php
switch ($_SERVER['REQUEST_METHOD']) {
case "GET" :
	echo nl2br(print_r($_GET, true));
	break;
case "POST":
	echo nl2br(print_r($_POST, true));
	break;
}
?>

 

That will echo all the keys and values in the post or get array depending on the method used to call it.

 

I just got a small doubt about post issue, when i call this function for method = post

 

Don't doubt it without trying it. It works fine. You have to send variables to the page in a url encoded query string.. ie some_variable=something&anotherone=somethingelse.. Maybe this will better explain it for you http://www.ajaxfreaks.com/tutorials/1/2.php.

 

2) &amp instead of &, how do i validate.

 

I meant your html.. If you want your html to validate use & instead of &.

[448191]

2) &amp instead of &, how do i validate.

 

HTML Entities