I am trying to simulate the internal javascript function prompt with the jQuery UI dialogs.
Almost work perfectly - just one minor error :-)
When the dialog is shown a second time (without a page reload) the text in the input field is not selected - why.
I use this code:
function modalprompt(text, title, prompt, callback) {
var newDiv = $("<div title='" + title + "'/>");
function okreply() {
newDiv.dialog("close");
if (callback) callback($("#promptid").val());
}
function cancelreply() {
newDiv.dialog("close");
if (callback) callback(false);
}
newDiv.keyup(function (e) {
if (e.keyCode == 13) {
okreply();
}
});
/*
newDiv.focus(function()
{
this.select();
});
*/
var htmltext = "<p>" + text + "</p>";
htmltext += "<input id='promptid' type='text' name='promptid' value='" + prompt + "' style='width: 100%; box-sizing: border-box; -webkit-box-sizing:border-box; -moz-box-sizing: border-box;'>";
newDiv.html(htmltext).dialog({
modal: true,
width: 480,
show: "blind",
hide: "blind",
focus: function (event, ui) {
$("#promptid").select();
},
open: function (event, ui) {
$("#promptid").select();
},
create: function (event, ui) {
$("#promptid").select();
},
buttons: [{
text: $.alerts.okButton,
click: function () {
okreply();
}
}, {
text: $.alerts.cancelButton,
click: function () {
cancelreply();
}
}]
});
}
You can test it yourself here: http://pcrypt.dk/dev/login.php?logout
Just activate the link "ModalPrompt test" 2 times
Must be something relating to the fact that the second time shown the dialog is already created. All the $("#promptid").select(); calls do fire without any result so something must change this afterwards?
Thank you in advance!
Benny
OK I do not know why it dows not work, but adding this event handler:
close: function(event, ui) { newDiv.remove(); },
Does the trick. So somehow when there is more that one div created the selected call goes to the first div and does not affect the shown dialog.
Related
I am woking with jQuery UI and I made an attempt to create a "to do list" app. I have it functioning up to a point, but the task won't display correctly in the sort div I have attempted to create. It's supposed to display as a "bar" with a delete button and a completed option. But it currently displays as text. Am I supposed to incorporate jQuery directly inline in the html as well?
Here is my fiddle of the app in it's current state:
Todo List App FIDDLE
I will display only the jQuery portion of the coding. The complete version is on the Fiddle.
$("document").ready(function() {
$('#due_date').datepicker();
$('#add_task').button({ icons: { primary: "ui-icon-circle-plus" } }).click(function() {
$('#new_task').dialog('open'); }); // end click
$('#new_task').dialog({ width: 350,
height: 300,
modal: true,
autoOpen: false,
close: function() {
$('#new_task input').val(' '); /*clear fields*/
}, buttons: {
"Add Task" : function() {
var task_name = $('#task').val();
var due_date = $('#due_date').val();
var begin_li = '<li><span class="done">%</span><span class="delete">x</span>';
var task_li = '<span class="task">' + task_name + '</span>';
var date_li = '<span class="due_date">' + due_date + '</span>';
var end_li = '</li>';
$('#task_list').prepend(begin_li + task_li + date_li + end_li);
$('#task_list').hide().slideDown(250).find('li:first')
.animate({ 'background-color':'rgb(255,255,204)' },250)
.animate({ 'background-color':'white'},750)
.animate;
// end animate
$(this).dialog('close');
}, "Cancel" : function() {
$(this).dialog('close');
}
}
});
// end dialog
//Marking as complete
$('#task_list').on('click', '.done', function() {
var task_item = $(this).parent('li');
var $this = $(this);
$this.detach();
$('#completed_list').prepend($this);
$this.slideDown();
});
});
//Sortable
$('.sortlist').sortable({
connectWith: '.sortlist',
cursor: 'pointer',
placeholder: 'ui-state-highlight',
cancel: '.delete,.done'
});
//Delete
$('.sortlist').on('click','.delete', function() {
task_item.effect('puff', function() {
$(this).remove();
});
});
Help and guidance is greatly appreciated!
One problem is with your click event. You are only moving the .done span element to the completed list. Try this:
$('#task_list').on('click', '.done', function () {
var $this = $(this);
var task_item = $this.parent('li');
$this.detach();
$('#completed_list').prepend(task_item);
task_item.slideDown();
});
In this case, the span.done is still being removed, but the whole li element is moved to the lower list.
There is also a problem in your CSS, corrected code below:
#task_list li, #completed_list li {
border: 1px solid rgba (0, 0, 0, 0.3);
padding-top: .1em;
line-height: 170%;
margin-top: .2em;
}
The original code had an extra curly brace after rgba, which presumably had a knock on effect on subsequent code.
EDIT
The delete function is also a little faulty. Here's the corrected code:
$('.sortlist').on('click', '.delete', function () {
var task_item = $(this).parent('li');
task_item.effect('puff', function () {
$(this).remove();
});
});
(basically, task_item wasn't defined).
Regarding the title, the problem is that id attributes must be unique, but in your HTML, 2 elements have id="task". If you change your input tag to something like:
<input type="text" name="task_title" id="task_title">
...and your jQuery code to:
var task_name = $('#task_title').val();
...the title should appear.
This is how i open the dialog box i found a tutorial long ago and i forgot the link to that tutorial
$("#dialog1").html("Mr. " + "<span id='name'>" + data[i].name + "</span>" + "has a building property in <span id='address'>" + data[i].address + "</span>");
$("#dialog1").dialog({title: pml});
$("#dialog1").dialog("open");
and this is how i create the dialog box
var div = $("<div id='dialog1'>");
$("body").prepend(div);
$("#dialog1").dialog({
autoOpen: false,
resizable: false,
modal: true,
//title: "Modal",
height: 250,
width: 400,
buttons: {
"Add": function() {
$(this).dialog('close');
},
"No": function () {
$(this).dialog('close');
},
"close": function () {
$(this).dialog('close');
}
}
});
Currently the button add and no has function of closing the dialog box but i want to add a function in a way that when add button(which is inside the dialog box) is clicked i will get the value of the span in the html of the dialog so that i can use it as parameter for ajax request
You can simply execute function in "Add" function:
...
"Add": function() {
$(this).dialog('close');
somefunction($('#span_id').text()); // #span_id = id of span whitch you want to get text from
},
...
and
function somefunction(text) {
// ajax call
}
I am having a rather strange issue with jQuery/Javascript. (This happens in IE, FF and Chrome)
I have a (asp.net) webpage as follows:
Header with lots of buttons (generated at PreRender)
Hidden div with buttons doing postbacks (generated OnLoad) & a div to use as a dialog
Page with an iFrame
Lets say I have a Button with '1234_stuff' as its CLIENTID in the Hidden div.
I have a button in the Header that has a OnClientClick = "$('#1234_stuff').click();return false;";
When I click the button that is in the header this works perfectly. Good.
I have an other button in the header (lets call it PopupStarter) that has a OnClientClick = "Popup('Titel', 'Description', '1234_stuff');return false;";
The javascript Popup function is as follows:
function Popup(title, description, buttonid) {
$('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
var buttonsToShow;
if (buttonid!= null) {
buttonsToShow = {
'ClickMe': function () {
$('#' + buttonid).click();
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
} else {
buttonsToShow = {
'Cancel': function () {
$(this).dialog('close');
}
}
}
$('#dialog-popup').dialog(
{
resizeable: false,
width: 'auto',
modal: true,
draggable: false,
buttons: buttonsToShow
});
}
When I click the 'PopupStarter' button the jQuery dialog shows as expected, no trouble there. However... when I click the ClickMe button nothing happens (besides closing the dialog).
I would think I did something wrong: so I tried it with a timer:
function Popup(title, description, buttonid) {
$('#dialog-popupText').html('<p><b>' + title + '</b></p><p>' + description + '</p>');
var buttonsToShow;
if (buttonid!= null) {
buttonsToShow = {
'ClickMe': function () {
setTimeout(""$('#"" + buttonid + ""').click();"", 100);
$(this).dialog('close');
},
'Cancel': function () {
$(this).dialog('close');
}
}
} else {
buttonsToShow = {
'Cancel': function () {
$(this).dialog('close');
}
}
}
$('#dialog-popup').dialog(
{
resizeable: false,
width: 'auto',
modal: true,
draggable: false,
buttons: buttonsToShow
});
}
This works!! Now that is odd. So I called the parent jQuery
parent.$('#' + buttonid).click();
This also does not work.
And to top it all off, when I enter each of the lines manually in the console of the browser they all work!
Try using this:
$(document).on('click', '#' + buttonid, function(){
Your functions here;
});
Any items that do not exist on page load, will need to have the event listeners applied to the document, the body, or any parent selector that existed in the DOM on page load. Javascript does not attach listeners to objects that are not present when the DOM is loaded. Hope this helps!
I am having some issues with multiple form submissions with a jQuery/ajax form. I found this by printing every instance of form submission on my server, and saw that a form would submit correctly once, then again multiple times.
Just to be clear, this code works 100% correctly for the first submission, but when I click on another row in my table, and create a new dialog/submit it, it ends up submitting multiple times.
I think it has to do with event binding, but am having trouble fixing it. Any insight or help would be much appreciated.
The button's id is "save-flag-button"
// When someone clicks on the flag column in my table, a dialog pops up //
// on the condition that a flag does not exist. //
$(function() {
$('.flag').click(function() {
var cellId = "flag" + String(this.getAttribute("data-client-rel"));
if (this.getAttribute("data-flag-exists") == '0') {
// create dialog
var dialog = flagDialog('Create Flag');
// Making the form ajax
$("form", dialog).ajaxForm(function(success, data) {
if (success) {
$("#" + cellId).attr("data-flag-exists", '1');
$("#" + cellId).attr("data-flag-content", data["flag_state"]);
$("#" + cellId).text(data["flag_state"]);
$("#flag-dialog").dialog("close");
} else {
alert("Failed to submit flag. Please retry.");
}
});
} else { }
}).hover(function() {
if (this.getAttribute("data-flag-exists") == '0') {
this.innerHTML = '<span style="color: #4183C4;">Create flag!</span>';
}}, function() {
this.innerHTML = this.getAttribute("data-flag-content");
})
});
// jquery dialog code //
function flagDialog(dialogTitle) {
var dialog = $("#flag-dialog").dialog({
autoOpen: false,
autoResize: true,
modal: true,
minHeight: 300,
minWidth: 450,
position: "center",
title: dialogTitle,
buttons: [{
id: "flag-cancel-button",
text: "Cancel",
click: function() {
$(this).dialog("close");
}
},
{
id:"save-flag-button",
text: "Submit",
click: function() {
$("#flag-dialog").dialog("destroy");
// $("#client-relationship-flag-form").submit();
}
}],
close: function() {
//$("#notes-text").text("");
}
});
// Unbinding buttons here //
$("#save-flag-button, #flag-cancel-button").unbind();
$("#save-flag-button").unbind('click').click(function() {
$("#client-relationship-flag-form").submit();
});
$("#flag-cancel-button").click(function() {
$("#flag-dialog").dialog("close");
});
dialog.dialog("open");
return dialog;
};
ajaxForm binding should be done once only.
Try to put the ajaxForm binding on $(document).ready event and try to restructure your logic. ajaxForm was bind every time you click .flag element and all previously bind ajaxForm would be called on all succeeding click event.
I'm using JQuery UI Dialog. In this form, I validate something.I call this function;
MessageBox('this is message', 'Error', OpenDialog());
In Chrome, Firefox,IE8,IE9; It works correctly but in IE7, only dialog's header shows like this. When I click 'Okey' button, It only shows header
How to solve this?
MessageBox function
function MessageBox(text, title,Func) {
var dv = document.createElement('div');
$(function () {
dv.id = 'Dialog';
dv.innerHTML = '<table style="font-family:Calibri;"><tr><td>' + text + '</td></tr></table>';
document.forms[0].appendChild(dv);
var dlg = $('#Dialog').dialog({
autoOpen: false,
width: 400,
title: title,
modal: true,
resizable: false,
buttons: [
{
text: "Okey",
width: 80,
click: function () {
DialogClose_('Dialog');
}
}],
open: function () {
$('.ui-dialog-buttonpane').find('button:contains("Okey")').addClass('ButtonDefault');
},
close: Func,
beforeClose: function () {
var dv2 = document.getElementById("Dialog");
dv2.parentNode.removeChild(dv2);
}
});
dlg.parent().appendTo(jQuery('form:first'));
$('#Dialog').dialog("option", "minWidth", 400);
$('#Dialog').dialog('option', 'position', 'center');
$('#Dialog').dialog('open');
});
return;
}
OpenDialog function like this;
function OpenDialog() {
$(document).ready(function () {
$("#dialog").dialog("open");
});
}
Having a look around there seems to be quite a few issues with the height on dialog boxes in IE7.
You could try specifying a height, but that would take away the nice auto-height feature you get.
Alternatively you could just set the height of the browser just after where you set the "dlg" variable is IE7:
if ($.browser.msie && parseInt($.browser.version, 10) == 7) {
$('#Dialog').dialog("option", "height", 100);
}
You can replace the "100" with what you think. If you have a container element in your dialog box you can always use that to set the height, eg:
$("#container").height();
There is also more suggestions on StackOverflow.
Hope that helps.