How to execute Javascript from external HTML

Question

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.

I do... these functions are within script tags. The rest of my Javascript works, I'm just trying to make a one-page site with external pages loaded that also contain Javascript. The home page works, the others don't when they are loaded. — Ben
– Ben, Commented Feb 5, 2013 at 23:34
do you have items with ID of "main" on both pages? Do you have a more complete sample we can refer to? — Offbeatmammal
– Offbeatmammal, Commented Feb 5, 2013 at 23:38
Well when you try to use the JavaScript function make sure it is below the #main tag. — Shawn31313
– Shawn31313, Commented Feb 5, 2013 at 23:39

Ja͢ck · Accepted Answer · 2013-02-06 00:01:34Z

1

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>

edited Feb 6, 2013 at 0:01

answered Feb 5, 2013 at 23:50

Ja͢ck

174k39 gold badges269 silver badges316 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben Over a year ago

Thanks for your reply - please see updated question for a more specific breakdown of the issue!

charlietfl · Accepted Answer · 2013-02-05 23:41:47Z

0

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

answered Feb 5, 2013 at 23:41

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

mr_app · Accepted Answer · 2013-02-05 23:47:08Z

0

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'));
})

answered Feb 5, 2013 at 23:47

mr_app

1,3022 gold badges17 silver badges37 bronze badges

Collectives™ on Stack Overflow

How to execute Javascript from external HTML

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related