Develop Reference

JQuery dialog is not closing, reference error

I have came across a problem. The dialog in my code doesn't seem to be closing. I have done it previously and worked fine, but this time I can't get my head around what the problem might be.
Here is opening the dialog:
$('#container').dialog({
'autoOpen': false,
'modal': true,
'buttons': [{
text: "Ok",
click: function() {
And an attempt to close:
success: function(json) {
if (json.status == 'S') {
alert('Recipe added!');
document.getElementsByName('itemCode[]').value = '';
$(dialog).dialog("close");
}
Firebug returns
ReferenceError: dialog is not defined
I have done it the exact same way in other files and works fine. Any help is appreciated!

call your dialog container to close :
$( "#containter" ).dialog( "close" );

You need to close the open dialog box div by using id of that dialog box :
$( "#containter" ).dialog( "close" );

Modal dialog of the url not working?

Sorry this is driving me nuts but my modal dialog box is not showing up when I switch button to a link. Basically for this functionality (sorry I had to take company sensitive data out so some of the code is missing but still works) I just want the editors to put in a link with an id or class and that link doesn't work but the address opens a dialog box with the address url in it.
I have this working with a button but this does not work with a link and code below. Also they are manually entering link into p-tag and wondering if it can be captured via href.
$(function() {
var dialog, form,
tips = $( ".validateTips" );
function addUser() {
var valid = true;
allFields.removeClass( "ui-state-error" );
valid = valid && checkLength( name, "username", 3, 16 );
valid = valid && checkLength( email, "email", 6, 80 );
valid = valid && checkLength( password, "password", 5, 16 );
valid = valid && checkRegexp( name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );
valid = valid && checkRegexp( email, emailRegex, "eg. ui#jquery.com" );
valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
if ( valid ) {
$( "#users tbody" ).append( "<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>" );
dialog.dialog( "close" );
}
return valid;
}
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
});
form = dialog.find( "form" ).on( "submit", function( event ) {
event.preventDefault();
addUser();
});
$( "#create-link" ).a().on( "click", function(e) {
e.preventDefault();
dialog.dialog( "open" );
});
});
<div>Perma-link</div>
<div id="dialog-form" title="Link Address">
<p class="validateTips">https://xyz</p>
</div>
Note - I completely understand that it is odd to capture a link in a modal box but we must do this because the vendor does not display the full active link in the url. So when our users try to share the page they copy the url in browser which takes other users no where. The link here takes them to the permanent page. I know this is stupid but needed.

When you look up an element with a jQuery selector, it returns a jQuery object that you can call jQuery defined methods on.
In your code, you have:
$( "#create-link" ).a().on( "click", function(e) {
e.preventDefault();
dialog.dialog( "open" );
});
The object returned by $("#create-link") is a jQuery object of the a tag in your html. You can only call jQuery methods on that object. The method a() is not defined as far as I know in jQuery or jQuery UI. Remove that.
As for the link itself, it doesn't make sense to add a link and then block the action of clicking the link. I'm guessing you aren't understanding the requirements, based on this comment:
the UI guys wanted me to hand it over as a link. So the last part of
this was moving the button to a link and then making the href
automatically populate the validateTips section
That reads to me like they want you to provide the user with a link.

I don't think your click event is firing when you click the link. Why not say
$( "#create-link" ).on( "click", function(e) {
e.preventDefault();
dialog.dialog( "open" );
});
Simply removing the a(). should fix things.
See here http://jsfiddle.net/eos4c25w/1/

JQuery: Loading content into dynamic tabs with load()

I have a main menu, where if I click on any of the options a tab is dynamically created in a div. So I can create up to nine tabs of different options out there in the main menu.
The javascript code I use to create and delete tabs is as follows:
$(document).ready(function () {
$("#tabs").tabs();
var tabCounter = 1;
var cont =1;
var num_tabs = $("#tabs ul li").length +1,
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabs = $( "#tabs" ).tabs();
// actual addTab function: adds new tab using the input from the form above
function addTab() {
var label = tabTitle || "Tab " + tabCounter,
id = "tabs-" + tabCounter,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ),
tabContentHtml = "Tab " + tabCounter + " content.";
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.append( "<div id='" + id + "'></div>" );
tabs.tabs( "refresh" );
cont++;
}
// close icon: removing the tab on click
tabs.delegate( "span.ui-icon-close", "click", function() {
var panelId = $( this ).closest( "li" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
cont--;
});
tabs.bind( "keyup", function( event ) {
if ( event.altKey && event.keyCode === $.ui.keyCode.BACKSPACE ) {
var panelId = tabs.find( ".ui-tabs-active" ).remove().attr( "aria-controls" );
$( "#" + panelId ).remove();
tabs.tabs( "refresh" );
}
});
$(".menuitem a").click(function(event) {
event.preventDefault();
if(cont<=9)
{
tabTitle = $(this).attr("title"),
addTab();
$("#tabs-"+tabCounter).load($(this).attr('href'));
tabCounter++;
$("#tabs").tabs({active: $('.ui-tabs-nav li:last').index()});
}
else
{
$( "#dialog-message" ).dialog({
modal: true,buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
}
});
});
I wanted to get it by adding a tab is activated and show your content, so I added:
$("#tabs").tabs({active: $('.ui-tabs-nav li:last').index()});
Until there all right, I could show up to 9 tabs, but missing your content, it would be a path Symfony,for example:
<li class ="menuitem">test</li>
Then I added the following code to load this route into the div:
$("#tabs-"+tabCounter).load($(this).attr('href'));
And the result is that the content for each tab appears, but it only appears automatically activates the first tab does not show me the warning dialog that can not display more than 9 tabs. The code above is something that affects others and I can not get a solution to this problem.
Besides this problem, I need to know how to get that pressing an option from the main menu, if there is an open tab with that content to put the active tab and display its contents, instead of opening another like (there can be two tabs of the same content).
If there is a better way to do this, I would like to know.
I'm a newbie, so I apologize for how to explain it.

How to prevent javascript Stack Overflow on a jQuery droppable?

Here's what I am doing:
I have an accordion from which I need to be able to drag and drop a li element in an editable div and upon the drop I need to open a dialog box which has some additional options,which upon selection need to be appended to the original li element.
This is what the script looks like:
jQuery("#formula").droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function (event, ui)
{
/* Popup logic */
symbolicKey = ui.draggable.attr('title');
symbolicId = ui.draggable.attr('id');
var res = symbolicId.split(".");
if(res[0] == "customIndex")
{
jQuery("#periodOnly").dialog("open");
}
else
{
jQuery(this).find(".placeholder").remove();
jQuery("<span class='vt' id=" + symbolicId + " contenteditable=false></span>").text("[" + symbolicKey + "]").appendTo(this);
}
}
});
jQuery("#periodOnly").dialog({
autoOpen: false,
modal: true,
buttons: {
"OK": function()
{
var period = $('select[property="customPeriod"]').val();
symbolicId = symbolicId + "."+period;
symbolicKey = symbolicKey + "."+period;
jQuery("#formula").find(".placeholder").remove();
jQuery("<span class='vt' id=" + symbolicId + " contenteditable=false></span>").text("[" + symbolicKey + "]").appendTo("#formula");
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$( this ).dialog( "close" );
}
});
From my understanding, its these two functions which are calling each other recursively and thereby causing a stack overflow however I cant seem to find any alternative to solving the problem i.e removing the recursion.
Any help is appreciated.

Turns out it was the close method for the dialog box which was causing the recursion! Silly on my part!

Javascript Event Delegtion -- Adding a timepicker to a popup form

I am attempting to create a timepicker inside of a popup form. I am struggling with event delegation -- I am capable of getting the timepicker to work outside of the form, but not inside.
My current code, which does not have the timepicker popup:
$(document).ready(function() {
$('#timepick').timepicker({
showPeriod: true,
showLeadingZero: true
});
});
$(function() {
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add Time": function() {
$( "#time-table tbody" ).append( "<tr>" +
"<td>" + time.value + "</td>" +
"</tr>" );
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
$("#add-time").button().click(function() {
$( "#dialog-form" ).dialog( "open" );
});
});
This does not work inside of the popup box, only for #timepick outside of it. I know I somehow need to utilize the .on() jquery function.
$(document).ready(function() {
$('#timepick').on("click", function(){
timepicker({
showPeriod: true,
showLeadingZero: true
});
});
Did not work either.
A pastebin of the current tryout:
http://pastebin.com/gta7TD47
EDIT:
So this MOSTLY works:
$(document).ready(function() {
$('#dialog-form').on('click','#time',function() {
$('#time').timepicker({
showPeriod: true,
showLeadingZero: true
});
});
});
The only problem is, it currently requires you to click on the box, which then adds the event handler, and then click off and click back on -- so it requires a click before working. How do I get it to fire immediately? Somehow using .trigger()?

You're not delegating anything. You're merely binding the event directly on the timepick element.
If you want to delegate an event, you'll need an aditional selector:
$('body').on('click','.allElementsYouNeedSelector',function(){});
The code above will apply the anonymous callback function as an event handler for all click events that are triggered on any element that has the allElementsYouNeedSelector class, anywhere in the $('body') tag.
So if you want to delegate from, say your dialog-form element:
$('#dialog-form').on('click','*',function()
{//will be called when any child of the #dialog-form is clicked
});
Mind you, if you use the on method like this, it's translated to the delegate method internally.
Update:
In light of your update, I must say: it makes no sense at all to delegate an event for an element that has a unique ID. Perhaps you could try this:
$('#time').on('click',{showPeriod: true,showLeadingZero: true},timepicker);
This binds a click listener to the #time element, and applies the timepicker method as an event handler, passing the object literal {showPeriod: true,showLeadingZero: true} as an argument, just like you're doing. Of course, you can do the same thing using delegation:
$('#dialog-form').on('click','*',function()
{//regardles of which child was clicked, apply the timepicker method to #time
$.timepicker.apply($('#time'),[{showPeriod: true,showLeadingZero: true}]);
});
As ever, to avoid having to scan the DOM on each call, you can add a closure
$('#dialog-form').on('click','*',(function(time)
{
return function()
{
time = time || $('#time');//in case $('#time') didn't exist when function was created
$.timepicker.apply(time,[{showPeriod: true,showLeadingZero: true}]);
};
}($('#time')));

Try this,
$(document).ready(function()
{
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add Time": function() {
$( "#time-table tbody" ).append( "<tr>" +
"<td>" + time.value + "</td>" +
"</tr>" );
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$("#add-time").click(function() { //don't use buttun() here
$( "#dialog-form" ).dialog( "open" );
});
$('#time').timepicker({ //use the correct id attr of text field
});
});//end of document
/////Html part/////
<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="time">Time</label>
<input type="text" id="time" name="time" style="width: 70px;" id="timepick" value="01:30 PM" />
</fieldset>
</form>
</div>
<button id="add-time">Add time</button>
hope this helps