EasyUI Forum
June 19, 2024, 05:13:53 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: javascript in ajax loaded panel  (Read 24416 times)
chrwei
Full Member
***
Posts: 219


View Profile Email
« 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?
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: August 21, 2013, 05:43:49 PM »

What is the 'contentdata'? Providing an example to demonstrate this issue may be more appropriate.
Logged
chrwei
Full Member
***
Posts: 219


View Profile Email
« Reply #2 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.
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 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});
Logged
chrwei
Full Member
***
Posts: 219


View Profile Email
« Reply #4 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.
Logged
chrwei
Full Member
***
Posts: 219


View Profile Email
« Reply #5 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.
Logged
chrwei
Full Member
***
Posts: 219


View Profile Email
« Reply #6 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.
Logged
chrwei
Full Member
***
Posts: 219


View Profile Email
« Reply #7 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..
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!