CODEWITHSUNDEEP
javascriptjqueryhtmlformsmodal-dialog
vladc77
vladc77

Reputation: 1064

Jquery Modal window - Modal property breaks code

I hope someone can help. I am missing some logic and styles while I am running the form in JQuery modal window with the 'modal' property is set to 'true'. I am trying to utilize the form from http://jqueryui.com/dialog/#modal-form.

The same code used outside modal window is running correctly. I am not sure how to fix it and decided to share it with you.

I created a page in JSFiddle - http://jsfiddle.net/vladc77/GcQRg/16 to show the code. However, the modal window cannot be ran from there. As a result, I uploaded the same test in here - http://www.vladcdesign.com/modalWindow

When I set (modal: true) then I am getting the following problems.

1.The check boxes in work hours form should enable/disable menus to set the time

2.“More” check box should show/hide a text field

3.I lost ability to set margins between elements in Hours settings form. Now all menus are touching each other even though I use margins styles. They just don’t apply.

All of these issues are present only while I run this DIV in a modal window. It works OK outside the modal window. I am wondering if someone can help and explain what is wrong with the code. Any advice is highly appreciated.

Upvotes: 0

Views: 1072

Answers (2)

Bill Hayden
Bill Hayden

Reputation: 1086

Looking at both the fiddle and the example you posted on your site, you're getting the following error:

Uncaught ReferenceError: closedHours is not defined

The problem appears to be coming from this line:

$(this).append(' <span class="closed custom-checkbox"><input type="checkbox" name="closed" value="closed" class="closed" id="closedHoursElement" onchange="closedHours()"><span class="box"><span class="tick"></span></span></span>Closed');

Also, the reason you can't get the dialog to load on your fiddle is that you're including the JS files in the wrong order. It should be jquery, jquery ui, and then jquery ui.selectmenu.

Your change function on the checkboxes also has a bug, it should be something like this: 

$('input[type=checkbox]').change(function() {
    if (!this.checked) {
        $(this).parent().siblings('select').removeAttr("disabled");
    }
    else {
        $(this).parent().siblings('select').attr('disabled', 'disabled');
    }
});

Even when I changed all that, the checkboxes still weren't working, so I removed your custom jquery and jquery ui references. When I did that, they worked fine so something that you've done to customize those is what's causing your problem. You can view my changes here.

Upvotes: 1

p1100i
p1100i

Reputation: 3740

The first $(document).ready(function(){}); and second $(function() { }); are the same, the code will be executed in order they are in these blocks.

However the $(window).load(function(){ }); is a little bit differenet, it gets executed later. Check this post to see the difference.

You could experminet a little with defining the click event to your "Open modal window" button, and do all of the binding when that fires:

$('#create-user').bind('click',function(e){
  // To avoid navigating by link
  e.preventDefault();
  e.stopPropagation();
  // Do every binding / appending 
  // $('.workDayHours').each(function() { ...
});

Upvotes: 0

Related Questions