I've been working on a custom alert box that has the same style as the rest of the website via jquery-ui. It was working well except that it wouldn't open more than once. As I was trying to fix that, I broke the whole thing some how, and now I get this error:
Node cannot be inserted at the specified point in the hierarchy" code: "3
Below is the code. doAlert() is a simple replacement for alert(). Later it will have more features. show_support() creates dialog box in a similar way to doAlert(), except that it works perfectly.
function doAlert(msg, title) {
var alert_box = $('body').append('<div id="alert_box" class="centered" style="padding:.5em;vertical-align:middle;display:none;"><p>' + msg + '</p></div>');
title = typeof(title) != 'undefined' ? title : 'Message';
alert_box.dialog({
modal: true,
title: title,
width: 400,
height: 150,
resizable: false,
overlay: {
opacity: 0.5,
background: 'black'
},
buttons: {
'Ok': function() {
$(this).dialog('close');
}
},
close: function() {
$(this).dialog('destroy').remove();
}
});
}
function show_support() {
var dialog = $('body').append('<div id="dialog_support" style="display:none;"></div>');
$('#dialog_support').load('/supporttracker', {action:'get_dialog'})
.dialog({
modal: true,
title: "Support",
width: 620,
height: 400,
buttons: {
"Send": function() {
if (!$('#issue_message').val()) {
doAlert('Your message cannot be blank. Please enter your message.');
return;
}
$.ajax({
type: 'POST',
url: '/supporttracker',
data: 'action=add_simple&'+$('#issue').serialize(),
success: function(msg){
doAlert('Thank you. We will get to your question/issue as soon as we can. Usualy within 24 hours.');
$('#dialog_support').dialog('close');
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
doAlert('An error accured: '+textStatus);
}
});
},
"Cancel": function() {$(this).dialog('close');}
},
close: function() {
$(this).remove();
}
});
}
Anyone have any ideas of how I messed up doAlert?
Look at the close method. doAlert seems to be doing a dialog('destroy'), then calling remove on it. show_support is simply removing the dialog from the DOM. I don't know what the dialog method returns so it may be that the DOM element isn't actually getting removed and thus reinserting it fails -- since you can't have to elements with the same id.
If it were me I'd create the dialog on page load (hidden), then simply update a message when it needs to be shown, and use open/close to reuse the element rather than recreating it.
<div id="alert_box" class="alert-dialog" style="display: none;">
<p id="alert_message">An error occurred.</p>
</div>
<script type="text/javascript">
$(function() {
$('#alert_box').dialog({
modal: true,
width: 400,
height: 150,
resizable: false,
overlay: {
opacity: 0.5,
background: 'black'
},
buttons: {
'Ok': function() {
$(this).dialog('close');
}
}
});
});
function doAlert( msg, title )
{
$('#alert_message').html(msg);
$('#alert_box').attr( 'title', title )
.dialog('open');
}
</script>
Related
I was wondering is there any way to show print button based on the argument passed in the function. Here is my code that creates dialog box:
alertInfo: function (message, title, height, width, print) {
$("<div></div>").dialog( {
buttons: {
"Ok": function () {
$(this).dialog("close");
},
//show/hide button if argument 'print' equals to 'Yes'
"Print": function() {
$(this).dialog().printArea();
},
},
close: function (event, ui) { $(this).remove(); },
resizable: false,
title: title,
modal: true,
width: height,
height: width,
overflow:'auto',
position: {
my: "center",
at: "center",
of: window
}
}).html(message);
}
This is the code where I'm passing the arguments in alerInfo() function:
$.alertInfo(infoTable,'User Info',800,600,'Yes');
I still did not get this to work and If I tried to put if statement around Print button error occurred. If anyone can help please let me know.
alertInfo: function(message, title, height, width, print) {
var buttons = {
"Ok": function() {
$(this).dialog("close");
}
};
if (print) buttons.print = function() {
$(this).dialog().printArea();
};
$("<div></div>").dialog({
buttons: buttons,
close: function(event, ui) {
$(this).remove();
},
resizable: false,
title: title,
modal: true,
width: height,
height: width,
overflow: 'auto',
position: {
my: "center",
at: "center",
of: window
}
}).html(message);
}
This assumes the print parameter is a boolean
$.alertInfo(infoTable,'User Info',800,600, true); // to show print button
$.alertInfo(infoTable,'User Info',800,600, false); // to not show print button
You're effectively passing an object to the buttons property:
{
"Ok": function () {
$(this).dialog("close");
},
"Print": function() {
$(this).dialog().printArea();
}
}
So what you can do is dynamically create that object based on your conditions and then set the dynamically created object to the property. It might look something like this:
// create the object
var myButtons = {
"Ok": function () {
$(this).dialog("close");
}
};
// conditionally add a "print" button
if (someCondition) {
myButtons.Print = function() {
$(this).dialog().printArea();
}
}
// use the object
$("<div></div>").dialog( {
buttons: myButtons,
close: function (event, ui) { $(this).remove(); },
// etc.
});
I am dynamically appending a <div> to the body of my webpage. This <div> does not exist on my .html page.
Within this <div> I am creating a Jquery UI YES NO box. Quite simply, it will 'do something' and close the box when YES, and just close the box when NO.
I have a working piece of code to create this box. However, frequently it takes two clicks of the YES button to work, which is very confusing. You'll see I have used a variety of methods to close the box.
$(function () {
$('body').append('<div id="dialog-confirm"></div>').click(function (e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
$("#dialog-confirm").dialog({
autoOpen: true,
height: 200,
width: 200,
modal: true,
title: 'Choose item?',
buttons:
{
'YES': function () {
$(this).dialog("close");
//$("#dialog-confirm").dialog("close");
//$('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
},
'NO': function () {
$(this).dialog("close");
//$("#dialog-confirm").dialog("close");
//$('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
}
}
});
});
The problem is that there is a race condition between your adding the div and attaching the click handler. Sometimes it happens before, sometimes after. That's why you get inconsistent click behavior. Try the following:
$(function() {
$('body').append('<div id="dialog-confirm"></div>');
$("#dialog-confirm").dialog({
autoOpen : true,
height : 200,
width : 200,
modal : true,
title : 'Choose item?',
buttons : {
'YES' : function() {
$(this).dialog("close");
// $("#dialog-confirm").dialog("close");
// $('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
},
'NO' : function() {
$(this).dialog("close");
// $("#dialog-confirm").dialog("close");
// $('body').remove('#dialog-confirm');
$('#dialog-confirm').remove();
}
}
});
$('#dialog-confirm').click(function(e) {
e.preventDefault();
$("#dialog-confirm").dialog("open");
});
});
I am displaying a dialog box on opening of the page. But the problem is when I click on one of the buttons of dialog box, the dialog box window does not close. I don't know why.
Here is my code :
$(document).ready(function() {
var x=$('#loginstatus').val();
if(x==1){
$("#dialog").html("Do You Want to go for Face Recognition and Detection?");
$("#dialog").dialog({
autoOpen: true,
modal: true,
title: "Permission for Face Recognition",
width: 600,
height: 300,
resizable: false,
buttons: {
"Yes,Why Not": function() {
$(this).dialog("close");
callback("1");
},
"No,Thanx": function() {
$(this).dialog("close");
callback("2");
}
}
});
}
});
And in html I have the dialog div and other necessary inputs.
Html:
<div name="dialog" id="dialog"></div>
<input type="hidden" name="loginstatus" id="loginstatus" value="<%=firstlogin%>"/>
test this, I made some changes in button :
$(document).ready(function() {
var x=$('#loginstatus').val();
if(x==1){
$("#dialog").html("Do You Want to go for Face Recognition and Detection?");
$("#dialog").dialog({
autoOpen: true,
modal: true,
title: "Permission for Face Recognition",
width: 600,
height: 300,
resizable: false,
buttons: {
"Yes,Why Not": function() {
callback("1");
$(this).dialog("close");
},
Cancel: function() {
callback("2");
$(this).dialog("close");
}
}
});
}
});
Try
$("#dialog").dialog('close');
instead of
$(this).dialog("close");
It's not quite recommended to use this unless you are absolutely sure about the scope.
$('#dialog').click(function() {
$('.dialog').hide();
});
yesterday I started working on a Jquery Dialog box to replace the default confirm box that jquery has... I came across an issue and all the tutorials I see tell me to use .submit() on my form but that does not seem to want to play nicely (or play at all for that matter)
This is the JSFIDDLE
And now this is my javascript that is not working for me :
<script>
$(document).ready(function() {
$(function() {
var currentForm;
$("#dialog-confirm").dialog({
resizable: false,
autoOpen: false,
draggable: false,
height: 310,
width: 500,
modal: true,
buttons: {
'Cancel': function() {
$(this).dialog("close");
},
'Enter Queue': function() {
currentForm.submit();
}
}
});
});
$("#signinform").submit(function() {
currentForm = this;
$('#dialog-confirm').dialog('open');
return false;
});
});
</script>
The problem is happening at the "Enter Queue" button. Pretty much the scenario (as it is shown on the jsfiddle) is I need users to acknowledge the rules of the office, and if they do so they click on a check-box, once they do so then they click Submit, which then sends a dialog explaining to the user what they are getting into. However for some reason the "Enter Queue" button does nothing. I am quite confused. Any help would be great.
Thanks
It's because your re-using the $(document).on('submit', "#signinform", function(e) method
which got e.preventDefault(); for first instruction when you call $('#signinform').submit();.
You need to set a temporary variable to see wether you come from your code or the submit button.
Here is a JSFiddle with a working test, but you should do something nicer =)
EDIT : Javascript is an asynchronous langage, it means that your $('#dialog-confirm').dialog('open'); doesn't block and just modify the html, so the submit event always will return false -> it will never be sent.
So I get that JSFiddle which not really works like you want but if you trigger the submit button a second time after clicked the Enter Queue button it will work, so i'm wondering why the submit() method don't work when called from here.
A method you could use is to send the form with ajax (look at post() in jquery) and then redirect your user with something like window.location = "yourpage".
Try this way (jsFiddle):
$(document).ready(function() {
window.enterQueue=false;
$("#signinform input:submit").on('click',function() {
return getDialog(window.enterQueue);
});
function getDialog(enterQueue){
if(!enterQueue){
$("#dialog-confirm").dialog({
resizable: false,
autoOpen: true,
draggable: false,
height: 310,
width: 500,
modal: true,
buttons: {
'Cancel': function() {
$(this).dialog("close");
},
'Enter Queue': function() {
window.enterQueue=true;
$(this).dialog("close");
$("#signinform input:submit").trigger('click');
}
}
});
return false;
} else
return true;
}
});
I figured it out last night with the help of jquery website and a lot of google-ing. Thanks to the both of you for your help and time it took for the answers. + 1
This is my solution :
<script type="text/javascript">
$(document).ready(function()
{
var Form = $("#signinform");
$(function()
{
$("#dialog-confirm").dialog(
{
resizable: false,
autoOpen: false,
dialogClass: "no-close",
draggable: false,
height: 320,
width: 500,
modal: true,
buttons:
{
'Cancel': function()
{
$(this).dialog("close");
Form.data("confirmProgress", false);
},
'Submit Information': function()
{
Form.submit();
Form.data("confirmProgress", false);
}
}
});
});
Form.submit(function()
{
if (!$(this).data("confirmProgress"))
{
$(this).data("confirmProgress", true);
$('#dialog-confirm').dialog('open');
return false;
} else {
return true;
}
});
});
// Everything under this is the Jquery for my second Dialog that has always been working, the issue was the above dialog which is now fixed.
$(document).on('click', "#Cancel", function(e)
{
e.preventDefault();
var href = '<?php echo base_url(); ?>studentlogin_controller/studentlogin';
$("#dialog-noconfirm").dialog(
{
resizable: false,
dialogClass: "no-close",
draggable: false,
height: 320,
width: 500,
modal: true,
buttons:
{
"Cancel": function()
{
$(this).dialog("close");
},
"Go Back": function()
{
window.location.href = href;
},
}
});
});
</script>
Ok i got this code:
$(document).ready(
function() {
$(".dialogDiv").dialog({
autoOpen: false,
modal: true,
position: [50, 50],
buttons: {
"Print page": function() {
alert("Print");
},
"Cancel": function() {
$(this).dialog("close");
}
}
}
);
$('.ui-dialog-buttonpane button:contains("Print page")').attr("id", "dialog_print-button");
$(".dialogDiv").parent().appendTo($('form'));
}
How do I assign or set a new function to the click event?
$("#dialog_print-button"). ???
Edit, This works:
$("#dialog_print-button").unbind("click").click(
function () {
alert("new function that overide the old ones")
}
)
Tried to find how to do in the jQuery documentation but I think it's hard to find around in the documentation. Especially when new to javaScript and the jQuery libary.
Edit, A fast way to get help is to go to jQuery irc channel :D
I think this would help:
$(".dialogDiv").dialog("option", "buttons", {
"Print page": function() { /* new action */ },
"Cancel": function() { $(this).dialog("close"); }
});
Because buttons property sets all the buttons, you have to include cancel button handler.
$("#Print page").click(function () {
...
});
Or maybe it should be
$("#dialog_print-button").click(function () {
...
});
jQuery UI dialog buttons now supports the "id" attribute natively.
$("#dialog-form").dialog({
autoOpen: false,
height: "auto",
width: 300,
buttons:
[
{
text: "Create Revision",
id: "btnCreateRev",
click: function () {
//code for creating a revision
}
},
{
text: "Cancel",
id: "btnCancel",
click: function () { $(this).dialog("close"); },
}
]
});
You put the code within the button section:
...
buttons: {
"Print page": function() {
//here you execute the code or call external functions as needed
}
Once you click the button on the Dialog, that code is automatically invoked.
Therefore you insert there directly the code that implements your logic.