We Keep Coding

How to append modal dialog to div?

I've designed a modal dialog that opens on the click of a button, here is the javascript and html for it;
JAVASCRIPT
var ModalEffects = (function() {
function init() {
var overlay = document.querySelector( '.md-overlay' );
[].slice.call( document.querySelectorAll( '.md-trigger' ) ).forEach( function( el, i ) {
var modal = document.querySelector( '#' + el.getAttribute( 'data-modal' ) ),
close = modal.querySelector( '.md-close' );
function removeModal( hasPerspective ) {
classie.remove( modal, 'md-show' );
if( hasPerspective ) {
classie.remove( document.documentElement, 'md-perspective' );
}
}
function removeModalHandler() {
removeModal( classie.has( el, 'md-setperspective' ) );
}
el.addEventListener( 'click', function( ev ) {
classie.add( modal, 'md-show' );
overlay.removeEventListener( 'click', removeModalHandler );
overlay.addEventListener( 'click', removeModalHandler );
if( classie.has( el, 'md-setperspective' ) ) {
setTimeout( function() {
classie.add( document.documentElement, 'md-perspective' );
}, 25 );
}
});
close.addEventListener( 'click', function( ev ) {
ev.stopPropagation();
removeModalHandler();
});
} );
}
init();
})();
HTML
<div class="md-modal md-effect-16" id="modal-16">
<div class="md-content">
<h3>Remember Rules</h3>
<div>
<p>There are certain rules you must obey, if you don't your account will be banned:</p>
<ul>
<li><strong>Swearing:</strong> cursing or any other form of cursing is not allowed.</li>
<li><strong>Hacking:</strong> trying to hack any component of the application is a t.o.u violation.</li>
<li><strong>Heckling:</strong> constantly calling a moderator will kick you off the server.</li>
</ul>
<button class="md-close">Close me!</button>
</div>
</div>
</div>
<div id="interface">
<textarea name="para" placeholder="type your paragraph here"></textarea>
</div>
<center><button class="md-trigger" data-modal="modal-16">Blur</button></center>
For some reason I can't get it to append to the "interface" div, I've used the appendTo jquery which failed me, the interface div is 600x200, currently atm the modal dialog which has an overlay behind it, covers the entire body and I'd like it to specifically cover the interface div.
The CSS is very basic, a green dialog box with some text on it and an overlay behind it.

Here is a FIDDLE that at least partially addresses your question.
If you attach a .dialog to an element it tends to "become" or "coverup" that element.
So in the fiddle above, I've attached the .dialog to a smaller div that is not displayed within the larger div, and opened the dialog with a click on the larger div.
If you look at the jQuery documentation for .dialog, you'll see that the purpose of the modal is to block out every potential interaction on the page, forcing the user to interact with the modal only. So when you use the modal, the entire page/body/window with be grayed-out.
I suppose you could write your own modal and just gray-out the large div.
Do you really need to just gray-out the div?
edit: or you could add appendTo: '.bigdiv'
JS
var $dialogpopup = $( ".littlediv" ).dialog({
autoOpen: false,
width: 150,
height: 150,
modal: true,
position: {
my:'top center',
at: 'top center',
of: '.bigdiv'
}
});
$('.bigdiv').on('click', function(){
$dialogpopup.dialog('open');
});

jQuery UI 1.7 - get title option among multiple scripts

Proper abstraction aside, how can I grab the 'title' option of a jQuery dialog amongst multiple scripts?
For example, below I have 2 scripts where the first returns a var as a string, where the other does not return the variable as a string:
<script>
$(function() {
$( ".scheduleDiv" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
Cancel: function() {
$( this ).dialog( "close" );
}
});
$( ".device-modal" )
.click(function() {
$( ".scheduleDiv" ).dialog({"title": $(this).attr('title')});
alert($( ".scheduleDiv" ).dialog('option', 'title'));
var single = $(this).dialog('option', 'title'); //works as expected
$( ".scheduleDiv" ).dialog( "open" );
return false;
});
});
</script>
<script>
$(document).ready(function() {
$('.locks').hide();
$('.device_groups').hide();
var single = $(this).dialog('option', 'title'); //is undefined...
if (single == "Add Single Lock") {
$('.locks').show();
//$('.locks select').removeAttr('disabled');
}
else {
$('.device_groups').show();
//$('.device_groups select').removeAttr('disabled');
}
});
</script>
So, how can I set 'single' to return the title as a string in the second script?
Many Thanks

