| 
ATG Dynamo

Calling ATG Form Handler using JQuery.

View: New views
3 Messages — Rating Filter:   Alert me  

Calling ATG Form Handler using JQuery.

by RJ. :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

I have a unique problem in which i have to call a ATG GenericFormHandler, I am currently calling a servlet using jquery but I have to call Form handler using Jquery(ajax ). The problem with form handler is it is called by nucleus. But I have to pass request to form handler only. The code is as below for submit using servlet it has to be modified to use formhandler:-  

<%@ taglib uri="http://www.atg.com/taglibs/daf/dspjspTaglib1_0" prefix="dsp" %>
<%@ page import="javax.naming.*"%>
<%@ page import="javax.sql.*"%>
<dsp:page>
<dsp:importbean bean="/com/epson/search/PredictiveSearchFormHandler"/>
<dsp:importbean bean="/atg/dynamo/Configuration"/>

<html>
  <head>
    <script type="text/javascript" src="jquery-1.2.1.min.js"></script>
    <script type="text/javascript">
var isIE;
var completeTable;
var completeField;
var autorow;
var req;


function getElementY(element){
        var targetTop = 0;
        if (element.offsetParent) {
                while (element.offsetParent) {
                        targetTop += element.offsetTop;
            element = element.offsetParent;
                }
        } else if (element.y) {
                targetTop += element.y;
    }
        return targetTop;
}
        function init() {
    completeField = document.getElementById("search");
    var menu = document.getElementById("auto-row");
    autorow = document.getElementById("menu-popup");
    autorow.style.top = getElementY(menu) + "px";
    completeTable = document.getElementById("completeTable");
    completeTable.setAttribute("bordercolor", "white");
        initRequest();
}
        function initRequest() {
       
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        isIE = true;
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}
      // Your code goes here
      function makeCall(a) {
                         clearTable() ;
                         if(a.value.length==3 ||a.value.length>3 ) {
// alert(a.value);
                var urlstr="predictiveSearchServlet";
                var dataString = 'prodName='+ a.value;  
                               
                $.ajax({
                  type: "POST",
               
                  data: dataString,  
                  url: urlstr,
                  success: function(msg){
// alert( "Data Retrieved: " + msg );
                        var myJSONObject = msg;
// alert(msg);
                        var obj = eval(myJSONObject);
                for( i=1;i<obj.length;i++) {
                        appendImage(obj[0][i],obj[1][i]);
                }

         
                  },
                  error: function(msg){
                        alert( "Error while Querying: "+msg);
                  }
                 
                });
               
                         }

        }


function appendImage(productName,thumbnail) {
    var row;
    var nameCell;
        var imgtdcell;
    if (isIE) {
        row = completeTable.insertRow(completeTable.rows.length);
        nameCell = row.insertCell(0);
    } else {
        row = document.createElement("tr");
        nameCell = document.createElement("td");
                imgtdcell = document.createElement("td");
                row.appendChild(imgtdcell);
        row.appendChild(nameCell);
        completeTable.appendChild(row);
    }
    row.className = "popupRow";
    nameCell.setAttribute("bgcolor", "#FFFAFA");
          var imgElement = document.createElement("img");
      imgElement.setAttribute("src", "http://www.epson.co.uk/news_events/homepage_images/balloon.jpg");
    var linkElement = document.createElement("a");
    linkElement.className = "popupItem";
    linkElement.setAttribute("href", "autocomplete?action=lookup&id=" + productName);
    linkElement.appendChild(document.createTextNode(productName));
    nameCell.appendChild(linkElement);
        imgtdcell.appendChild(imgElement);
}
function clearTable() {
    if (completeTable) {
      completeTable.setAttribute("bordercolor", "white");
      completeTable.setAttribute("border", "0");
      completeTable.style.visible = false;
      for (loop = completeTable.childNodes.length -1; loop >= 0 ; loop--) {
        completeTable.removeChild(completeTable.childNodes[loop]);
      }
    }
}
    </script>
  </head>
  <body onload="init()">
 
  jQuery
 
 
<dsp:form formid ="predictivesearchform" name="searchform" >
  <table border="0" cellpadding="5" cellspacing="0">
    <tr>
     <td>Product Name:</td>
       <td>
           <dsp:input    type="text"
                autocomplete="off"
                  id="search"
                                name="search"
             onkeyup="makeCall(document.searchform.search);" bean="PredictiveSearchFormHandler.search"/>  </td>
  <td align="left">   <dsp:input type="submit" value="Search" bean="PredictiveSearchFormHandler.submit"/>    </td>


      <tr><td id="auto-row" colspan="2"> <td/></tr>
   </table>


