Login

09-07-2010, 05:01 PM

[eluser]blorriman[/eluser]
OK, this doesn't make any sense to me, and I've been staring at it too long so hopefully someone else will spot the problem.

I'm trying to replace content in a div with another page - but when I do, javascript no longer works in the new page.

Here is the simple test page :

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

&lt;html &gt;

    &lt;head&gt;

        &lt;meta http-equiv="content-type" content="text/html;charset=utf-8" /&gt;

        [removed][removed]

        [removed][removed]

        &lt;title&gt;re-start&lt;/title&gt;

    &lt;/head&gt;

    &lt;body&gt;

        [removed]

            $(function(){

                $('#test').show();

                $('#test1').show();

                $('#test2').hide();

                $("#jQuery a").click(function(event) {

                    event.preventDefault();

                    $("#test3")

                    .load( $(this).attr("href") + " #jQuery-content");

                })

            });

        [removed]

        <div id="test1" style="display: none">

            this is originally hidden

        </div>

        <div id="test2">

            this is originally displayed

        </div>

        <div id="test3">

            jQuery-content

        </div>

        <div id="jQuery">

            <a href="/test/test_js">jQuery test</a>

        </div>

    &lt;/body&gt;

&lt;/html&gt;

and here is the page being loaded :

Code:
[removed]

    $(function(){

        $('#test4').show();

        $('#test5').hide();

    });

[removed]

<div id="jQuery-content">

    <h2>test-js</h2>

    <div id="test4" style="display: none">

        javascript IS working

    </div>

    <div id="test5">

        javascript is NOT working

    </div>

</div>

But when I test this the test-js page replaces the test3 div no problem, but the test5 div does not get hidden - which tells me javascript is NOT working.

Any suggestions would be greatly appreciated.

09-08-2010, 02:51 AM

[eluser]Georgi Budinov[/eluser]
Which version of JQuery are you using, because the code is removed ... I remember I had struggled with the exact same problem with an older version of JQuery -> it didn't eval the scripts in the loaded pages. At that time I had to mess with the jquery code because I needed the exact version that was buggy ... for my pity I don't remember which one was it and was it official release at all.

Edit: Does the test4 get shown ?

09-08-2010, 08:28 AM

[eluser]blorriman[/eluser]
I'm using the Google link: http://ajax.googleapis.com/ajax/libs/jqu...ery.min.js

And test4 does not show - that's how I know javascript is not working.

09-08-2010, 08:55 AM

[eluser]Georgi Budinov[/eluser]
So it is the latest ... I will have to try that out, but in the meantime you can try setting the callback on the load method to show / hide the divs - something like this:

Code:
$("#test3").load( $(this).attr("href") + " #jQuery-content", function(){

   $('#test4').show();

   $('#test5').hide();

});

09-08-2010, 09:06 AM

[eluser]Georgi Budinov[/eluser]
OK I found your problem. That is a feature from the load function that I didn't know until now ... When they got it ? ....
$(this).attr("href") + " #jQuery-content" is essencially somthing like '/index.php #jQuery-content' which means that the load method will parse the output and get just that part of the output removing anything else including your script tag !

http://api.jquery.com/load/

Quote:We could modify the example above to use only part of the document that is fetched:

$('#result').load('ajax/test.html #container');

When this method executes, it retrieves the content of ajax/test.html, but then jQuery parses the returned document to find the element with an ID of container. This element, along with its contents, is inserted into the element with an ID of result

09-08-2010, 09:17 AM

[eluser]blorriman[/eluser]
Thank you Georgi . . . it was adding the show/hide to the .load that did it !

Code:
.load( $(this).attr("href") + " #jQuery-content", function() {

                $('#test4').show();

                $('#test5').hide();

Thanks for your help.

Cheers, Bob