jqModal disables form elements - not sure how to fix...

[bcarl314]

I'm using jqModal and jQuery for some modals in a new app I'm working on, all is going well, except when I have a form embedded in the modal. For some reason, when I check a checkbox, nothing happens. If I add an alert

<input type="checkbox" onclick="alert('huh???')" />

I see that the checkbox is checked, then the alert triggers, then the checkbox goes unchecked. It's really strange.

I'm adding the modals this way...

$().ready(function() { });
function addLoadEvent(func) { 
  var oldonload = window.onload; 
  if (typeof window.onload != 'function') { 
    window.onload = func; 
  } else { 
    window.onload = function() { 
      if (oldonload) { 
        oldonload(); 
      } 
      func(); 
    } 
  } 
} 
function open_modal(open,close,link,target) {
	  alert(open);
	  $(open).jqm({overlay: 50, trigger: true, modal: true}).jqmAddTrigger(open).jqmAddClose(close)
	  $(link).click(function() {
	    $(target).jqmShow();
	    //$('div.square:odd').jqmHide();
	    return false;
	  });    

}

Then in the HTML page...

	addLoadEvent(function() { 
				open_modal('div.jqmWindow_1','div.jqmClose','#moduleLink_1','#module_1');
					open_modal('div.jqmWindow_2','div.jqmClose','#moduleLink_2','#module_2');
					open_modal('div.jqmWindow_3','div.jqmClose','#moduleLink_3','#module_3');
					open_modal('div.jqmWindow_4','div.jqmClose','#moduleLink_4','#module_4');
					open_modal('div.jqmWindow_5','div.jqmClose','#moduleLink_5','#module_5');
					open_modal('div.jqmWindow_6','div.jqmClose','#moduleLink_6','#module_6');
					open_modal('div.jqmWindow_7','div.jqmClose','#moduleLink_7','#module_7');
		
	});

Then I have a series of divs as needed. And associated triggers.

<a href="#" id="moduleLink_1" class="jqModal">Open 1</a>
...

<div id="module_1" class="jqmWindow_1 modal_window large_modal_window">
...
</div>
...etc

Any ideas what the issue is here?
Using jQuery1.3.2.min and http://dev.iceburg.net/jquery/jqModal/

Thanks

[Fumigator]

I happen to be using the jqModal plugin right now too. I added a checkbox to my code and I was able to check and uncheck it with no weird behavior. The value of the checkbox comes through fine as well.

So... I'm stumped! Something in your code must be detecting when the checkbox is checked and unchecking it... I guess?

[bcarl314]

Yeah, I'm not getting any errors in firebug.

I've uploaded a test page of the problem here:
http://www.aphion.com/modal/test.html

If you click on the big RSS icon, the modal should open. Click on the "Fonts" tab in the modal, then try checking any checkbox.

None of them stay checked for me (FF3.0 Linux). The first checkbox (for Heading Bold) I added an alert, so you can see that it does get checked, but once you click "Ok" on the alert, it unchecks. There's no code (that I can see) that's unchecking things.

I've stripped pretty much everything out (js / css wise) except what's needed for the modals.

Any help would be greatly appreciated.

[Fumigator]

Hmmm...wow. I've done my jqModal stuff differently. I use the trigger attribute to identify the link that opens the jqModal, then use a jQuery selector to assign the div that will get opened. Pretty much just like described here:

http://dev.iceburg.net/jquery/jqModal/#how

I copied your test page and made some changes to open the modal div using this technique and the checkboxes started behaving. I added this to your page-ready function:

$().ready(function() { 
	$('#module_1').jqm({overlay: 50, trigger: '#moduleLink_1', modal: true});
});

And to the Javascript in your test.html, I commented out the call to addLoadEvent(), so the open_modal() function won't ever run.

[bcarl314]

ok, so let me ask this..

Does that need to be in the "head" of the document? or can I create those $.ready() calls anywhere in the body?

[Fumigator]

Anywhere, but I usually just put one in my page.js script and add all of my selectors under that one umbrella. It's the way to say "the page is loaded, now do this stuff", but is better than Javascript's "onload" because it will start before images have been fully downloaded-- all it waits for is the DOM.

BTW I use the shorthand version $(function() {} but it doesn't really matter.

[bcarl314]

Good to know, thanks. I don't think I can put it all in one js file as the code is very dynamic.