Jquery Modal window - Modal property breaks code - javascript

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.

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.

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() { ...
});

Related

jQuery code to delay JavaScript execution until page load causes JS to throw runtime error

The Setting:
I coded some JavaScript to dynamically populate a table with data and then listen for a click event on any of that data, upon which it dynamically populates and displays a modal dialog with information about the clicked data. See the /test-table page of my site and the pen Table Play at CodePen. And up to this point, everything is jake, just hunky-dory.
Now I need to put all the JS in the <head> of the page with the table. But the JS manipulates the DOM, so I have to delay execution until the page loads. I've found answers to that issue which say to wrap the JS in the jQuery statement:
$(document).ready(function() {
// ... js code here ...
});
or in
$(window).bind('load', function() {
// ... js code here ...
});
The Problem:
That, however, causes the JS to throw a runtime error.
When testing it locally on my system, the error is "Uncaught ReferenceError: classes is not defined." When testing it in the pen Table Play, it's "Uncaught ReferenceError: removePopup is not defined." Classes is the array of objects from which the JS populates the table. RemovePopup is the function invoked when the modal dialog's dismiss button is clicked.
Edit 0:
The TablePlay base code is without the jQ. When I put the code
$(document).ready(function() {
at JS line 1 and the code
});
at JS line 316 (the last line), then click on a table cell item, then click the modal dialog's dismiss button, the "removePopup not defined" error logs to the console. See this screenshot.
The removePopup function is set as the dismiss button's onclick function at JS line 190. It is defined beginning at JS line 92. As to the line at which the error is occurring, the console message simply says "onclick # index.html?editors=0010:formatted:1".
End Edit 0
The error only occurs upon wrapping the JS in either of the jQ statements. And the JS in the pen and locally on my system are the same, the former copied and pasted from the latter, so one would expect any error to be the same.
The Question(s):
Does anyone have an inkling what might be going on?
Why would wrapping otherwise correct JS in one of these jQ statements cause an "undefined" error, and why would it be the variable classes on my system and the function removePopup in the pen?
More importantly, of course, how do I delay the execution of the JS until the DOM has fully loaded?
Well, I've not yet determined what it is that's causing the function undefined error, but I've found an alternate implementation that works.
Instead of using the jQuery document ready handler, I added
window.onload = function() {
init();
};
to the script in the document head. I defined init() to declare and initialize the global variables, to populate the table with its data, and to add the click event listeners.
Thanks to the commenters for their interest and time with a particular thanks to #nnnnnn for his/her remark about my possibly having
moved previously global function or variable declarations into your document ready handler but continued trying to reference them from other code that isn't in the ready handler.
Although I couldn't see where I might have done that, it made think of this alternative approach as a way to avoid that happening.

Completely delete all instances of a div with a specific class using javascript/jquery?

I am using Popup.js by Toddish.
http://docs.toddish.co.uk/popup/demos/
Long story short, the popup plugin creates divs by default given the classes ".popup_back" and ".popup_cont".
I have another button I wish to press which should completely delete the added divs with those classes after they have been generated and added to the html. As if they never even existed. Surely this is possible?
I have tried running a function which simply runs:
$(".popup_back").remove();
$(".popup_cont").remove();
As shown in this example:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove
Unfortunately despite the code running, the actual divs are never deleted as required.
Any ideas? I am new to this kind of thing and have googled around and read a lot about DOM etc but am yet to crack it.
Thanks
EDIT:
In reply to the comments:
The Javascript:
function removePopups() { // This function is called to remove the popups.
console.log("removing...");
$(".popup_back").remove();
$(".popup_cont").remove();
}
function func(url) { // url is the url of the image to be displayed within the popup.
removePopups(); // As soon as the function casillas is called, removePopups is used to remove any existing instances of the divs.
$('a.theimage').popup({ // This is where the Popup plugin is utilised.
content : $(url),
type : 'html'
});
}
The HTML:
<a class="theimage" onclick="func('image/image1.jpg')" href="#" >
Long story short, an image is displayed in the popup.
I think the issue is that the popup plugin runs due to the class but the function func is never actually run when the click occurs. However simultaneously "removing..." still prints out in the console which tells me that the function IS being executed. The problem is I want the popup plugin to run together with the javascript function. Is there a solution for this conflict?
Your implementation should really be as simple as this:
<a class="theimage" href="#" >Open</a>
Bind the popup creation to your popup link:
$('a.theimage').popup({
content : 'image/image1.jpg',
type : 'html'
});
I'm speculating here, but what might be happening is that you're invoking the popup twice by binding the popup() call to a click handler in your markup. The popup plugin already binds the popup creation to a click event.
View working demo. Note the 3 external resource: the popup CSS, the popup JS, and the jQuery JS.

