I'm getting a firebug error:
missing : after property id
error source line:
if(jQuery.inArray(mmDialogButton.CANCEL, buttons)){
This is the surrunding code:
Edited post with update as I was unclear.
I am trying to create a framework for creating dialogues for a project.
In the dialogs there can be four predefined buttons.
The mmDialogButton is my attempt to an ENUM class.
The if statement is there to enable the buttons the user wanted to use in the dialog.
Here is some more code to illustrate.
mmDialog.js
...
function mmDialog(title, spawnerId, widget, buttons){
...
$dialog.html(widget.getInitialHTML())
.dialog({
autoOpen: false,
title: title + ' <img id="myJquerySpinner" />',
buttons: {
if(jQuery.inArray(mmDialogButton.CANCEL, buttons)){
Cancel: function() {
$( this ).dialog( "close" );
},
}
if(jQuery.inArray(mmDialogButton.NEXT, buttons)){
"Next": function() {
widget.doNext();
},
}
if(jQuery.inArray(mmDialogButton.PREVIOUS, buttons)){
"Previous": function() {
widget.doPrevious();
},
}
if(jQuery.inArray(mmDialogButton.OK, buttons)){
"Ok": function() {
widget.doOk();
}
}
}...
mmDialogButton.js
function mmDialogButton(){ // Constructor
}
mmDialogButton.CANCEL = function() { return "mmDBCancel"; };
mmDialogButton.OK = function() { return "mmDBOk"; };
mmDialogButton.NEXT = function() { return "mmDBNext"; };
mmDialogButton.PREVIOUS = function() { return "mmDBPrevious"; };
jsp/html page
var title = "Test Dialog";
var spawnerId = "myJqueryStarter";
var mmDialogButtons = new Array();
mmDialogButtons[0] = mmDialogButton.CANCEL;
mmDialogButtons[1] = mmDialogButton.OK;
mmDialogButtons[2] = mmDialogButton.NEXT;
mmDialogButtons[3] = mmDialogButton.PREVIOUS;
myPublishWidget = new mmPublishWidget();
myDialogPublishWidget = new mmDialogWidget(myPublishWidget);
myDialog = new mmDialog(title, spawnerId, myDialogPublishWidget , mmDialogButtons);
This:
buttons: {
if(jQuery.inArray(mmDialogButton.CANCEL, buttons)){
Cancel: function() {
$( this ).dialog( "close" );
},
should probably be:
buttons: (function() {
if(jQuery.inArray(mmDialogButton.CANCEL, buttons))
return {
Cancel: function() {
$( this ).dialog( "close" );
}
};
return null;
})()
though it's hard to tell. What it looks like you're trying to do is conditionally set that "buttons" property to some object with a labeled handler (that little "close" function). However, the code you posted is syntactically nonsensical. The change I made wraps the "inArray" test in an anonymous function that returns the button object only when that test is true.
Again, I'm just guessing that that's what you were trying to do.
I think you mean to execute the "close" only if CANCEL is in buttons, if it's the case you can write:
buttons: {
Cancel: function() {
if(jQuery.inArray(mmDialogButton.CANCEL, buttons)){
$( this ).dialog( "close" );
}
},
....
EDIT:
you can define the buttons dictionary beforehand as you like, the pass it to .dialog(:
dialog_buttons = {}
if(jQuery.inArray(mmDialogButton.CANCEL, buttons)){
dialog_buttons[Cancel] = function() {
$( this ).dialog( "close" );
}
}
if(jQuery.inArray(mmDialogButton.NEXT, buttons)){
dialog_buttons["Next"] = function() {
widget.doNext();
}
}
if(jQuery.inArray(mmDialogButton.PREVIOUS, buttons)){
dialog_buttons["Previous"] = function() {
widget.doPrevious();
}
}
if(jQuery.inArray(mmDialogButton.OK, buttons)){
dialog_buttons["Ok"] = function() {
widget.doOk();
}
}
$dialog.html(widget.getInitialHTML())
.dialog({
autoOpen: false,
title: title + ' <img id="myJquerySpinner" />',
buttons: dialog_buttons
}...
Related
I'm using the below code for tooltip display for click event
Html Component:
Test<br>
JQuery:
$(document).on("click", ".tooltip", function() {
$(this).tooltip(
{
items: ".tooltip",
content: function(){
return $(this).data('description');
},
close: function( event, ui ) {
var me = this;
ui.tooltip.hover(
function () {
$(this).stop(true).fadeTo(400, 1);
},
function () {
$(this).fadeOut("400", function(){
$(this).remove();
});
}
);
ui.tooltip.on("remove", function(){
$(me).tooltip("destroy");
});
}
}
); // this is the line i'm getting "Expected Identifier, string or number".
$(this).tooltip("open");
});
I'm using jquery 1.9.1.js and jquery-ui.1.9.2.js. But I'm getting "Expected Identifier, string or number".
EDIT: Error resolved, but still I'm not getting tool tip on click event. Could someone tell me where I went wrong?
This Codepen: http://codepen.io/anon/pen/EjVBOW seems to work for me with your code and latest jQuery and jQuery UI. Did it get resolved for you?
$(document).on("click", ".tooltip", function() {
$(this).tooltip({
items: ".tooltip",
content: function() {
return $(this).data('description');
},
close: function(event, ui) {
var me = this;
ui.tooltip.hover(
function() {
$(this).stop(true).fadeTo(400, 1);
},
function() {
$(this).fadeOut("400", function() {
$(this).remove();
});
}
);
ui.tooltip.on("remove", function() {
$(me).tooltip("destroy");
});
}
}); // this is the line i'm getting "Expected Identifier, string or number".
$(this).tooltip("open");
});
I have to create a confirm modal box of jquery that works as default confirm box that return true or false and works across the project.
I call it this way....
var result = confirm("Are you sure you want exit");
if(result == false)
return false;
else{
//somethings are done here
}
and in a Main.js written it's implementation as following ..
function confirm(message){
$("#alert_cust_message").html(message);
var returnValue = false;
$("#myAlert").dialog({
modal: true,
minHeight: 100,
buttons: {
"OK": function()
{
$( this ).dialog( "close" );
returnValue = true;
},
Cancel: function()
{
$( this ).dialog( "close" );
returnValue = false;
}
}
});
$("#myAlert").parent().css('font-size','9pt');
return returnValue;
}
Now the problem that i am facing is about the return value ...
I am not get the expected returns, I think it is due to asynchronous dialog.
Now can this be solved easily ?
Any help will be appreciated .. Thanks
You need to use a callback
function confirm(message, callback) {
$("#alert_cust_message").html(message);
var returnValue = false;
$("#myAlert").dialog({
modal: true,
minHeight: 100,
buttons: {
"OK": function () {
$(this).dialog("close");
callback(true);
},
Cancel: function () {
$(this).dialog("close");
callback(false);
}
}
});
$("#myAlert").parent().css('font-size', '9pt');
}
then
confirm('some message', function (result) {
if (result) {}
})
Demo: Fiddle
Let's say I have function1 which needs the results of function2 before it can continue.
But function2 gets what it needs by triggering a Jquery dialog window to open, and prompting the user to select one of two buttons.
The selection of the two buttons then causes function2 to do its work and pass that along to function1.
How do I get the value that the buttons give when selected in the dialog window back to function2.
See code below.
$('#choice-dialog').dialog({
autoOpen: false,
resizable: false,
height:140,
modal: true,
buttons: {
"Proceed": function() {
$( this ).dialog( "close" );
true //the value to be sent to function2;
},
Cancel: function() {
$( this ).dialog( "close" );
false //the value to be sent to function2;
}
}
});
function function1(){
if(function2(variable)===true){
return true
}
}
var function2 = function(variable){
if(idIsUsed){
$("#choice-dialog").dialog("open");
return **choice made by user via dialog**;
}else{
return true;
}
}
You cannot do it this way. It is better to restructure your code such that the dialog callbacks call another function with true or false:
$('#choice-dialog').dialog({
autoOpen: false,
resizable: false,
height:140,
modal: true,
buttons: {
"Proceed": function() {
$( this ).dialog( "close" );
otherFunction(true);
},
Cancel: function() {
$( this ).dialog( "close" );
otherFunction(false);
}
}
});
var function2 = function(variable){
if(idIsUsed){
$j("#choice-dialog").dialog("open");
} else {
otherFunction(true);
}
}
I am using ASP.NET MVC 4, jQuery, and jQuery UI.
I have a dialog on my view. When I click a button the dialog pops up, takes the values on the dialog and send its through to a service. The service does what it needs to do and will either send back a blank message if it is successful or the actual error message. After this I need to check the error on the client side, close the current dialog and open a success dialog or the error dialog. I'm not sure how to close the current dialog and to display another dialog.
My button:
<button id="TestButton" type="button">Display pop up</button>
My dialogs:
<div id="confirmationDialog"></div>
<div id="successDialog"></div>
<div id="errorDialog">error dialog</div>
my jQuery code:
$('#TestButton').click(function () {
$('#confirmationDialog').dialog('open');
});
$('#errorDialog').dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 500,
title: 'Add Rule Detail Error',
buttons: {
'Ok': function () {
$(this).dialog('close');
}
}
});
$('#confirmationDialog').dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 330,
title: 'Add Rule Detail Confirmation',
open: function (event, ui) {
$(this).load('#Url.Action("AddRuleConfirmation")' +
'?systemCode=' + $('#SystemCode').val());
},
buttons: {
'Yes': function () {
var url = '#Url.Action("AddRuleConfirmationSubmit")';
var data = {
systemCode: $('#SystemCode').val()
};
$.getJSON(url, data, function (message) {
alert(message);
if (message == '') {
$(this).dialog('close');
}
else {
$(this).dialog('close');
$('#errorDialog').dialog('open');
}
});
},
'No': function () {
$(this).dialog('close');
}
}
});
My action methods:
public ActionResult AddRuleConfirmation(string systemCode)
{
DetailConfirmationViewModel viewModel = new DetailConfirmationViewModel()
{
SystemCode = systemCode
};
return PartialView("_AddRuleConfirmation", viewModel);
}
public ActionResult AddRuleConfirmationSubmit(string systemCode)
{
CreateRuleViewModel viewModel = new CreateRuleViewModel()
{
SystemCode = systemCode
};
ResCodeRuleAdd_Type result = ruleService.AddRule(viewModel);
string message = string.Empty;
if (result != ResCodeRuleAdd_Type.R00)
{
// Get the error message from resource file
message = ...
}
return Json(message, JsonRequestBehavior.AllowGet);
}
How do I close the current pop up after the get JSON call and open another?
You have to add the dialog to the page first: Put this prior to your current:
$('#errorDialog').dialog({
autoOpen: false,
modal: true,
resizable: false,
width: 330,
title: 'My Error Dialog'
});
//current code follows:
$('#confirmationDialog').dialog({
Then what you have should work.
EDIT: I thought about this a bit, you probably need to fix the scope of the $(this) inside the success handler.
change to do:
var myDialog = $('#confirmationDialog').dialog({
and then use:
myDialog.dialog('close');
inside that handler to close the first dialog.
In the getJSON callback close the window
$.getJSON( "test/demo", function( data) {
if(data==='success'){
$( ".selector" ).dialog( "close" );
$( ".selector" ).dialog( "open" );
}
});
To close the jquery UI dialog use this
$( ".selector" ).dialog( "close" );
Top Open a new dialog
$( ".selector" ).dialog( "open" );
for more info check the api of jquery UI http://api.jqueryui.com/dialog/#method-close
var dialogAviso;
url = "search.php";
$.ajax( {
"type": "POST",
"url": url,
"data": data,
"global": false,
"async": true,
"success": function(html){
msg_title ="Search";
msg_width = "600px";
showDialog(html,msg_title,msg_width);
}
} );
function showDialog(texto, titulo, width,height){
.......................
// IMPORTANT: send info to the aux variable, so you can access it from the dialog.
dialogAviso = $('#divaviso').dialog({
autoOpen: true,
width: width,
height:height,
modal:true,
resizable: false,
title: titulo,
dialogClass: 'dialog',
closeOnEscape:true,
beforeClose: function(){
},
close: function(event, ui) {
$(this).dialog( "destroy" );
},
show: "slide",
zindex: 100,
stack:true,
buttons: {}
});
$('#divaviso').html(texto);
}
search.php:
<table>
<tr>
<td><a style=\"text-decoration:underline;cursor:pointer;\" onclick="returnInfo(8)">Hello World</td>';
</tr>
</table>
functin returnInfo (id){
// Do something with the selected item
// close dialog
dialogAviso.dialog("close");
}
For the purpose of globalization I need to translate buttons in jquery dialog, but when I try to pass variable I don't get value of variable, just name of it.
var RemoveDialogButton = "#FriendsNamesNS.FriendsNames.Remove";
var CancelDialogButton = "#FriendsNamesNS.FriendsNames.Cancel";
//alert(RemoveDialogButton);
$( "#dialog-confirm" ).dialog({
autoOpen: false,
resizable: false,
height:190,
modal: true,
buttons: {
RemoveDialogButton: function() {
$( this ).dialog( "close" );
$('#yesno').click();
return true;
},
CancelDialogButton: function() {
$( this ).dialog( "close" );
}
}
});
RemoveDialogButton: {
click: function() {
$( this ).dialog( "close" );
$('#yesno').click();
return true;
},
text: RemoveDialogButton
}
var buttons= {};
buttons[your text] = function() { ....};
$('.selector').dialog({
buttons: my_buttons
});