jQuery not working in my ajax enable page

Question

I use the following ajax code to load html page:

var AJAX = {
            request:false,
            createHttpRequest:function()
            {
                //initiate HttpRequest for AJAX calling
                if (!AJAX.request && typeof XMLHttpRequest!='undefined') 
                {
                    try 
                    {
                        AJAX.request = new XMLHttpRequest();
                    } 
                    catch (e) 
                    {
                        AJAX.request=false;
                        alert("This Browser Does not Support AJAX");
                    }
                }
                if (!AJAX.request && window.createRequest) 
                {
                    try 
                    {
                        AJAX.request = window.createRequest();
                    } 
                    catch (e) 
                    {
                        AJAX.request=false;
                        alert("This Browser Does not Support AJAX");
                    }
                }

              },
              call:function(method,url,asyn)
              {
                  AJAX.request.open(method,url,asyn);
              },
              send:function(value)
              {
                  AJAX.request.send(value);
              }
          }

var serverTable;
var popup;
var NAVIGATION = {
                    MENU:function(filename,table,ftpFlag,ftppath,svrpath)
                    {
                        AJAX.createHttpRequest();                   
                        AJAX.call("GET",filename,true);                 
                        AJAX.request.onreadystatechange=function() 
                            {        
                                if ( AJAX.request.readyState==4)
                                    {
                                        document.getElementById('contentMain').innerHTML=AJAX.request.responseText;             
                                        if(ftpFlag==true)
                                        {                         
                                            document.getElementById("conStatus").src="images/spinner.gif";                        
                                            $('#serverFileTree').fileTree(
                                            { 
                                                root: svrpath, script: 'serverfileTree.php'
                                            }, 
                                            function(file) 
                                            { 
                                                alert(file);
                                            });
                                            $('#ftpFileTree').fileTree(
                                            { 
                                                root: ftppath, script: 'ftpfileTree.php'
                                            }, 
                                            function(file) 
                                            { 
                                                alert(file);                            
                                            }); 
                                            popup= $("#destname").dialog(
                                            {
                                                resizable: false,
                                                height:180,
                                                modal: true,
                                                title: "Destination File Name",
                                                draggable: true,
                                                autoOpen: false,
                                                hide:true,
                                                buttons: 
                                                {
                                                    Ok: function() 
                                                    { 

                                                        if(document.getElementById('destfiletext').value.match(" "))
                                                        {
                                                            alert("There should be no space in name");  
                                                        }
                                                        else
                                                        {
                                                            destDirSelected=destDirSelected+document.getElementById('destfiletext').value;
                                                            serverTable.fnAddData( [destDirSelected,selected]);

                                                            AJAX.createHttpRequest();
                                                            AJAX.call("GET","prepareFtpReplace.php?src="+selected+"&dest="+destDirSelected,true);
                                                            AJAX.request.onreadystatechange=function() 
                                                            {
                                                                if ( AJAX.request.readyState==4) 
                                                                {

                                                                }
                                                            }

                                                        AJAX.send(null);

                                                        $(this).dialog('close');
                                                        }
                                                    },
                                                    Cancel: function() 
                                                    {
                                                        $(this).dialog('close');
                                                    }
                                                }
                                            });



                                        }
                                        if(table==true)
                                        {
                                            serverTable = $("#serverList").dataTable( 
                                            {
                                                                    "bPaginate": false,
                                                                    "bFilter": false,
                                                                    "bSort": false,
                                                                    "bInfo": false,
                                            });                         

                                        }

                                    }
                            }

                    AJAX.send(null);
                    }

                }

with this code the html page draw in "contentMain" div.

here is my main html:

<body bgcolor="#828282">

<table width="967px" height="400px" align=center  cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="3"  height="80px" class="ui-widget-shadow" align="center">
            <span   style="font-family:verdana;font-size: 26px;font-weight: bold; text-align: center;color:#fff" ></span>
            <span   style="text-align: right; float:right;" ><img height="55px" width="55px" src="images/m1.jpg" /></span>
        </td>
    </tr>
    <tr>
        <td colspan="3"  height="25px"  align="center">
            <span style="float:right;">Welcome Mr. <?php echo $u; ?>|&nbsp;&nbsp;<a href="logout.php">logout</a></span>
        </td>
    </tr>
    <tr>
        <td colspan="3"  height="2px" bgcolor="#828282" align="center">

        </td>
    </tr>
    <tr>
        <td width="180px" valign="top" align="center" height="100%" >
            <?php include("tiles/leftMenu.php");?>
        </td>
        <td width="5" bgcolor="#828282">
        </td>
        <td align="center"  valign="top">
        <div id="contentMain"></div>
        </td>
    </tr>
</table>

</body>

Problem is when i load a html page in the "contentMain" div then the jquery which are contain in that loaded html page is not working. How can i solve this problem? Thanks in advance.

ummm why aren't you using **ANY** of jQuery's ajax methods, if you are using jQuery? — Naftali, May 05 '11 at 20:54

score 1 · Answer 1 · edited May 23 '17 at 10:24

1

This has been answered many times before. Javascript loaded via ajax is not evaluated after load. Javascript does not work upon AJAX call

edited May 23 '17 at 10:24

Community

1
1

answered May 05 '11 at 20:58

Brad

5,428
1
33
56

score 1 · Accepted Answer · answered Jun 03 '11 at 08:54

I am using the following code instead of ajax code:

var NAVIGATION = function() {
    return {
        MENU: function(page, success) {
            $('#contentMain').load(page, function() {
                return true;
            });
        }
    }
}();

Its works very well.

score 0 · Answer 3 · answered May 05 '11 at 20:57

0

Utilize some jQuery methods.

$.ajax(), $.get(), $.post()

All will help make your code more readable and probably remove those errors you are having

answered May 05 '11 at 20:57

Naftali

144,921
39
244
303

2

i have the same argument here as @kingjiv – Naftali May 05 '11 at 21:05

score 0 · Answer 4 · edited May 23 '17 at 10:24

0

Change it to use jquery's ajax and the javascript will be available.

If you're rolling your own, the javascript needs to be run through eval to be interpreted by the browser. Just sticking it into the innerHTML of a div will not make it useable on the page.

EDIT: Calling a JavaScript function returned from an Ajax response See the accepted solution. Using jquery for your ajax will solve this for you.

edited May 23 '17 at 10:24

Community

1
1

answered May 05 '11 at 20:58

James Montagne

77,516
14
110
130

1

-1? ... it's a valid answer. You are clearly using jquery anyway, why not make your life easier? And if you don't want to use it then you need eval. I fail to see why this is voted down. – James Montagne May 05 '11 at 21:01

jQuery not working in my ajax enable page

4 Answers4