I have this JavaScript code which I use for question dialog:
// Question Dialog
function deletedialog(button, a){
$("<div />", {
text: a
}).dialog({
width: 600,
buttons: {
"Ok": function() {
$(button).closest("form").find("[id$=deleterow]").click();
$(this).dialog("close");
button.value = "Processing...";
button.disabled = true;
},
"Cancel": function(event) {
$(this).dialog("close");
event.preventDefault();
button.value = "Delete";
button.disabled = false;
}
}
});
}
But for some reason that I cannot find I get this error in Firebug:
TypeError: $(...).dialog is not a function
and this row is highlighted
"Cancel": function(event) {
This problem occurs when I added this in the JSF head in order to prevent JQuery and Primefaces conflict:
<script type="text/javascript">
$.noConflict();
</script>
How I can solve this problem?
The problem
The problem is that the $ symbol has been removed by using $.noConflict() function. Use jQuery instead.
Two solutions
This basically means you should write function calls like jQuery(this).dialog("close"); instead of $(this).dialog("close");.
To implement the change for the bigger piece of code, you can do it like that:
(function($){
// ... old code using "$" instead of "jQuery"
})(jQuery);
Solution no. 1 - multiple replacements - example
The solution with replacing $(...) calls with jQuery(...) could look like this:
// Question Dialog
function deletedialog(button, a){
jQuery("<div />", {
text: a
}).dialog({
width: 600,
buttons: {
"Ok": function() {
jQuery(button).closest("form").find("[id$=deleterow]").click();
jQuery(this).dialog("close");
button.value = "Processing...";
button.disabled = true;
},
"Cancel": function(event) {
jQuery(this).dialog("close");
event.preventDefault();
button.value = "Delete";
button.disabled = false;
}
}
});
}
Solution no. 2 - enclosing code in anonymous function - example
This is based on the fact you can create anonymous function and pass jQuery to it, but assign it to the argument called $ - which will result in $ symbol available within the function as if it would happen before $.noConflict() call:
(function($){
// Question Dialog
function deletedialog(button, a){
$("<div />", {
text: a
}).dialog({
width: 600,
buttons: {
"Ok": function() {
$(button).closest("form").find("[id$=deleterow]").click();
$(this).dialog("close");
button.value = "Processing...";
button.disabled = true;
},
"Cancel": function(event) {
$(this).dialog("close");
event.preventDefault();
button.value = "Delete";
button.disabled = false;
}
}
});
}
})(jQuery);
Before $.noConflict();, $ is equal to jQuery.
After $.noConflict();, $ is equal to undefined.
This removes the $ shortcut to jQuery, and that is why it is not a function anymore. You typically only use $.noConflict(); when you add another javascript library that uses $. Your options are:
Don't use $.noConflict();.
Use $.noConflict(); and replace every $ with jQuery.
Use $.noConflict(); and wrap your code with (function($){ ... })(jQuery)
If you need to use $.noConflict();, I suggest using the third one. It remaps $ to jQuery by passing jQuery as a parameter. Using the code you posted, it may look something like...
(function($){
// Question Dialog
function deletedialog(button, a){
$("<div />", {
text: a
}).dialog({
width: 600,
buttons: {
"Ok": function() {
$(button).closest("form").find("[id$=deleterow]").click();
$(this).dialog("close");
button.value = "Processing...";
button.disabled = true;
},
"Cancel": function(event) {
$(this).dialog("close");
event.preventDefault();
button.value = "Delete";
button.disabled = false;
}
}
});
}
})(jQuery)
Related
So I have a table of records, where everyone of them has a remove button. I want to add a confirmation popup, which will shows up when button clicked.
var $confirmDialog = $('<div></div>')
.html('This record will be removed.')
.dialog({
autoOpen: false,
title: 'Remove confirtmation',
buttons: {
"OK": function () {
$(this).dialog("close");
return true;
},
"Cancel": function () {
$(this).dialog("close");
return false;
}
}
});
My remove button event:
$(".removeButton").on("click", function(){
if($confirmDialog.dialog('open')){
var name = $(this).siblings(".someClassForNameHolder").text();
var urlPath = $("#hiddenForUrl").val();
Application.postRecord(name, "Remove", urlPath);
}
});
Btw, i have few following points:
1) I can't provide every record in the table with unique ids, so I have to keep my data collections (name variable) inside my removeButton event (to be able to use this.sibling...).
2) I want my script to wait until $confirmDialog returns value and only then continue code execution.
Just assign your urlPath to a global variable, and execute the POST inside the OK handler:
var nameToRemove, urlPathToRemove;
var $confirmDialog = $('<div></div>')
.html('This record will be removed.')
.dialog({
autoOpen: false,
title: 'Remove confirtmation',
buttons: {
"OK": function () {
$(this).dialog("close");
Application.postRecord(nameToRemove, "Remove", urlPathToRemove);
},
"Cancel": function () {
$(this).dialog("close");
return false;
}
}
});
$(".removeButton").on("click", function(){
if($confirmDialog.dialog('open')){
nameToRemove = $(this).siblings(".someClassForNameHolder").text();
urlPathToRemove= $("#hiddenForUrl").val();
}
});
Edit: I guess part of this is an issue of me being inexperienced with Drupal. I added a javascript file to site.info, so that it will be added to every page. This is all the file contains:
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
When the site loads, it gets compiled into this larger script, which looks like this in the debugger:
(function ($) {
Drupal.behaviors.titlebar = {
init: function(context, settings) {
// Using percentage font size to easily increase/decrease page font size
var baseFontSize = 100;
$('.pgc-font-size a').click(function() {
if($(this).hasClass('increase')) {
if(baseFontSize < 150)
baseFontSize += 20;
$('.pg-content-body p').css('font-size', baseFontSize+'%');
} else {
if(baseFontSize > 70)
baseFontSize -= 10;
$('.pg-content-body p').css('font-size', baseFontSize+'%');
}
});
// Print button
$('.pgc-print a').click(function() {
window.print();
})
}
};
}(jQuery));
// There's a problem with our jQuery loading before the ingested site's
// jQuery which is causing jQuery plugins to break (the "once" plugin in this case).
// I'm using this workaround for now
jQuery(function() {
Drupal.behaviors.titlebar.init();
});;
(function ($) {
Drupal.behaviors.giftTypes = {
init: function() {
// Gift details accordion
$('.pg-gift-details .accordion-items').css('display', 'none');
$('.pg-gift-details .accordion-switch').click(function(){
if($(this).hasClass('open')) {
$(this).find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down');
$('.pg-gift-details .accordion-items').slideUp('slow');
$(this).html($(this).html().replace('Hide', 'Show More'));
$(this).removeClass('open');
} else {
$(this).find('span').removeClass('icon-arrow-down').addClass('icon-arrow-up');
$('.pg-gift-details .accordion-items').slideDown('slow');
$(this).html($(this).html().replace('Show More', 'Hide'));
$(this).addClass('open');
}
})
}
}
}(jQuery));
// There's a problem with our jQuery loading before the ingested site's
// jQuery which is causing jQuery plugins to break (the "once" plugin in this case).
// I'm using this workaround for now
jQuery(function() {
Drupal.behaviors.giftTypes.init();
});;
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
alert(searchVal);
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
;
You can see my little script at the bottom there. It says there's something wrong with the first line, but I'm not sure what the problem is. What change would I need to make to my javascript file to make sure it compiles right?
I'm probably overlooking a really simple type, but I can't see what's wrong with my jQuery.
This is the part that's not working:
(function ($){
$("#ctl00_btnSearch001").on("click", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.website.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
I have jQuery on my site, I know I do because this it's used earlier in the code with no problem. The error is showing in the debugger on the first line, '$("#ct100_btnSearch001").on("click", function(){ '. Here is a larger section of the script page:
(function($) {
Drupal.behaviors.giftTypes = {
init: function() {
// Gift details accordion
$('.pg-gift-details .accordion-items').css('display', 'none');
$('.pg-gift-details .accordion-switch').click(function() {
if ($(this).hasClass('open')) {
$(this).find('span').removeClass('icon-arrow-up').addClass('icon-arrow-down');
$('.pg-gift-details .accordion-items').slideUp('slow');
$(this).html($(this).html().replace('Hide', 'Show More'));
$(this).removeClass('open');
} else {
$(this).find('span').removeClass('icon-arrow-down').addClass('icon-arrow-up');
$('.pg-gift-details .accordion-items').slideDown('slow');
$(this).html($(this).html().replace('Show More', 'Hide'));
$(this).addClass('open');
}
})
}
}
}(jQuery));
jQuery(function() {
Drupal.behaviors.giftTypes.init();
});;
(function($) {
$("#ctl00_btnSearch001").on("click", function() {
var searchVal = $("#ctl00_txtSearch").val();
alert(searchVal);
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);;
Try to install jQuery update Module.
If you are using Drupal 6, you are not be able to use on function.
One option is to include your custom version of jQuery in your page.tpl.php, another option (not recommended) is to use live, but now is deprecated.
You can bind a function to an event use two way:
1.use bind() method and the event name as the first argument
$( "#foo" ).bind( "click", function() {
alert( "User clicked on 'foo.'" );
});
or
2.just use the event method
$( "#foo" ).click( function() {
alert( "User clicked on 'foo.'" );
});
The problem of your code is that there isn't a on event.
ref http://api.jquery.com/category/events/mouse-events/
If ctl00_btnSearch001 is a correct id for what ever you are trying to click. Try changing it to this:
(function ($){
$(document).on("click", "#ctl00_btnSearch001", function(){
var searchVal = $("#ctl00_txtSearch").val();
window.location.href = "http://www.mywebsite.org/search/?sa=Search&q=" + searchVal;
});
})(jQuery);
I'm trying to implement a fancy Yes No confirm and I'm having problems getting the callback to work as needed. The example below is using Fancybox v2.
The problem with the code below is that the function "do_something" is being call when HREF "Test" is clicked and not being called when the user clicks #fancyConfirm_ok.
function fancyConfirm(msg,callback) {
var ret;
jQuery.fancybox({
'modal' : true,
'content' : "<div style=\"margin:1px;width:240px;\">"+msg+"<div style=\"text-align:right;margin-top:10px;\"><input id=\"fancyconfirm_cancel\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Cancel\"><input id=\"fancyConfirm_ok\" style=\"margin:3px;padding:0px;\" type=\"button\" value=\"Ok\"></div></div>",
'afterShow' : function() {
jQuery("#fancyconfirm_cancel").click(function() {
ret = false;
//jQuery.fancybox.close();
$.fancybox.close();
})
jQuery("#fancyConfirm_ok").click(function() {
ret = true;
jQuery.fancybox.close();
})
},
'afterClose' : function() {
if (typeof callback == 'function'){
callback.call(this, ret);
} else {
var callback_type = typeof callback;
alert(callback_type);
}
}
});
}
Test
Your method "do_something('a', 'b')" will be executed whenever user clicks on the link and the returned result will be passed as the second parameter to the "fancyConfirm" method. This is why your parameter "callback" is always "undefined".
There is also a problem with fancyBox - "afterClose" callback gets called twice - before opening and after closing (this will be changed in the next release).
I would bind a click event on the link and call a callback when user clicks on one of the buttons, like - http://jsfiddle.net/xcJFY/1/
Not a big fan of the double callback method (Sorry Janis).
So while trying to find a solution to this myself played around with similar code and found that as long my return value wasn't defined inside the scope of the function it works fine, when my return value was defined inside the function I would get weird behaviour where it would work for a time then revert to undefined.
Effectively the return value needs to be outside the scope of the function, global, closure etc.
$(document).ready(function() {
$(".fancybox").on("click", function(e){
e.preventDefault();
confirm("Do you wish to continue?", true, function(resp) {
alert("You clicked " + resp);
});
});
});
function confirm(msg, modal, callback) {
$.fancybox("#confirm",{
modal: modal,
beforeShow: function() {
$(".title").html(msg);
},
afterShow: function() {
$(".confirm").on("click", function(event){
if($(event.target).is(".yes")){
ret = true;
} else if ($(event.target).is(".no")){
ret = false;
}
$.fancybox.close();
});
},
afterClose: function() {
callback.call(this, ret);
}
});
}
Here is a jsfiddle example
Thanks to Francisco Diaz who's post on Google Groups FancyBox forum pointed me in the right direction.
UPDATE:
Have now extended my example to use dynamically built buttons and custom return values, so you are not just limited to true and false.
$(document).ready(function() {
$(".fancybox").on("click", function(e){
e.preventDefault();
confirm("Do you wish to continue?", {
/*
Define your buttons here, can handle multiple buttons
with custom title and values
*/
buttons: [
{ class: "yes", type: "button", title: "Yes", value: "yes" },
{ class: "no", type: "button", title: "No", value: "no" },
{ class: "maybe", type: "button", title: "Maybe?", value: "maybe" }
],
modal: true
},
function(resp) {
alert("You clicked " + resp);
}
);
});
});
function confirm(msg, options, callback) {
$.fancybox("#confirm",{
modal: options.modal,
beforeShow: function() {
this.content.prepend("<p class=\"title\"></p>");
$(".title").html(msg);
for (i = 0; i < options.buttons.length; i++) {
this.content.append($("<input>", {
type: "button", class: "confirm " + options.buttons[i].class,
value: options.buttons[i].title
}).data("index", i));
}
},
afterShow: function() {
$(".confirm").on("click", function(event){
ret = options.buttons[$(event.target).data("index")].value;
$.fancybox.close();
});
},
afterClose: function() {
this.content.html("");
callback.call(this, ret);
}
});
}
Added jsfiddle example
You may find solution over this in many posts(Post 1 , Post2 ), but their solution not working for me.
Here is the normal jquery dialog box written by me.
$("#dialog").dialog({
autoOpen:false,
buttons:{
"ok":function(){
$(this).dialog("close");
return true;
},
"cancel":function(){
$(this).dialog("close"); return false;
}
}
});
I will open the dialogbox with code:
var returnVal=$("#dialog").dialog("open");
I need to return false,if user clicks 'cancel' and return true if user clicks 'ok'.
var returnVal=$("#dialog").dialog("open");
I NEED returnVal to return boolean value(true/false), but it returns javascript object.
You cannot return something from the OK / cancel functions as they are essentially event handlers that are only processed upon the click of a button.
Use a separate function to process the result :
$mydialog = $("#dialog").dialog({
autoOpen: false,
buttons: {
"ok": function() {
$(this).dialog("close");
processResult(true);
},
"cancel": function() {
$(this).dialog("close");
processResult(false);
}
}
});
$mydialog.dialog("open");
function processResult(result) {
alert(result);
}
Working example : http://jsfiddle.net/nz2dH/
I have implement Yes/No confirmation dialog with custom message and callback function like this. This is useful, if you like to use the same dialog for various purposes.
<script type="text/javascript">
// prepare dialog
$(function () {
$("#confirm-message-dialog").dialog({
autoOpen: false,
modal: true,
closeOnEscape: false,
buttons: {
Yes: function () {
$(this).dialog("close");
$(this).data("callback")(true);
},
No: function () {
$(this).dialog("close");
$(this).data("callback")(false);
}
}
});
});
// open dialog with message and callback function
function confirmMessageDialog (message, callback) {
$('#confirm-message-dialog-message').text(message);
$('#confirm-message-dialog').data("callback", callback).dialog("open");
};
</script>
<!-- The dialog content -->
<div id="confirm-message-dialog" title="Warning">
<p id="confirm-message-dialog-message"></p>
</div>
Hope that this helps others as well :)
I have a javascript function that calls another function, I am now facing a problem where I have to click a button twice to display a modal dialog box, I know the issue most likely lies in this line:
$('#dialog_link').click(function() because I already called 'modaldialog' with an onclick like this:
<input id="dialog_link" type="button" value="Save" onclick ="javascript:modaldialog();" />
How can I rewrite this line $('#dialog_link').click(function() to call function() without another click?
Thanks!
<script type="text/javascript">
function modaldialog() {
window.Page_ClientValidate();
if (window.Page_IsValid) {
$('#dialog_link').click(function() {
$('#dialog').dialog('open');
return false;
});
}}
</script>
<script type="text/javascript">
$(function() {
// Accordion
$("#accordion").accordion({ header: "h3" });
// Tabs
$('#tabs').tabs();
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
modal:true,
close: function() {
document.getElementById('dialog').style.display = 'block';
document.getElementById('fade').style.display = 'None';
},
buttons: {
"Ok": function() {
$(this).dialog("close");
document.getElementById('dialog').style.display = 'block';
document.getElementById('fade').style.display = 'None';
},
"Cancel": function() {
$(this).dialog("close");
document.getElementById('dialog').style.display = 'block';
document.getElementById('fade').style.display = 'None';
}
}
});
// Dialog Link
//$('#dialog_link').click(function() {
// $('#dialog').dialog('open');
// return false;
//});
// Datepicker
$('#datepicker').datepicker({
inline: true
});
// Slider
$('#slider').slider({
range: true,
values: [17, 67]
});
// Progressbar
$("#progressbar").progressbar({
value: 20
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
</script>
I'm not sure what your goal really is, but I don't think .click(func) does what you think it does. Since .click(func) adds that function as a click event listener every time you execute this line you would get an additional function in the listener set. You seem to be running this in your onClick meaning every time someone clicks your link you'll add another listener that does the same thing ($('#dialog').dialog('open');). If you just want your verification to be done before substituting the onClick handler you'll have to unbind the current function as well, but you might be better off just doing the check every time and calling $('#dialog').dialog('open') inside your if (window.Page_IsValid) block.
If what you really want is for modaldialog to be called only once and $('#dialog').dialog('open'); to be executed that time and every consecutive clicks do the following inside your conditional:
$('#dialog_link').unbind('click', this);
var f = function () { $('#dialog').dialog('open') }; // Function to replace onClick function.
$('#dialog_link').click(f);
f(); // Execute replacement function after assigning it.