Your context of this is likely not correct. When you handle the $(document).ready() event, this is the document. You need to manually grab your dialog window, and then get the title:
$('.scheduleDiv').dialog('option', 'title');
The code you are using to get the title is firing ondocumentready, but your initialization doesn't actually set a title. You are not setting the title until you click the 'deviceModal'. At that point, the code to log the title will not get re-fired, as the document only loads once.

Click in jQuery UI dialog box triggerd multiple times

I have a strange problem with a delete button in a jQuery dialog box. What should happen is that once the delete button is clicked, it looks up the value of the hidden input button and sends that value to an ajax call to delete the content. So every click should only show the single id that belongs to the last clicked button.
What actually happens with the first click it that it shows the correct value. But when you then click the next button, it will first show the previous id and then the new id, so the ajax call is made twice. If you would click on a third button, it will show three ids, and make three ajax calls which is not what should happen. It should stick with a single ajax call with each click and only show the latest id.
You can see an example here http://jsfiddle.net/uF5fX/11/, with the ids shown in the console.
Any ideas on what I'm doing wrong, and how to fix this?
$("#item-list").on( "click", ".delete-item", function( e ) {
var dialogBox = $("#delete-confirmation"),
storeId = $(this).next('input[name="store_id"]').val();
console.log( 'main clicked store id = ' + storeId );
dialogBox.dialog({
width: 325,
resizable : false,
modal: true,
minHeight: 0
});
$(".ui-dialog-titlebar").remove();
dialogBox.find(".button-secondary").on( "click", function() {
dialogBox.dialog("close");
});
dialogBox.find(".button-primary").on( "click", function( elem ) {
console.log( 'click delete btn' );
console.log( 'ajax store id = ' + storeId );
dialogBox.dialog("close");
//make a singe ajax call with the last storeId
//elem.stopImmediatePropagation();
elem.stopPropagation();
elem.preventDefault();
return false;
});
e.stopPropagation();
e.preventDefault();
return false;
});
Structure of the html
<ul id="item-list">
<li>
<input type="button" value="Delete" name="text" class="delete-item" />
<input type="hidden" value="60" name="store_id" />
</li>
</ul>
Normally when multiple clicks are triggered it can be fixed with return false, or preventDefault / stopPropagation but it makes no difference here?

Every time you click 'delete-item', dialogBox buttons bind anther new event.
dialogBox.dialog({
width: 325,
resizable : false,
modal: true,
minHeight: 0
});
$(".ui-dialog-titlebar").remove();
var btn1 = dialogBox.find(".button-secondary");
var btn2 = dialogBox.find(".button-primary");
btn1.on( "click", function() {
dialogBox.dialog("close");
btn1.unbind('click');
btn2.unbind('click');
});
btn2.on( "click", function( elem ) {
console.log( 'click delete btn' );
console.log( 'ajax store id = ' + storeId );
dialogBox.dialog("close");
//make a singe ajax call with the last storeId
//elem.stopImmediatePropagation();
elem.stopPropagation();
elem.preventDefault();
btn1.unbind('click');
btn2.unbind('click');
return false;
});

A more structured way to approach this issue would be defining standard actions for your close and Cancel event of the dialog.
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
hide: { effect: "blind", duration: 1000 },
show: { effect: "blind", duration: 1000 },
height: 600,
width: 350,
modal: true,
buttons: {
Cancel: function() {
console.log('dialog cancelled');
dialog.dialog( "close" ); // trigger the close event
}
},
close: function() {
console.log('dialog closed');
var btn2 = dialog.find("#create-user"); // change the #id to the name of your button
btn2.unbind('click'); //unbind the button.
}
});
The next time you then trigger the dialog and bind the on("click") event listener, it will only be added once instead of incrementing the amount of binds.
It is then unbound every time the dialog is closed (and cancelled since it triggers the close event).

Dialog, datapicker get id

