I have a web page requires both jQuery and Mootools to function. The conflict between these 2 libraries were solved when adding jQuery.noConflict(); to the script.
But I also want to popup a jQuery dialog window when the jQuery user input validation fails.
jQuery.noConflict();
function OnButton1()
{
var noOfChecked = jQuery("input:checked").length;
if(noOfChecked > 0)
{
jQuery( "#dialog" ).dialog({
modal: true,
buttons: {
"OK": function() {
jQuery( this ).dialog( "close" );
}
}
});
return false;} }
The problem is that the jQuery dialog window did not popup. It seems that the noConflict() doesn't solve the problem. But the strange thing is that the jQuery is actually working because the validation using jQuery is actually functioning. So I just don't understand why jQuery is working but jQuery UI is not.
So can anyone please help me to get my jQuery UI working with Mootools? Thanks in advance!
It should be working with jQuery.noConflict() but sometimes you need to change jquery name completely.
var $j = jQuery.noConflict();
After that use $j instead of $.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
Related
This seems to be a problem with autocomplete in the jQuery UI 1.9.x versions- Is there any way to keep the jQuery UI autocomplete menu open when desired after clicking on some items? In 1.9.2, no matter what I try, the menu just won't stay open, no matter what I try.
I must use jQuery UI 1.9.2. I've seen solutions for earlier versions of jQuery UI that work, but they do not work with 1.9.2.
This code works with an older version of jquery + jquery UI:
var $input = $("input").autocomplete({
source: ['Hello', 'Goodbye', 'Foo', 'Bar']
});
$input.data("autocomplete").menu.options.selected = function(event, ui) {
// clear out old function
};
http://jsfiddle.net/nr757/
Similar code does not work in ui 1.9.2:
http://jsfiddle.net/Db9VE/
$( "#input" ).autocomplete({
source: availableTags,
close : function (event, ui) {
if (!$("ul.ui-autocomplete").is(":visible")) {
$("ul.ui-autocomplete").show();
}
}
});
I need a way to reload my parent page when I close my jqUI modal window. Somehow or the other, what I am currently doing is not working (imagine that)...
$('div#addPat').live('dialogclose', function (event) {
debugger;
location.reload(true);
});
I never get to the debugger statement so I assume just assume that my event is wrong...
How do I get the close dialog event and how can I use it to reload the page... I think I have the second part figured out.
Try this:
$( "div#addPat" ).dialog({
close: function(event, ui) {
debugger;
....
}
});
REF: http://jqueryui.com/demos/dialog/#event-close
I have a list of draggables that need to be dropped onto divs loaded by AJAX. However, when the divs are loaded by AJAX it breaks the droppables functionality. I removed AJAX from the equation and it worked fine.
Here's working code. With this code I can drag items in my .contentList to #block1 div and everything works peachy.
<div id="block1"></div>
$(".contentList").draggable();
var dropOpts = {
hoverClass: "activated",
tolerance: "pointer",
drop: getURL
};
$("#block1").droppable(dropOpts);
I then have the following code load a new div via jQuery .load.
$(document).ready(function() {
$("#template1").click(function() {
$("#dynamic-ui").load("/templates/newtemplate.html");
});
The newtemplate.html contains a div with the same id; #block1. However, once it loads I can no longer drag onto it. Any help would be greatly appreciated!
Add the code to make #block1 droppable after the newtemplate.html is loaded into dom. e.g.
$(document).ready(function() {
$("#template1").click(function() {
$("#dynamic-ui").load("/templates/newtemplate.html");
var dropOpts = {
hoverClass: "activated",
tolerance: "pointer",
drop: getURL
};
$("#block1").droppable(dropOpts);
});
});
The binding of events happens when the browser loads the webpage.
So during the loading if the JavaScript didn't find the specified division/element they won't bind the event. So for dynamically created divisions you need use jQuery live to bind the events.
For your question i think this question will answer you.
Hope it will help you.
Good luck
I am using jquery-ui to implement tabs.
However, I need to use it more than one on the same page.
but jquery uses the id "tabs" (as opposed to class or something), so it only works for the first instance.
Could you change the tabs prefix?
$( ".selector" ).tabs({ idPrefix: 'ui-tabs-primary' });
Other than that, it seemed to work for me out of the box.
Another way is:
$(document).ready(function() {
$("#tabs1").tabs();
$("#tabs2").tabs();
});
maybe not the best way, but I worked for two tabs
first tab
$(function(){
var options = {
event:'mouseover',
selected:0
};
$("#tabs").tabs(options);
});
<div id="tabs">.....</div>
second tabs
$(function(){
var options = {
event:'mouseover',
selected:0
};
$(".tabs").tabs(options);
});
<div class="tabs">.....</div>
$(document).ready(function()
$("#tabs1, #tabs2").tabs();
});
$(document).ready(function()
$("#tabs1, #tabs2").tabs();
});
It works perfect! You can add the tabs you want.
$( "#tabs, #tabs1, #tabs2" ).tabs();
Thank you very much user3152277!
I have a page that loads and after it loads, it pulls in a list of LIs to populate a news feed.
<li>quick view</li>
<li>quick view</li>
<li>quick view</li>
I'm trying to get fancy box to trigger when a user clicks on quick view but haven't had any luck. Any Ideas?
$(document).ready(function() {
$('.quickview').fancybox();
});
also tried:
$(document).ready(function() {
$('a.quickview').live('click', function() {
$(this).fancybox();
});
});
http://fancybox.net/
Thanks for any ideas...
Old question, but might be useful for future searchers.
My preferred solution is to fire fancybox manually from within the live event, eg:
$('.lightbox').live('click', function() {
$this = $(this);
$.fancybox({
height: '100%',
href: $this.attr('href'),
type: 'iframe',
width: '100%'
});
return false;
});
EDIT: From jQuery 1.7 live() is deprecated and on() should be used instead. See http://api.jquery.com/live/ for more info.
this should work after every ajax request
$(document).ajaxStop(function() {
$("#whatever").fancybox();
});
The problems is to attach fancybox into AJAX loaded element, right?
I got same problems and I found this solution.
I copy paste it here, see the original bug report for more info:
$.fn.fancybox = function(options) {
$(this)
.die('click.fb')
.live('click.fb', function(e) {
$(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {})))
e.preventDefault();
[...]
Credit goes to jeff.gran.
Since .on is now recommended over .live, and after reading over the documentation on delegated events, here's a solution I came up with (assuming your elements have a class of 'trigger-modal'):
$(document).on('click', '.trigger-modal', function() {
// remove the class to ensure this will only run once
$(this).removeClass('trigger-modal');
// now attach fancybox and click to open it
$(this).fancybox().click();
// prevent default action
return false;
});
From my understanding of Fancybox, the call to fancybox() simple attaches the plugin to the selected element. Calling fancybox on a click event won't open anything.
I think you just need to add
$(li_element_that_you_create).fancybox();
to the code that creates the new LI elements in your list
EDIT
If you're using load, then you would do something like:
$('#ul_id_goes_here').load('source/of/news.feed', function() {
$('.quickview').fancybox();
});