Opening a boostrap modal after closing another - unexpected behavior

I want to show a bootstrap modal immediately after user close another. So I use the following code trying to do this:
currentModal.modal('hide').on('hidden.bs.modal', function (){
nextModal.modal('show');
});
Everything happens normally. First modal closes and next modal appears.
However, the class="modal-open" should be in body element to scroll works properly, what is not happening. After second modal is shown, that class disappears from body.
Am I doing something wrong?
Am I doing something wrong?
I don't think so. The large number of issues on this topic suggests that this was either not well-designed, or not designed to support this. Relevant bugs would be
Multiple modals fix #5022, Multiple modals #11872 and
.modal-open is not applied to body when "switching" to another modal #11865 where it is explicitly said by #mdo:
Yup, we won't be supporting multiple modals.
So what to do about it?
A small timeout should definitely help:
currentModal.modal('hide').on('hidden.bs.modal', function (){
setTimeout(function() {
nextModal.modal('show');
}, 100);
});
Without seeing this in action, my guess is that there is some kind of callback handler that removes the class "modal-open". You can try manually adding it like this:
currentModal.modal('hide').on('hidden.bs.modal', function (){
nextModal.modal('show');
body.addClass('modal-open');
});
But instead of overriding Bootstrap, have you looked into data-dismiss and data-target?

jquery popbox not popping up

all!
I'm sure I'm asking a very basic question, but I spent a whole day on it, and just can't figure it out.
I have a table inside a tabbed box. And to the table header row I need to add a button that will pop up a box for data entry. Tabbed area works, the table displays, and the button also. But when I click on that button, nothing happens.
I'm using the following tutorial as an example
http://gristmill.github.com/jquery-popbox/example.html
Added popbox.js and popbox.css to my html code and added
$(document).ready(function() {
$("#tabs").tabs();
$('.popbox').popbox();
});
at the end of the html file.
However, it doesn't pop up. I added alerts to the method, and popbox function does get called, but bind does not seem to get executed. I added some alerts, but alerts are not triggered:
return this.each(function(){
alert("test1");
$(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized.
alert("test2");
$(settings['open'], this).bind('click', methods.open);
alert("test3");
$(settings['open'], this).parent().find(settings['close']).bind('click', methods.close);
});
As far as I see, it's not popping up because the open and close clicks are not bound. But not sure what is going on. I'm a newbie at jsp and diving head in into jquery. Apologize for newbie questions.
Thank you for your help!

How do I discover which function is called when I press a button?

I'm stuck modifying someone else's source code, and unfortunately it's very strongly NOT documented.
I'm trying to figure out which function is called when I press a button as part of an effort to trace the current bug to it's source, and I"m having no luck. From what I can tell, the function is dynamically added to the button after it's generated. As a result, there's no onlick="" for me to examine, and I can't find anything else in my debug panel that helps.
While I prefer Chrome, I'm more than willing to boot up in a different browser if I have to.
In Chrome, type the following in your URL bar after the page has been fully loaded (don't forget to change the button class):
var b = document.getElementsByClassName("ButtonClass"); alert(b[0].onclick);
or you can try (make the appropriate changes for the correct button id):
var b = document.getElementById("ButtonID"); alert(b.onclick);
This should alert the function name/code snippet in a message box.
After having the function name or the code snippet you just gotta perform a seach through the .js files for the snippet/function name.
Hope it helps!
Open page with your browser's JavaScript debugger open
Click "Break all" or equivalent
Click button you wish to investigate (may require some finesse if mouseovering page elements causes events to be fired. If timeouts or intervals occur in the page, they may get in the way, too.)
Inspect the buttons markup and look at its class / id. Use that class or id and search the JavaScript, it's quite likely that the previous developer has done something like
document.getElementById('someId').onclick = someFunction...;
or
document.getElementById('someId').addEventListener("click", doSomething, false);
You can add a trace variable to each function. Use console.log() to view the trace results.
Like so:
function blah(trace) {
console.log('blah called from: '+trace);
}
(to view the results, you have to open the developer console)

Categories