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!
Related
This question has been answered in the comments :)
I hope I don't get any slack for this one. But I've been looking for hours and can't seem to find the solution.
I have a jQuery script that animates a div from offscreen to 50vw and this all works great. I've then set-up a little script that first shows a loader and then the loader fades out and the content is visible. Using this code:
success: function(response) {
$(".flyin-feestinfo").fadeIn(500, function() {
$('.feestlocatie_loader i, .feestlocatie_loader p').delay(500).fadeOut(1500);
$('.feestlocatie_loader').delay(1500).fadeOut(1500);
$(".flyin-feestinfo").html(response);
});
}
This all works great, one time only. If I close the window and open the off screen div again. The previous data is still there and after a little while the new content is shown.
What I would like is to have the loader to show again and fadeout and then show the new content. Now I'm pretty new to this all and I don't know if I need an if or else statement in there to get this to work. Or that I need to clear / reset the div when closing?
Help would be much appreciated... Please let me know if you all need more info...
I have uploaded a screencast of my issue as it's somewhat difficult to get across: https://www.youtube.com/watch?v=V8Gje44RGKQ
I have a list of Jquery tooltip confirms which when clicked say asks YES or NO. Pretty standard stuff...
$(document).ready(function() {
$('body').on('click', '.jConfirm', function(){
$(this).jConfirm({
message: 'You sure you to delete this?',
confirm: 'YUPPERS',
cancel: 'NO WAY!',
openNow: this,
callback: function(elem){
alert('According to the link you clicked...\r\nType = "'+elem.attr('itemType')+'" \r\n ID = "'+elem.attr('itemId')+'"');
}
});
});
});
A completely seperate thing, I have a DIV that gets populated with the following script:
$(document).ready(function() {
$("body").on("click",".edit", function(){
$("#menu").load("USERS_edit.php?id="+this.value);
});
When I click through the confirmation links, the tooltip appears and is completely functional. However, when I perform the unrelated task of loading a page into a DIV on my page, the original tooltip links do not function (apart from the ones that were already clicked).
I checked the console and I get the following error: $(...).jConfirm is not a function
Please note: The content that is being loaded into the DIV is completely seperate and does not intefer (I dont think!) with the tooltip confirmation buttons. I have stripped every single piece of code out of the file that is loaded into the DIV. I seem to have found that $("#menu").load("USERS_edit.php?id="+this.value); is causing the tooltips to stop firing, and are giving me the $(...).jConfirm is not a function message in console.
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() { ...
});
I have 2 divs, they have multiples elements and each element has options(events). In the first div, each element has a button that load, in the second div, the children elements. Those children have a edit button that opens a dialog where the user can edit.
Here is the script:
$("#Content").load("elements.php?id=5", function(){
$.ajaxSetup({cache: true});
$.getScript("../js/elements.js", function(){
$.ajaxSetup({cache: false});
});
})
The problem is: When I load #Content with its script, it`s works good only in the first time, it opens one dialog box, but if I load twice, it opens two dialog boxes, and three, etc.
How do I delete the last script I loaded?
Are there any bindings? any live, etc? I am not sure if its your current code that is causing this issue or the elements.js being that I dont know what is inside of it. I do recommend checking out Jquery stopImmediatePropagation(). I hope this can put you on the right path.
First of all, here is the site I am working on.
I am trying to get a modal window to pop-up when elements in the Flash are clicked on. Which at this point I have about 90% working when you click on the warrior image. Below is a list of issues I am still trying to solve that I hope you can help me with...
The modal background doesn't fill up
the whole page like it should.
I cannot get the close button to work
I need to set the vidname variable in
both the Flash and Java to load in a
dynamic HTML file. Depending on which
image is clicked on. My naming
convention will probably be something
like vid-1.html, vid-2.html, etc.
If you need to look at the .js file you can view it at /cmsjs/jquery.ha.js
Below is the ActionScript I currently have...
var vidname = "modal.html";
peeps.vid1.onRelease = function() {
getURL('javascript:loadVid(\'' + vidname + '\');');
};
Well I have one for you.
Your current close code is
$('#modalBG, #modalClose').click(function(){
closeModal();
});
If you click the background after a video loads you'll see that the modal does close. The reason your close button does not work is because #modalClose does not exist in the DOM when you are binding to the click function.
You need to either rebind the modalClose element when you modify the DOM or use live. If you use live you just need to change your click code to this:
$('#modalBG, #modalClose').live("click", (function(){
closeModal();
});