I am somewhat new to javascript and need to integrate couple plugins for one project. Is there a way to get customer_id (that was gotten when the dialog window was opened, and suggested by autocomplete) into "Create new job" button location.
I want to close first dialog after user clicks "Create new job" and then open new dialog window, but I want to pass customer_id from the first dialog window into second dialog window. There might be some dialog and autocomplete interaction that I might not understand, I just can't get customer_id before I call new_job() function.
$(function() {
$( "#dialog-name" ).dialog({
autoOpen: false,
})});
function customer_funct(){
$( "#dialog-name" ).dialog( "open" )
$(function() {
var name = $( "#name" );
$( "#name" ).autocomplete({
source: "suggest_name.php",
minLength: 2,
select: function( event, ui ) {
var customer_id = ui.item.customer_id;
// I am able to get customer_id here,
//now I need to pass it to the function below.
}
});
$( "#dialog-name" ).dialog({
autoOpen: false,
height: 300,
width: 500,
modal: true,
buttons: {
"Create new job": function() {
$( this ).dialog( "close" );
cust_name = (name.val());
// is there any way to get "customer_id" at this location
// before I call new_job() function after the user selects customer
// from the database and clicks "Create new job"?
new_job(customer_id, cust_name);
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});

By default the select event ui parameter only contains a "label" and "value" property
JQuery UI Autocomplete Success Event
In order to access a custom property you would need to explicitly add it after you retrieve your data via an ajax call. Similar to this post.

I guess I answer the question myself after some thinking. If someone else is working on jQuery autocomplete and dialog interaction, and if you need to open the new dialog window (in new_job(customer_id))with the id value from the previous dialog window and close that previous dialog window on success:
$(function() {
$( "#dialog-name" ).dialog({
autoOpen: false,
})});
function customer_funct(){
$( "#dialog-name" ).dialog( "open" )
$(function() {
var name = $( "#name" );
$( "#name" ).autocomplete({
source: "suggest_name.php",
minLength: 2,
select: function( event, ui ) {
var customer_id = ui.item.customer_id;
new_job(customer_id);
$(this).val(''); return false;
}
});
$( "#dialog-name" ).dialog({
autoOpen: false,
height: 300,
width: 500,
modal: true,
buttons: {
"Create new job": function() {
alert('Please select customer or click "Add New" customer');
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
}

jquery prevent default seems stuck on and requires additional click

I'm writing a jquery plugin to display a jquery ui dialog when links are clicked to provide a confirmation dialog before the link is followed.
The problem i'm having is that when closing the dialog using the "Yes" button, the plugin uses $(element).trigger( 'click' ); to fire the click event on the original anchor element.
This does not cause the browser to follow the link, however a second click with my mouse after the dialog closes does work.
The plugin is used like this $('a').submitConfirm();
Here is the plugin
;(function ( $, window, document, undefined )
{
var pluginName = "submitConfirm";
var Plugin = function( element )
{
var confirmed = false;
var dialog = $( '<div style="display:none;">' )
.html( 'Visit this link?' )
.dialog(
{
modal: true,
title: 'Visit Link?',
autoOpen: false,
buttons :
[
{
text: 'Yes',
click: function( event )
{
confirmed = true;
dialog.dialog( "close" );
$(element).trigger( 'click' );
}
},
{
text: 'No',
click: function( event )
{
confirmed = false;
dialog.dialog( "close" );
}
}
]
});
$(element).bind( 'click',
function( event )
{
if ( ! confirmed )
{
dialog.dialog( "open" );
event.preventDefault();
}
});
};
// Init the plugin
$.fn[pluginName] = function( options )
{
return this.each(function ()
{
// Prevent re-instantiation
if ( !$.data(this, 'plugin_' + pluginName) )
{
$.data(this, 'plugin_' + pluginName,
new Plugin( this, options ));
}
});
};
})( jQuery );

You have to pass a function containing what you want to do to the plugin.
Add this line when you are setting the default parameters for the plugin at the bottom of your javascript.
$(function()
{
$('a').submitConfirm(
{
html: 'Are you sure?',
onConfirm: function(event){ // Do what you want in this function.
alert('Confirmed.. Now what?.. Redirect?.. ?? ');
// window.location = $(this).attr('href'); // redirect
},
beforeShow: function( dialog )
{
dialog.html( 'visit google?' );
}
});
});
Update
Check out this JSfiddle --> http://jsfiddle.net/kmTtQ/6/
I changed the lines below. Basically, we want to add a .click event to the element, then .trigger('click') that click.
if ( confirmed ){
console.log( element, elementEvent, event.isDefaultPrevented );
// .on() = jQuery 1.7+, for < 1.7 use .bind or .live. Aliases of .on() as of 1.7
$(element).on('click', function(){ // bind our element with the click
event.view.window.location = element.href; // on click redirect
});
$(element).trigger( 'click' ); // We want to trigger the ^ click event ^
}