Does anyone know the best way to get the Jquery Validation plugin to run when submitting a form that has been loaded dynamically into a Jquery Colorbox modal window?
Add the validation set up to the colorbox callback. That way the color box has been loaded and the form exists before you attempt to set up validation for it.
$('selector').colorbox({...options...}, function() {
$('form',this).validate( {...options...} );
});
I was playing around with this and found a better solution (at least for myself).
$('selector').colorbox(
{options, onComplete:function(){$('selector').validate({}
});
Visually I can see when the lightbox is finished loading, it'll attach this function to the lightbox. It's the same as what tvanfosson posted, but I like mine for readability purposes.
Related
I have got a problem with Loopj's jQuery Tokeninput inside Jack Moore's Colorbox window. The problem is that dropdown of Tokeninput shows under Colorbox window, as on screenshot below:
I think that the problem could be with this code inside tokeninput library (lines 343-347):
// The list to store the dropdown items in
var dropdown = $("<div>")
.addClass(settings.classes.dropdown)
.appendTo("body")
.hide();
because it is appended to body, not to colorbox window.
Could anyone help me solve this problem?
PS. I am using this lib also outside colorbox window, so appending it to colorbox probably will be a bad idea.
It should be possible to fix this issue by altering the z-index of the TokenInput's dropdown.
The z-index of a Colorbox is 9999, the default value for the TokenInput is lower than that.
Depending on which TokenInput version you're using - if it supports the z-index parameter, you could alter the value with that on initialisation. e.g.
$('#myID').tokenInput("http://sourceurl.com",
{
zindex: 100001
}
Else if it's an earlier version, try altering the value for div.token-input-dropdown in the token-input.css file.
I've put in a pull request for this issue on GitHub, but sadly, the project now seems to have sunk back into inactivity.
There is a problem when I put Kendo Dropdown List info Fancybox - Popup.
For detail:
I have page A :this page contains Kendo Dropdown list (with id = #myDropdown).
I have page B : I put my Fancybox caller here- I mean I use Fancybox to load page A (by ajax)
Everything look well , but I got a problem here:
You know, when I initialize a Dropdown List, Kendo-UI will create an "anchor" Tag for UI-effect purpose.
Ex:
DropdownList has id = #myDropdown
Kendo will create one more Tag with id = #myDropdown-list.
After closing the Fancybox-popup , The "#myDropdown" was removed from DOM, but "#myDropdown-list". It still on the DOM overtime, and it willing to be double after I call the popup again(ofcourse if dont refresh current page).
And The Kendo-DateTimePicker as the same too.
p/s: and so sorry about by english if it was too bad :D. I hope you get my question.
im going to put my "popup" in iframe.But I dont know if it is good when using iframe in this case...
Using IFrame or not is not the cause of the error. I tried with a container and without it to load the fancybox via ajax, but it didn't make a difference.
What I found is sort of a hack, however it solves the problem. Let's suppose we have a code which creates the popup and the popup's content is located in the href 'popupFrame':
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
The other part is the function which is called before closing the popup:
function removeKendoHelpers() {
$("#myDropdown-list").remove();
}
Of course you can create the removeKendoHelpers as an inline function and if there are more parts to remove then put that code into the removeKendoHelpers function as well.
One interesting remark: in the fancybox API onCleanup and onClosed are listed as options but they do not work, instead use beforeClose or afterClose.
UPDATE:
Actually a lot of problem is solved with calling the kendo widget's destroy() method. It solves the removing problems for the widgets except for one of the three helper divs of the DateTimePicker, so the close looks like the following:
function removeKendoHelpers() {
$("#myDropdown-list").data("kendoDropDownList").destroy();
$("#datetimepicker").data("kendoDateTimePicker").destroy();
}
And to resolve the date time picker's actual problem which is I think a bug in the kendop framework (I will report this and hopefully get some feedback) the last function only needs to be extended with:
$(".k-widget.k-calendar").remove();
OTHER solution:
This one is more crude but works like a charm for me even if the page has multiple kendo controls and even if you open another fancybox from your fancybox.
Wrap the fancybox creation in a function, like:
function openFancyBox() {
$("body").append("<div class='fancybox-marker'></div>");
$.fancybox({
'href': 'popupFrame',
'type': 'ajax',
beforeClose: removeKendoHelpers
});
}
This will create a new div at the very end of the body tag, and the function at the closing of the fancybox uses this:
function removeKendoHelpers() {
$(".fancybox-marker").last().nextAll().remove();
$(".fancybox-marker").last().remove();
}
I hope these solves all your problem!
I am having an issue closing a fancybox popup when jquery is included within the popup page (i'm using AJAX and including an external php page within the popup). The fancybox is setup as follows:
$(".various3").fancybox({
'type' : 'ajax',
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none',
'ajax' : {
type : 'GET'
}
});
The popup has a 'Cancel' button to allow users to close the popup (using jQuery.fancybox.close();). I have to include jquery within the popup page to allow some other functionality to work and this prevents the jQuery.fancybox.close(); from working. If i remove jquery from the popup page then it works fine, however I cannot work out how to reference the instance of jquery on the main page (i have tried parent in case, although i wouldn't have thought this should work as it's a div and indeed it didn't). I have tried using:
var localjquery = jQuery.noConflict(true);
within the popup page and this allows me to use jQuery.fancybox.close(); to close the popup successfully however this prevents the use of $ to reference jquery which is needed for other plugins on this page that i can't edit. If I add
var mainjquery = jQuery.noConflict();
after the first instance of jquery on the main page then this obviously works fine and i can refer to it as mainjquery on the parent, but if then try
mainjquery.fancybox.close();
on the popup it says mainjquery is undefined.
I suspect it's a problem due to a combination of multiple jquery instances and loading a completely separate page via ajax into a div (rather than using an iframe etc whereby i could then use parent. or similar). If anyone could shed any light on how I could reference the mainjquery reference from the child popup, or a better way I can close the fancybox then that would be greatly appreciated.
Thanks so much!
Dave
The best thing to do is test to see if it is an ajax request, and if so don't include the jquery (or any other scripts you already have for that matter).
Here's a sample of code I use on my php pages for doing both ajax and regular page requests.
define('IS_AJAX', isset($_SERVER['HTTP_X_REQUESTED_WITH']) &&
strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
....
if(!IS_AJAX)
{
//echo your header with scripts
echo $header;
}
//else just echo the contents of the page body
edit:
If you need to add things to the head tag, you should be using an iframe instead of an ajax type for the fancybox.
I am using jquery colorbox and jquery date picker. My problem is date picker doesn't work in my popup window using jquery colorbox. I tried to used outside colorbox and its work fine.
Any help would greatly appreciated.
I tried the code below but still doesn't work.
onLoad: function(){
$('#date-pick').datepick();
},
I think you may write these codes $('#date-pick').datepick(); in colorbox's onComplete function. When all dom elements are ready then the code will work.
Well, for starters, to create the datepicker with jquery-ui its:
$("#datepicker").datepicker();
It may well be something else, but you really haven't shown us much. I don't even know if you're using the jquery-ui datepicker as you've provided very little information in your question.
After I load a page through a WebBrowser, and I click a link that fires an AJAX script, I need to detect when the AJAX java script finishes loading HTML changes into a div. Since no DocumentCompleted event is fired when the AJAX script is run, I don't know when it finish running. Is there a way I can attach an event to be raised after I know 100% that the javascript finished changing the div?
The project is in C#.
Thanks
I did something similar recently (using jQuery):
$('#mydiv').change(function(){
// do stuff
}
);
Granted, I also use jQuery to set the HTML of that div. I suppose one non-jQuery approach for you could be to set HTML through your own function, which in turn can fire an onchange event.
#New in town: From my experience that is not correct. I use this on multiple DIVs that never get focus in the first place, and it works well and consistently. The normal behavior is as you describe, and normally only applies to the INPUT and SELECT elements, but this is not the case with jQuery.
There is no event. You must patch the JavaScript callback that the browser runs when the reply for the AJAX request comes in. This will contains code like "div.innerHTML = ...". Just put your code below that.