</dsp:form>

   <div style="position: absolute; top:170px;left:140px" id="menu-popup">
 <table id="completeTable" border="1" bordercolor="black" cellpadding="0" cellspacing="0" />
 </div>
  </body>
  </html>
  <!--insert into EP_PRELOADED_PRDSRCH_CATALOG values('prod3','Epson DLQ Dot Matrix','en_UK','http://www.epson.co.uk/epsondlqdotmatrix.jpg')-->
</dsp:page>

Re: Calling ATG Form Handler using JQuery.

by RJ. :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

I found a code in atg knowledge base in which it has been demonstrated to use dojo framework to call a formhandler. There is a specific url thats generated when a form is submited not through ajax. this url can be studied and used to call a formhandler using jquery. I am successful in doing that by studying it.


Re: Calling ATG Form Handler using JQuery.

by RJ. :: Rate this Message:

Reply to Author | View Threaded | Show Only this Message

sample code for Calling formhandler using jquery

<%@ taglib uri="/dspTaglib" prefix="dsp" %>
<%@ page import="javax.naming.*"%>
<%@ page import="javax.sql.*"%>
<dsp:page>
<dsp:importbean bean="/com/epson/search/PredictiveSearchFormHandler"/>
<dsp:importbean bean="/atg/dynamo/Configuration"/>

<html>
  <head>
    <script type="text/javascript" src="js/jquery-1.2.1.min.js"></script>
    <script type="text/javascript">
        init();
var isIE;
var completeTable;
var completeField;
var autorow;
var req;


function getElementY(element){
        var targetTop = 0;
        if (element.offsetParent) {
                while (element.offsetParent) {
                        targetTop += element.offsetTop;
            element = element.offsetParent;
                }
        } else if (element.y) {
                targetTop += element.y;
    }
        return targetTop;
}
        function init() {
    completeField = document.getElementById("input");
    var menu = document.getElementById("auto-row");
    autorow = document.getElementById("menu-popup");
    autorow.style.top = getElementY(menu) + "px";
    completeTable = document.getElementById("completeTable");
    completeTable.setAttribute("bordercolor", "white");
        initRequest();
}
        function initRequest() {
       
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        isIE = true;
        return new ActiveXObject("Microsoft.XMLHTTP");
    }
}
      // Your code goes here
      function makeCall(a) {
                         clearTable() ;
                         if(a.value.length==3 ||a.value.length>3 ) {
// alert(a.value);
                var urlstr="predictiveSearch.jsp";

                var dataString="_dyncharset=ISO-8859-1&_dynSessConf="+document.searchform._dynSessConf.value+"&input="+document.searchform.input.value+"&_D%3Ainput=+&search=Search&_D%3Asearch=+&/com/epson/search/PredictiveSearchFormHandler.successURL=predictiveSearch.jsp&_D%3A/com/epson/search/PredictiveSearchFormHandler.successURL=+&/com/epson/search/PredictiveSearchFormHandler.errorURL=predictiveSearch.jsp&_D%3A/com/epson/search/PredictiveSearchFormHandler.errorURL=+&/com/epson/search/PredictiveSearchFormHandler.ajaxSuccessURL=json/results.jsp&_D%3A/com/epson/search/PredictiveSearchFormHandler.ajaxSuccessURL=+&/com/epson/search/PredictiveSearchFormHandler.ajaxErrorURL=json/error.jsp&_D%3A/com/epson/search/PredictiveSearchFormHandler.ajaxErrorURL=+&_DARGS=/epson/predictiveSearch.jsp.predictivesearchform";

                $.ajax({
                  type: "GET",
                  data: dataString,
                  url: urlstr,
                  beforeSend: function(xhr) {
                    xhr.setRequestHeader( "ACCEPT", "application/json" );
                  },
                  success: function(msg){
                // alert( "Data Retrieved: " + msg );
                        var myJSONObject = msg;
                        alert(msg);
                        var obj = eval(myJSONObject);
                        for( i=0;i<obj.length;i++) {
                                var productlinks = obj[i]['links'];
                                //need to change hardcoded url
                                appendImage(obj[i]['title'],"http://www.epson.com",obj[i]['thumbnail'],productlinks[0]['title'],productlinks[0]['url'],productlinks[1]['title'],productlinks[1]['url']);
                        }
         
                  },
                  error: function(msg){
                        alert( "Error while Querying: "+msg);
                  }
                 
                });
               
                         }

        }


