I am using a Modal dialog to prompt user a message. It works fine in IE but shows only first row in firefox. How can i fix this. This is how my message is formatted.
var modal = "<div id='modal_pop'><table><tr><td> "
+ "Please check you have a valid value to proceed.<br> Change the value if possible. Value should be valid to proceed further.<br>"
+ "Value should not be a number or a special case character<br>
Make changes and save the work before exiting it.<br> "
+ "Click logoff now or continute using the application.</td> </tr> </table></div>";
and this is the jQuery dialog:
var showPopup = function() {
$(modal).dialog({
buttons: {
"Test": function() {
//ABC
},
"Test1": function() {
//XYZ
}
},
modal: true,
width: 430,
height: 100,
resizable:'yes',
scroll:'no'
});
}
try to set the width to auto width: 'auto' and check. I think the text is getting cut because of overflow.
Related
I'm using typeahead.js and it's great but here's my use case: I have a text field that is already filled in with a string on the server side when the page is loaded, so I don't want the suggestions menu to be shown when the user focuses the text field.
typeahead.js seems to always show the menu when focusing the text field. This makes sense since minLength is 2 and the text field value is something like "Tony" (or whatever). But I've tried using hint: false and calling $('.typeahead').typeahead('close') inside a callback for the typeahead:active event, and neither seem to stop the menu from being shown.
Here's the init code I'm using:
$('#locationInput').typeahead({
hint: false,
highlight: false,
minLength: 2
},
{
name: 'locations',
display: 'name',
source: typeaheadLocations, // a simple Bloodhound instance
templates: {
suggestion: function(locationObj) {
return $('<div>' + locationObj.name + '</div>');
}
}
});
There is a slight delay between when I focus the text field and the menu is actually shown, because the remote GET has to be run. So I'm guessing I would need to prevent that somehow, after it's focused.
Looks like closing the menu in the typeahead:open event does the trick, but this seems pretty hack-ish to me. :(
$('#locationInput').typeahead({
hint: true,
highlight: true,
minLength: 2
},
{
name: 'locations',
display: 'name',
source: typeaheadLocations,
templates: {
suggestion: function suggestion(locationObj) {
return $('<div>' + locationObj.name + '</div>');
}
}
}).on('typeahead:open', function(e) {
var $input = $(e.currentTarget);
if (!$input.data('wasFocusedOnce')) {
$input.data('wasFocusedOnce', true);
$input.typeahead('close');
}
}).on('typeahead:close', function(e) {
$(e.currentTarget).removeData('wasFocusedOnce');
}).on('keydown', function(e) {
$(e.currentTarget).data('wasFocusedOnce', true);
});
If anyone knows of a better way to do this, I'm all ears!
I have a problem -> I do some logic in angular js and when the logic is found something the user gets an error using dialog box from jquery ui.
In Angular function i need to display the pop up.
The pop up is displayed correctly but i get an error if i look in debug mode.
The error :
Error: [$rootScope:inprog] http://errors.angularjs.org/1.2.6/$rootScope/inprog?p0=%24apply
I don't understand why is it happening?
my function in order to present pop up :
function dialogWithOneButton(message,title, callbackOnOK){
var htmlString = "<div id=\"modalConfirm\" class=\"bold\" title=\""+title+"\">" + message + "</div>";
var dialogButtons = {};
var approveButtonText = messageToUser.dialogOkButton;
dialogButtons[approveButtonText] = {
text: approveButtonText,
class:'btnApprove btnDialog onlyOneButton',
click:function() {
if (callbackOnOK)
callbackOnOK();
$(this).dialog("destroy");
}
};
$(htmlString).dialog({
height: 205,
width:330,
modal: true,
resizable: false,
buttons:dialogButtons
});
}
I am trying to build a generic function that I can invoke from anywhere in the application by passing custom parameters to the jQuery UI confirmation dialog. I have been searching and trying different things but the following is the logic I would like to use. What am I doing wrong? Any help is much appreciated.
Here is the function:
function popDialog(h, w, deny_btn, confirm_btn, confirm_title, confirm_message, deny_action, confirm_action) {
var newDialog = $('<div id="dialog-confirm">\
<p>\
<span class="ui-icon ui-icon-alert" style="float: left;margin: 0 7px 60px 0;"></span>\
' + confirm_message + '\
</p>\
</div>');
newDialog.dialog({
resizable: false,
height: h,
width: w,
modal: true,
autoOpen:false,
title: confirm_title,
buttons: [
{text: deny_btn: click: function() {deny_action}},
{text: confirm_btn: click: function() {confirm_action}}
]
});
}
Here is the call:
$("#cancel").click(function(e) {
popDialog("210", // height
"350", // width
"No", // deny_btn
"Yes", // confirm_btn
"Confirm Cancel", // confirm_title
"Are you sure you would like to cancel? Changes will not be saved.", // confirm_message
$('#dialog-confirm').dialog('close'), // deny_action
window.location = '/some/location/index/<?= $class->getClassid() ?>'); //confirm_action
});
So there are a number of issues with this, and I think the best way to tackle them all would be a small refactor. I put the code into jsfiddle for testing and tinkering, and here's what came out:
http://jsfiddle.net/BDh2z/1/
Code is reproduced below:
function popDialog(opts) {
var newDialog = $('<div id="dialog-confirm"><p>'+opts.message+'</p></div>');
if (!$('#dialog-confirm').length){ $('body').append(newDialog); }
newDialog.dialog({
resizable: false,
modal: true,
title: opts.title,
height: opts.height,
width: opts.width,
buttons: opts.buttons
});
};
So above is the new function definition. Things simplified a good amount. Let's go over the changes:
function accepts a options object rather than a bunch of args for clarity
modal html is more simple and clear
autoOpen: false removed, as this prevents the modal from opening without an open() call
button syntax was completely borked in your example, fixed that up and delegated the buttons object to the call, their syntax is quite clean anyway.
actually adds the modal to the html, but only adds it once
Now here's the call:
popDialog({
width: 300,
height: 150,
title: 'testing modal',
message: 'look it worked!',
buttons: {
cancel: function(){ $(this).dialog('close') },
confirm: function(){ $(this).dialog('close') }
}
});
Much cleaner here and easier to understand, mostly because of the fact that we now accept an object rather than a bunch of args. The only issue I found was a weird fluke where jquery UI seems to be collapsing the content section, so I dropped an ugly fix for that in the css of the jsfiddle. This seems to be an issue with jquery UI, but I'll continue to look into it.
This is totally functional in the jsfiddle and looking nice, let me know if there's anything confusing here or if this doesn't exactly solve your issue : )
I think the problem is that you are passing the return value of:
$('#dialog-confirm').dialog('close')
and
window.location = '/some/location/index/<?= $class->getClassid() ?>'
to your popDialog function. You want to do this instead:
Function:
buttons: [
{text: deny_btn, click: deny_action},
{text: confirm_btn, click: confirm_action}
]
Call:
$("#cancel").click(function(e) {
popDialog("210", // height
"350", // width
"No", // deny_btn
"Yes", // confirm_btn
"Confirm Cancel", // confirm_title
"Are you sure you would like to cancel? Changes will not be saved.", // confirm_message
function() { $('#dialog-confirm').dialog('close') }, // deny_action
function() { window.location = '/some/location/index/<?= $class->getClassid() ?>') }; //confirm_action
});
That way you are passing functions to popDialog, and not values.
Just to explain the multi-line problem (can't with comments, but can with answers):
var bad = 'Invalid
syntax';
--
var good = 'Valid' +
'syntax';
I would like to pass the function some javascript to be executed when the user presses one of the buttons, but currently when I press the "No" or "Yes" buttons on the dialog box nothing happens, it just sits there...no error shows in firebug. If I hard code "alert('hi')" into the dialog button it works fine, so there must be something in passing the javascript as part of the function parameters.
How can I get this to work? Thanks in advance.
Heres my javascript function:
function confirm_yes_no(xtitle,msg, btn_yes_txt, btn_no_txt, btn_yes_js, btn_no_js)
{
var button_yes = btn_yes_txt;
var button_no = btn_no_txt;
var dialog_buttons = {};
dialog_buttons[button_yes] = function(){ btn_yes_js }
dialog_buttons[button_no] = function(){ btn_no_js }
$("#modal_confirm_yes_no").html(msg);
$("#modal_confirm_yes_no").dialog({
title: xtitle,
bgiframe: true,
autoOpen: false,
height: 150,
width: 300,
modal: true,
buttons: dialog_buttons
});
$("#modal_confirm_yes_no").dialog("open");
}
Here's how I call the function:
confirm_yes_no("Print Checks", "Would you like to print checks now?", "Yes", "No", "alert('you clicked yes');", "alert('you clicked no');");
If btn_yes_js is a reference to a Javascript function just do:
dialog_buttons[button_yes] = btn_yes_js;
and likewise for btn_no_js.
If instead what you're saying is that btn_yes_js is a string containing the source of a JS function, and it appears that you are - DON'T DO THAT!!
Your call should look like:
confirm_yes_no("Print Checks", "Would you like to print checks now?", "Yes", "No",
function() {
alert('you clicked yes');
},
function() {
alert('you clicked no');
}
);
i.e. pass in references to functions (anonymous functions in this example), not strings that would have to be passed to the nasty, horrible, never-ever-use-on-pain-of-death eval() function.
See http://jsfiddle.net/alnitak/WHeRF/
I'd also note that your code ultimately will need more work, since whilst you're registering callback handlers, neither of them actually close down or destroy the dialog box.
You'll actually need something more like:
dialog_buttons[button_yes] = function() {
$('#modal_confirm_yes_no').dialog('close').dialog('destroy');
btn_yes_js.call(ctx);
}
i.e. a local function which closes the dialog box cleanly, and then invokes the relevant callback function. You may wish to add your own ctx variable which will become the value of this within your callbacks.
You could pass in actual functions for the last two arguments.
function handleNo() {
alert('you clicked no');
}
function handleYes() {
alert('you clicked yes');
}
confirm_yes_no(
"Print Checks",
"Would you like to print checks now?",
"Yes",
"No",
handleYes,
handleNo);
Then you would change these two lines inside your main function
dialog_buttons[button_yes] = btn_yes_js;
dialog_buttons[button_no] = btn_no_js;
I think you would be better off having the alert inside of the called function, and passing the message you want to output in the alert to the function.
Pass them as functions instead.
function confirm_yes_no(xtitle,msg, btn_yes_txt, btn_no_txt, btn_yes_js, btn_no_js)
{
var button_yes = btn_yes_txt;
var button_no = btn_no_txt;
var dialog_buttons = {};
dialog_buttons[button_yes] = btn_yes_js
dialog_buttons[button_no] = btn_no_js
$("#modal_confirm_yes_no").html(msg);
$("#modal_confirm_yes_no").dialog({
title: xtitle,
bgiframe: true,
autoOpen: false,
height: 150,
width: 300,
modal: true,
buttons: dialog_buttons
});
$("#modal_confirm_yes_no").dialog("open");
}
Call it by:
confirm_yes_no("Print Checks", "Would you like to print checks now?", "Yes", "No", function() { alert('you clicked yes'); }, function() { alert('you clicked no'); } );
Instead of taking JS strings, you should just take callbacks.
function confirm_yes_no(xtitle,msg, btn_yes_txt, btn_no_txt, yesCallBack, noCallBack)
{
var button_yes = btn_yes_txt;
var button_no = btn_no_txt;
var dialog_buttons = {};
dialog_buttons[button_yes] = yesCallBack;
dialog_buttons[button_no] = noCallBack;
$("#modal_confirm_yes_no").html(msg);
$("#modal_confirm_yes_no").dialog({
title: xtitle,
bgiframe: true,
autoOpen: false,
height: 150,
width: 300,
modal: true,
buttons: dialog_buttons
});
$("#modal_confirm_yes_no").dialog("open");
}
Then you can call it like
confirm_yes_no("Print Checks",
"Would you like to print checks now?", "Yes", "No",
function() {alert('you clicked yes');},
function() {alert('you clicked no');}
);
Change to
dialog_buttons[button_yes] = btn_yes_js;
dialog_buttons[button_no] = btn_no_js;
And send the function directly
confirm_yes_no("Print Checks", "Would you like to print checks now?", "Yes", "No",
function() {
alert('you clicked yes');
},
function() {
alert('you clicked no');
});
You can execute it calling the function:
dialog_buttons[button_yes]();
dialog_buttons[button_no]();
btn_yes_js();
btn_no_js();
It would be a lot simpler and easier to just use the built-in ok/cancel prompt:
if (window.confirm("Would you like to print checks now?")) {
alert("You clicked yes");
} else {
alert("You clicked no");
}
How can we create a confirmation alert in javascript with a save and discard button in it?
If we use the code
confirm('Do you want to save it?');
We will get an alert box with ok cancel.
How can we make the text of ok button as save and the other as discard?
You cannot modify the default javascript method "confirm". But, you can override it, for example, with jQuery UI dialog:
window.confirm = function (message) {
var html = "<div style='margin:20px;'><img style='float:left;margin-right:20px;' src='/img/confirm.gif' alt='Confirm'/><div style='display:table;height:1%;'>" + message + "</div></div>";
$(html).dialog({ closeOnEscape: false,
open: function (event, ui) { $('.ui-dialog-titlebar-close').hide(); },
modal: true,
resizable: false,
width: 400,
title: "Confirmation",
buttons: {
"Save": function () {
//Do what you need
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
}
this is not possible
more answers
Connect some of the tons JS framework. For example jQuery+UI
Overwrite window.confirm method, by makin it as wrapper to your favorite JS UI framework.
PROFIT!!!