SartajPHP ( PHP Framework )


AJAX Examples

AJAX Examples

Use of Form Control method setAJAX

 Form submit via AJAX. for simple post submission remove funsetAJAX attribute:-

<form id="form2" runat="server" class="form-horizontal" funsetAJAX=""  action="##{ getAppURL('customer') }#">
    <label for="txtaddress">Address</label>
 <input id="txtaddress" runat="server" type="text" dfield="txtaddress"  funsetForm="form2" funsetMsgName="Address" funsetRequired="" funsetMinLen="4" funsetMaxLen="8" />
<input type="submit" value="Submit" />
</form>

Use of Control method submitAJAX

Submit Control value via AJAX on JS Event keyup use of funsubmitAJAX="keyup" attribute. It will be post txtname value automatically to server. 

By default post back to current application, so change url use second parameter:- 

funsubmitAJAX="keyup,|https://www.sartajphp.com/index-txtname_keyup.html,|txtstate"

Third parameter for post extra values. It is comma separated list of html tag id like above code post txtstate control 

<span id="spn2"></span>
<input id="txtstate" runat="server" type="text" dfield="txtstate" />
<input id="txtname" runat="server" type="text" dfield="cust_address" funsubmitAJAX="keyup"  funsetForm="form1" funsetMsgName="Name" funsetRequired="" funsetMinLen="4" funsetMaxLen="8" />

Server Side App code to handle Event:-

 public function page_event_txtname_keyup($evtp) {
        $this->JSServer->addJSONHTMLBlock("spn2","Server is reading:-  " . $this->home_front1->txtname->value);
        $this->JSServer->addJSONHTMLBlock("txtstate","Ontario");
    }

Fill Select Box from Server Via AJAX

 

<select id="sltstate" runat="server" funsubmitAJAX="change" funsetOptions="first,2nd,3rd"></select>
<select id="sltcity" runat="server" funsetOptions="first1,first2"></select>

Server Side App Code to handle Event:-

public function page_event_sltstate_change($evtp){
        $lst = "first1,first2";
        switch($this->home_front1->getComponent('sltstate')->value){
            case "2nd":{
                $lst = "2nd1,2nd2";
                break;
            }
            case "3rd":{
                $lst = "3rd1,3rd2";
                break;
            }
        } 
        $this->home_front1->getComponent('sltcity')->setOptions($lst);
        $this->JSServer->addJSONCompChildren($this->home_front1->getComponent('sltcity'),"sltcity");
    }

Use setAJAX method of Pagination Control:-

<div id="pagi1" lrunat="server" path="libpath/comp/data/Pagination.php" funsetFieldNames="txtcolname" funsetHeaderNames="Colname" funsetColWidths="100%" dtable="car_color" funsetAJAX=""  >
             <div class="col" runas="holder" data-comp="pagi1" dfield="txtcolname"></div>
<span>##{ $this->tempobj->pagi1->getRow('id') }#</span>
</div>
    <div id="pagebar">#{ $this->tempobj->pagi1->getPageBar() }#</div>

Use of JS Server Methods:-

       // send Control object via AJAX and display html output inside showall id of tag
        $showall = $this->showallTemp->getComponent('showall');
        $this->JSServer->addJSONComp($showall, 'showall');

       //send html code inside pagebar tag
        $this->JSServer->addJSONHTMLBlock( 'pagebar', $showall->getPageBar());

       // send temp file object via AJAX and display html output inside listformholder div tag
        $this->JSServer->addJSONTemp($this->showallTemp, 'listFormHolder');

       // send JS Code via AJAX
         $this->JSServer->addJSONJSBlock('runanierr("success");');
       //custom type declaration for JS code
         $this->JSServer->addJSONBlock('jsp','proces','$( "#showall_dlg" ).dialog( "close" );');