So i'm trying to load tabs in a modal window, and it's not calling the JS .tabs() method im wondering what i'm doing wrong:
http://jsfiddle.net/uMTC7/24/
I don't know if there is a conflict between the bootstrap tab() method, but i suppose it could be a possibility.
$('.launcher').on('click',function() {
var domhtml ='<div id="tabs">'+
'<ul>'+
'<li>Nunc tincidunt</li>'+
'<li>Proin dolor</li>'+
'<li>Aenean lacinia</li>'+
'</ul>'+
'<div id="tabs-1"><p>Tab 1 Stuff</p></div>'+
'<div id="tabs-2">'+
'<p>Tab 2 Stuff</p></div>'+
'<div id="tabs-3"><p>Tab 3 Stuff</p></div></div>';
BootstrapDialog.show({
title: 'Draggable Dialog',
message: domhtml,
draggable: true,
buttons: [{
label: 'Cloze',
cssClass: 'btn-primary',
action: function(dialog){
dialog.close();
}
}]
});
//this does not load:
$( "#tabs" ).tabs();
});
Your script would start executing as soon as your document is ready, binding all the events to the corresponding elements. Since your div#tabs is created only on click of the button, and is not available prior to that, none of the events would get bound to it.
Hence, you have to pass your elements with all the handlers attached. You can do that either as shown below, or you can bind them within your click function and pass the final variable to the message option. Updated fiddle here
BootstrapDialog.show({
title: 'Draggable Dialog',
message: function(dialog){
var $content = $(domhtml);
$($content).tabs();
return $content;
},
draggable: true,
buttons: [{
label: 'Cloze',
cssClass: 'btn-primary',
action: function(dialog){
dialog.close();
}
}]
});
Related
I'm new to jquery, and one of my first tasks was to make a dynamic table. I managed to create a button that deletes the table row on click and it worked perfectly, the problem is, when i added a confirmation box for the user, and assigned the function to remove the tr to it, it stopped working.
i've tried several things inside the button function, but it seems like either way the button only closes the alert box and the tr remains untouched.
//This works just fine, it deletes the selected tr without any issue
but it needs a confirmation from the user
$(document).on('click','.delete', function(){
$(this).parents('tr').remove();
}
//This is my code for the confirmation box including the shown function in the action for the button
$(document).on('click','.delete', function(){
$.alert({
useBootstrap:false,
columnClass: 'small',
title: 'Are you sure you want to delete the task?',
content: 'This action is irreversible',
type: 'red',
typeAnimated:true,
icon:'fas fa-exclamation-triangle',
typeAnimated: true,
buttons: {
Delete: {
text: 'Delete',
btnClass: 'btn-red',
action: function(){
$(this).parents('tr').remove();
$.alert({
title:'Task deleted',
icon:'fas fa-exclamation-triangle',
type:'red',
content:'',
useBootstrap:false
});
}
},
close: function () {
}
}
});
});
To sum it up, i understand how to delete the tr with .remove(), but i don't understand why it doesn't work inside the alert function. Thank you for your time.
When you register the click event, you are registering it to an element or elements with the class of .delete. Therefore, inside the click handler function, this refers to the element that was clicked.
When you are inside the .alert function of jquery-confirm, this refers to a different element (probably the button in the dialog, depending on how jquery-confirm is implemented), so the parent of that element is not the tr that you are looking for.
Try assigning $(this) to a variable before you make the call to $.alert, like this:
$(document).on('click','.delete', function(){
var buttonClicked = $(this); //assign to a variable here
$.alert({
useBootstrap:false,
columnClass: 'small',
title: 'Are you sure you want to delete the task?',
content: 'This action is irreversible',
type: 'red',
typeAnimated:true,
icon:'fas fa-exclamation-triangle',
typeAnimated: true,
buttons: {
Delete: {
text: 'Delete',
btnClass: 'btn-red',
action: function(){
buttonClicked.parents('tr').remove(); //reference that variable here
$.alert({
title:'Task deleted',
icon:'fas fa-exclamation-triangle',
type:'red',
content:'',
useBootstrap:false
});
}
},
close: function () {
}
}
});
});
Here is and a screenshot I uploaded for you I have edited my post, according to your advice in comments, posting my updated version of my code.I enclose in /**/ my original post for helping you.
/*In jointJS I try using a `ui.dialog` to delete all my graph with the following code:
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
dialog.on('action:ok', this.graph.clear, this.graph);
dialog.on('action:cancel', dialog.close, dialog);
dialog.open();
},
After pressing OK button I successfully delete my graph but my dialog still remains without being able to delete it.
Any help please? */
Here is my updated code which unfortunately still doesn't work as expected. I remind you that in this dialog form which displays an OK and Cancel button I want the following ones:
1)When pressing OK I want to :
a)Delete my current graph And
b)Close my dialog
2)When pressing Cancel I want to:
Close my dialog (Which in my initial version worked successfylly with dialog.close)
openNew: function() {
// By pressing Create New Process button, a popup form asks for
//our confirmation before deleting current graph
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
//Since in 'action:ok' of dialog.on the 3rd parameter is used in the
//callback of multi_hand we must pass dialog and graph both together.To do so
//we enclose them in an object named together and we pass it instead
together= {dialog : dialog, graph : this.graph};
//Since jointJS supports assigning multiple events for same handler
//BUT NOT multiple handlers for the same event we create function multi_hand
multi_hand: function (together)
{
together.graph.clear();
together.dialog.close();
}
dialog.on('action:ok', multi_hand, together);
dialog.on('action:cancel', dialog.close, dialog);
dialog.open();
},
By using this new code my joinjtJS project crashes unexpectedly.
How will I make OK button work please?
The third argument in dialog.on is the context passed into the callback function (2nd argument). It says, what is bind to this in the callback function.
In your example is not clear where the graph is defined, if it is really this.graph. However, you can simply do it like in the following example, without passing the context:
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 650,
height: 400,
model: graph,
linkPinning: false
});
var r = new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: 100, height: 40 },
}).addTo(graph);
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Confirm',
content: '<b>Are you sure?</b>',
buttons: [
{ action: 'yes', content: 'Yes' },
{ action: 'no', content: 'No' }
]
});
dialog.on('action:yes', function() {
graph.clear();
dialog.close()
});
dialog.on('action:no', dialog.close, dialog);
dialog.open();
if the graph is defined on this:
dialog.on('action:yes', function() {
this.graph.clear();
dialog.close();
}, this);
I solved my problem this way and I just want to share it with all of you as a reference.
openNew: function() {
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
dialog.on('action:ok', this.graph.clear, this.graph);
dialog.on('action:ok action:cancel', dialog.close, dialog);
dialog.open();
},
I am using qtip2 for displaying the alert messages for my web application ( as shown at http://craigsworks.com/projects/qtip2/demos/#dialogues )
my code is
1) for dialogue
function dialogue(content, title) {
/*
* Since the dialogue isn't really a tooltip as such, we'll use a dummy
* out-of-DOM element as our target instead of an actual element like document.body
*/
$('<div />').qtip(
{
content: {
text: content
, title: {
text: 'PMGSY ',
button: 'Close'
}
},
position: {
my: 'center', at: 'center', // Center it...
target: $(window) // ... in the window
},
show: {
ready: true, // Show it straight away
modal: {
on: true, // Make it modal (darken the rest of the page)...
blur: false, // ... but don't close the tooltip when clicked
escape: false
}
},
hide: false, // We'll hide it maunally so disable hide events
style: {
classes: 'qtip-shadow qtip-rounded qtip-dialogue', // Optional shadow...
widget: true //themeroller
},
events: {
// Hide the tooltip when any buttons in the dialogue are clicked
render: function (event, api) {
$('button', api.elements.content).click(api.hide);
},
// Destroy the tooltip once it's hidden as we no longer need it!
hide: function (event, api) { api.destroy(); }
}
});
}
2) to call it as alert
function Alert(message) {
// Content will consist of the message and an ok button
var message = $('<p />', { text: message }),
ok = $('<button />', { text: 'Ok', 'class': 'full' });
dialogue(message.add(ok), 'Alert!');
}
the problem is when i use it ,its does not block the further processing until user click on ok button (like default alert function).
e.g this alert does not even show up.
Alert("Customised alerts"); //this doesent show
window.location.replace("/Home/startPage");
how to make my custom alert mimic the default alert function ?
Please help
Replace
ok = $('<button />', { text: 'Ok', 'class': 'full' });
with
ok = $('<button />', { text: 'Ok', 'class': 'full' }).click(function(){
window.location.replace("/Home/startPage");
});
I have a little question about the click event and qtip2.
After the first click on element $j('a[href^="/i/"]'), when I move again over it, the bubble appears. I would like that the bubble appears everytime I click on the element.
My code:
$j('a[href^="/i/"]').click(function(event) {
event.preventDefault();
$j(this).qtip({
content: {
title: {
text: title_qtip,
button: true,
},
text: text_qtip,
},
show: {
// event: false, <-- doesn't work
solo: true,
ready: true
},
hide: false,
});
// $j('a[href^="/i/"]').unbind('click'); <-- doesn't work
// $j('a[href^="/i/"]').unbind('onmouseover').unbind('onmouseout'); <-- doesn't work
});
First of all, don't declare your qTip2 function inside of an event handler. You don't want to declare a new qTip every time the object is clicked. All you have to do is change the event line in the show function. It should be:
$j(document).ready(function(){
$j('//selector').qtip({
content: {
title: {
text: title_qtip,
button: true,
},
text: text_qtip,
},
show: {
event: 'click',
solo: true,
ready: true
},
hide: false,
});
}
This will trigger the tool tip when the selector ($j(//your selector)) is clicked on.
Here is an updated fiddle: http://jsfiddle.net/LJwLh/1101/
It seem that your problem is the use of an a tag. There is no reason to use that tag if you are not going to link to anything.
I'm using alert() to output my validation errors back to the user as my design does not make provision for anything else, but I would rather use jQuery UI dialog as the alert dialog box for my message.
Since errors are not contained in a (html) div, I am not sure how to go about doing this. Normally you would assign the dialog() to a div say $("#divName").dialog() but I more need a js function something like alert_dialog("Custom message here") or something similiar.
Any ideas?
I don't think you even need to attach it to the DOM, this seems to work for me:
$("<div>Test message</div>").dialog();
Here's a JS fiddle:
http://jsfiddle.net/TpTNL/98
Using some of the info in here I ended up creating my own function to use.
Could be used as...
custom_alert();
custom_alert( 'Display Message' );
custom_alert( 'Display Message', 'Set Title' );
jQuery UI Alert Replacement
function custom_alert( message, title ) {
if ( !title )
title = 'Alert';
if ( !message )
message = 'No Message to Display.';
$('<div></div>').html( message ).dialog({
title: title,
resizable: false,
modal: true,
buttons: {
'Ok': function() {
$( this ).dialog( 'close' );
}
}
});
}
Building on eidylon's answer, here's a version that will not show the title bar if TitleMsg is empty:
function jqAlert(outputMsg, titleMsg, onCloseCallback) {
if (!outputMsg) return;
var div=$('<div></div>');
div.html(outputMsg).dialog({
title: titleMsg,
resizable: false,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
},
close: onCloseCallback
});
if (!titleMsg) div.siblings('.ui-dialog-titlebar').hide();
}
see jsfiddle
Just throw an empty, hidden div onto your html page and give it an ID. Then you can use that for your jQuery UI dialog. You can populate the text just like you normally would with any jquery call.
As mentioned by nux and micheg79 a node is left behind in the DOM after the dialog closes.
This can also be cleaned up simply by adding:
$(this).dialog('destroy').remove();
to the close method of the dialog.
Example adding this line to eidylon's answer:
function jqAlert(outputMsg, titleMsg, onCloseCallback) {
if (!titleMsg)
titleMsg = 'Alert';
if (!outputMsg)
outputMsg = 'No Message to Display.';
$("<div></div>").html(outputMsg).dialog({
title: titleMsg,
resizable: false,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
},
close: function() { onCloseCallback();
/* Cleanup node(s) from DOM */
$(this).dialog('destroy').remove();
}
});
}
EDIT: I had problems getting callback function to run and found that I had to add parentheses () to onCloseCallback to actually trigger the callback. This helped me understand why: In JavaScript, does it make a difference if I call a function with parentheses?
DAlert jQuery UI Plugin Check this out, This may help you
I took #EkoJR's answer, and added an additional parameter to pass in with a callback function to occur when the user closes the dialog.
function jqAlert(outputMsg, titleMsg, onCloseCallback) {
if (!titleMsg)
titleMsg = 'Alert';
if (!outputMsg)
outputMsg = 'No Message to Display.';
$("<div></div>").html(outputMsg).dialog({
title: titleMsg,
resizable: false,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
},
close: onCloseCallback
});
}
You can then call it and pass it a function, that will occur when the user closes the dialog, as so:
jqAlert('Your payment maintenance has been saved.',
'Processing Complete',
function(){ window.location = 'search.aspx' })
There is an issue that if you close the dialog it will execute the onCloseCallback function. This is a better design.
function jAlert2(outputMsg, titleMsg, onCloseCallback) {
if (!titleMsg)
titleMsg = 'Alert';
if (!outputMsg)
outputMsg = 'No Message to Display.';
$("<div></div>").html(outputMsg).dialog({
title: titleMsg,
resizable: false,
modal: true,
buttons: {
"OK": onCloseCallback,
"Cancel": function() {
$( this ).dialog( "destroy" );
}
},
});
Use this code syntax.
$("<div></div>").html("YOUR MESSAGE").dialog();
this works but it append a node to the DOM.
You can use a class and then or first remove all elements with that class.
ex:
function simple_alert(msg)
{
$('div.simple_alert').remove();
$('<div></div>').html(is_valid.msg).dialog({dialogClass:'simple_alert'});
}