Jquery script don't work on loaded page

Question

Hello. In my web-application i have a div which loads another page: $('#main').load('pages/main.php');

main.php consists jquery validation script. This script is working if i go directly to the main php, but don't work if i will use this page on my index page where main.php loaded.

How can i solve this problem?

Thanks in advance.

Answer 1

.load() doesn't pull back scripts. This is part of the default functionality in the docs

Answer 2

Hello there.

I ended up using .livequery() to solve EXACTLY this issue! :)

have a look.

http://plugins.jquery.com/project/livequery/

Include the plugin, then you'll need something like this in your index.php

<script type="text/javascript">
$(document).ready(function(){

            $('#yourInputField') 
              .livequery(function() { 
                 $('#yourInputField').YourValidatorPlugin(); 
        });
});
</script>

Answer 3

as Inrbob points out the problem is that loading content into an element will not load nor execute script elements. The appropriate way to apply a new script to the page is to implement:

var s = $("<script src='" + script_location_for_validation + "'/>");
$("body").append(s);

This will lazy load the javascript and keep your code out of your page (important if you want to use caching to improve speed on later page loads).

As an aside it is very good practice to put your libraries and scripts at the end of your page so they do not block other downloads or rendering.

Answer 4

very easy

1. Save all javascript functions used main.php in external file and include it in current page.
2. Load content in to div.
3. Call the appropriate function.

It will surly work.