views:

1314

answers:

4

JQuery Return Links Not working,

Dear all I have Used JQuery and basic ajax feature. My JQuery Returns the Links from Links_ajax.php

I giving the code samples.

GetCustomerData.php has

     <html>  
       <script type="text/javascript">

       <script src="ajax.js" type="text/javascript"> 

          $(function() {
             .....

             $.ajax({
  type:'POST',
  url: 'Links_ajax.php',
  data:'category='+category  ,
  success: function(data){
   $("#response").html(data);
  }
      });                

             } 
            ......


          }



        ...


    <! Links return here  
     <div id="response">
     </div> 

     </html>


      <?
        echo "Some Code";


      ?>

  ....
   My Links_ajax.php has the following code
      ....
       echo '<a href="getCustomerData.php?id=10" onclick="requestCustomerInfo();return false;">show me </a>'; 
       echo '<a href="getCustomerData.php?id=11" onclick="requestCustomerInfo();return false;">show me </a>'; 

  .... 

   Now I come to the Main Page getCustomerData.php, 
   I have used the ajax feature those return link from Links_ajax.php

 .....
    So, My ajax.js has following ajax scripts


       var url = "GetCustomerData.php?id="; // The server-side script
        function handleHttpResponse() { 
 if (http.readyState == 4) {
    if(http.status==200) {
     var results=http.responseText;
          document.getElementById('divCustomerInfo').innerHTML = results;
    }
  }
 }

            function requestCustomerInfo(event) {

             if(event &&event.preventDefault) event.preventDefault();
              else if (window.event && window.event.returnValue)
                      window.eventReturnValue = false;
                    var sId =10;
                    http.open("GET", url + escape(sId), true);
  http.onreadystatechange = handleHttpResponse;
  http.send(null);

             }


           function getHTTPObject() {
           var xmlhttp;

                 if(window.XMLHttpRequest){
                 xmlhttp = new XMLHttpRequest();
                 }
                  else if (window.ActiveXObject){
                  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                   if (!xmlhttp){
                     xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
                   }

                  }
           return xmlhttp;
          }

    var http = getHTTPObject(); // We create the HTTP Object

......

NoW i come to the problem , When I execute the GetCustomerdata.php I able to get the all links from ajax.JQuery And Upon click that I need Basic ajax feature since Loading same .But I am unable to View it eventhough I done . Is there any wrong in mycode,Or i have to use any other feature.Please help me..

A: 

For starters, don't nest script tags. Script tags with a source should be closed immediately and should be under the or and not in another .

Josh
A: 

First try the following:

success: function(data){

//$("#response").html(data);

alert(data); }

Thus you will know if it is really returning the data or not. If this is working then you can replace $("#response").html(data) with

document.getElementById('response').innerHTML = data;

This should work.

Alec Smart
A: 

I highly recommend either using FireFox + FireBug to test this, or some other browser through an HTTP proxy that will log your traffic. FireBug will show you all of the Ajax requests and responses from your page, and should help you to determine whether data is coming back, and what.

Sixten Otto
A: 

First i wonder why you write a custom function HTTPrequest while you already have jquery object, infact you already use $.ajax at the top but then create getHTTPObject() later.

The problem is the javascript function requestCustomerInfo() never delegate to handle the link at the ajax response data, you need to delegate the function as a callback of the ajax request

$.ajax({
       type:'POST',
       url: 'Links_ajax.php',
       dataType: 'html',
       data:'category='+category,
       success: function(data){
           $("#response").html(data);
        // here add the link click handler
        $("#response a").click(function(){
       // make http get request & custom handler
       $.get('GetCustomerData.php?id=10',function(result){
        $('#divCustomerInfo').html(result);
       }); return false;
      });
       }
});
Ariel