Print Page - javascript in ajax loaded panel

Title: javascript in ajax loaded panel
Post by: chrwei on August 21, 2013, 01:59:34 PM

I've got an ajax handler that validates a result and does this:

Code:

centerpanel = $('#mainlayout').layout('panel', 'center');
centerpanel.panel({ content: contentdata } );

contentdata sometimes has javascript in it, using $(function(){...}); to do some modifications to forms and such. the first one like this loads and works correctly, the 2nd one causes the "$(function()" line to generate "Uncaught ReferenceError: $ is not defined" errors. javascript functions in the same script block will still work though, it just doesn't like the initial jquery stuff.

I've even tried modifying the code, the first $( always works, the 2nd+ always error, no matter what the code is.

I've done this before using jquery's .html() and the code always runs fun, but doing .html(contentdata); to a panel seems to turn the panel into a plain div.

is there a better way to handle the javascript blocks, or something I need to do to bless them?

Title: Re: javascript in ajax loaded panel
Post by: stworthy on August 21, 2013, 05:43:49 PM

What is the 'contentdata'? Providing an example to demonstrate this issue may be more appropriate.

Title: Re: javascript in ajax loaded panel
Post by: chrwei on August 21, 2013, 07:15:38 PM

a string that contains mixed html and javascript sniplet, such as

Code:

<div><form><select id="foo" class="easyui-combobox">...</select></form></div>
<script>
$(function() {
  $('#foo').combobox('select', 'x');
});
</script>

no matter what the javascript is, if it uses jquery, I get the error the 2nd+ times contentdata is loaded in, but not the first time, even if is the exact same content.

Title: Re: javascript in ajax loaded panel
Post by: stworthy on August 21, 2013, 11:29:48 PM

Try the code below and no errors found.

Code:

var contentdata = '<div><form><select id="foo" class="easyui-combobox"><option value="x1">x1</option><option value="x">x</option></select></form></div>'
		+ '<script>'
		+ '$(function() {'
		+ '  $("#foo").combobox().combobox("select", "x");'
		+ '});'
		+ '<\/script>';
var centerpanel  = $('#mainlayout').layout('panel','center');
centerpanel.panel({content:contentdata});

Title: Re: javascript in ajax loaded panel
Post by: chrwei on August 22, 2013, 06:23:37 AM

hm. this is certainly a lot simpler than my actual code. I may try a redesign (i'm still very early in the process), then I'll make a mock up in a pubic place if I still have the issue.

Title: Re: javascript in ajax loaded panel
Post by: chrwei on August 22, 2013, 12:05:41 PM

so this works:

Code:

var contentdata = '<div><form><select id="foo" class="easyui-combobox"><option value="x1">x1</option><option value="x">x</option></select></form></div>'
		+ '<script>'
		+ 'function content_onload() {'
		+ '  $("#foo").combobox().combobox("select", "x");'
		+ '}'
		+ '<\/script>';
var centerpanel  = $('#mainlayout').layout('panel','center');
centerpanel.panel({content:contentdata});
content_onload();

has to be some sort of timing issue. maybe only related to Chrome, I haven't tested other browsers yet.

Title: Re: javascript in ajax loaded panel
Post by: chrwei on August 30, 2013, 08:31:20 AM

I just noticed something in Chrome's inspector.

I'm getting iframes with my contentdata in them with id's like "easyui_frame_1377876179527". if I make the javascript so that it generates a fatal error, the iframe is left there and I can see it.

is .panel({ content: contentdata } ) loading the content into an iframe, then copying it into the document, then removing the iframe? that's this looks like. and if so, that's why $(function() {}) isn't working. the iframe doesn't have the the script tags to load jquery and that's why I'm getting errors.

in my previous framework my content loader used jquery's $.ajax() and did not have this problem.

Title: Re: javascript in ajax loaded panel
Post by: chrwei on September 04, 2013, 10:30:50 AM

so it turns out that it's the .form('submit') that does this, and is causing other problems for me as well. my work around is to send the form data via $.ajax in the onSubmit: and then return false letting the ajax success handle loading the content..

EasyUI Forum

General Category => General Discussion => Topic started by: chrwei on August 21, 2013, 01:59:34 PM