CODEWITHSUNDEEP
javascriptjqueryhtml
Ben
Ben

Reputation: 9001

How to execute Javascript from external HTML

If I have a button that executes the code

$('#main').load('welcome.html');

and in welcome.html I have a button that executes the code

$('#main').load('otherpage.html');

the Javascript isn't executed, regardless of whether that function is on the parent file's HTML code or the child's.

How can I get a Javascript function to work from externally loaded HTML files?

EDIT Here's a bit more of a sample...

Homepage:

<body>
    <div id="main"></div>
</body>

<script>
    document.onLoad(){
        $('#main').load('welcome.html');
    }

    function show(file){
        $('#main').load(file+'.html');
    }
</script>

welcome.html page:

<a href="javascript:show(test)">Test</a>

...however when the Test button is clicked, test.html is not loaded into the Main div.

EDIT 2

Here is what the current state is and what the issue is - exactly.

I've uploaded the bones of the code to PasteBin.

When the 'grid' button is clicked, the content changes and the footer changes.

However, the footer, which has URLs based on Javascript, comes up with the error:

Uncaught SyntaxError: Unexpected token ILLEGAL

...when trying to access the 1i.html page.

Upvotes: 0

Views: 139

Answers (3)

Ja͢ck
Ja͢ck

Reputation: 173552

There's a difference between test the variable and 'test' the string:

<a href="javascript:show(test)">Test</a>

Probably should be:

<a href="javascript:void show('test')">Test</a>

Upvotes: 1

mr_app
mr_app

Reputation: 1312

Check jQuery.live() and jQuery.on().

Maybe your eventhandler is wrong. When you import new markup via load() or ajax(), you have to initialize the handlers from new document. The easiest way is using jQuery.on or jQuery.live() instead of jQuery.click().

$('MYBUTTON').live('click', function(){
    $('#main').load('your_url.html')
})

or use the callbackfunction to (re-)initialize the buttons event.

A better solution is this: Just add the target_url to buttons rel attribute...

<button rel="YOUR_URL.html">Open Page</button>

$('button[rel]').live('click', function(){
    $('#main').load($(this).attr('rel'));
})

Upvotes: 0

charlietfl
charlietfl

Reputation: 171679

It is important to understand that when loading script into page via AJAX that the main page has already gone through document.ready . Thus, any code you load will fire immediately.

If the code you load precedes the html it references, it will not find that html when it fires.

Placing the code after the html in remote page will resolve this issue

Upvotes: 0

Related Questions