javascript in ajax loaded panel

[chrwei]

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?

[stworthy]

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

[chrwei]

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.

[stworthy]

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

[chrwei]

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.

[chrwei]

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.

[chrwei]

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.

[chrwei]

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..