function appendImage(productName,producturl,thumbnail,acctitle,accurl,supporttitle,supporturl) {
    var row;
    var nameCell;
        var imgtdcell;
        var row1;
        var row2;
    if (isIE) {
        row = completeTable.insertRow(completeTable.rows.length);
        nameCell = row.insertCell(0);
    } else {
        row = document.createElement("tr");
                row1 = document.createElement("tr");
                row2 = document.createElement("tr");
        nameCell = document.createElement("td");
                imgtdcell = document.createElement("td");
                row.appendChild(imgtdcell);
        row.appendChild(nameCell);
        completeTable.appendChild(row);
    }
    row.className = "popupRow";
        row1.className= "popupRow";
        row2.className= "popupRow";
    nameCell.setAttribute("bgcolor", "#FFFAFA");
          var imgElement = document.createElement("img");
      imgElement.setAttribute("src", thumbnail);
    var linkElement = document.createElement("a");
    linkElement.className = "popupItem";
    linkElement.setAttribute("href",producturl );
    linkElement.appendChild(document.createTextNode(productName));
    nameCell.appendChild(linkElement);
        imgtdcell.appendChild(imgElement);

        var buytdcell = document.createElement("td");
        var buylinkelement = document.createElement("a");
    buylinkelement.className = "popupItem";
    buylinkelement.setAttribute("href",accurl );
    buylinkelement.appendChild(document.createTextNode(acctitle));
        buytdcell.appendChild(buylinkelement);

        var supporttdcell = document.createElement("td");
        var supportlinkelement = document.createElement("a");
        supportlinkelement.className = "popupItem";
    supportlinkelement.setAttribute("href",supporturl );
    supportlinkelement.appendChild(document.createTextNode(supporttitle));
        supporttdcell.appendChild(supportlinkelement);
       
        var dummycell = document.createElement("td");
        row1.appendChild(dummycell);
        row1.appendChild(buytdcell);

        var dummycell1 = document.createElement("td");
        row2.appendChild(dummycell1);
        row2.appendChild(supporttdcell );
       
       
       

        completeTable.appendChild(row1);
        completeTable.appendChild(row2);
}
function clearTable() {
    if (completeTable) {
      completeTable.setAttribute("bordercolor", "white");
      completeTable.setAttribute("border", "0");
      completeTable.style.visible = false;
      for (loop = completeTable.childNodes.length -1; loop >= 0 ; loop--) {
        completeTable.removeChild(completeTable.childNodes[loop]);
      }
    }
}
    </script>
  </head>
  <body onload="init()">
 
  jQuery
 
 
<dsp:form formid ="predictivesearchform" name="searchform" >
  <table border="0" cellpadding="5" cellspacing="0">
    <tr>
     <td>Product Name:</td>
       <td>
           <dsp:input    type="text"
                autocomplete="off"
                  id="input"
                                name="input"
             onkeyup="makeCall(document.searchform.input);" bean="PredictiveSearchFormHandler.input"/>  </td>
  <td align="left">   <dsp:input type="submit" value="Search" bean="PredictiveSearchFormHandler.search" name="search"/>    </td>
                        <dsp:input type="hidden" bean="PredictiveSearchFormHandler.successURL" value="predictiveSearch.jsp" />
                        <dsp:input type="hidden" bean="PredictiveSearchFormHandler.errorURL" value="predictiveSearch.jsp" />

                        <dsp:input type="hidden" bean="PredictiveSearchFormHandler.ajaxSuccessURL" value="json/results.jsp" />
                        <dsp:input type="hidden" bean="PredictiveSearchFormHandler.ajaxErrorURL" value="json/error.jsp" />

      <tr><td id="auto-row" colspan="2"> <td/></tr>
   </table>


</dsp:form>

   <div style="position: absolute; top:170px;left:140px" id="menu-popup">
 <table id="completeTable" border="1" bordercolor="black" cellpadding="0" cellspacing="0" />
 </div>
  </body>
  </html>

</dsp:page>
Free embeddable forum powered by Nabble Forum Help