reopen jquery ui dialog, empty and refresh - jquery-ui

This jquery ui dialog is filled with html and form values from an ajax call (works). I want to close or submit it and then reopen and reuse it just the same. I can close and reopen fine but it has the old values still there and then the new ones are added. It keeps adding the html values after each close and reopen. There are many questions about this on SO but I don't see a clear answer. I have tried close, empty, destroy but the combination isn't working the way I need it. Any ideas?
$("#StoreForm").dialog({
autoOpen:false,
width:500,
height:900,
modal:true,
buttons: {
OK: function() {
$('#StoreForm').dialog('close');
$(this).dialog('hide');
$(this).dialog('empty');
},
'Save': function() {
$(this).dialog('empty');
}
}
});
//additional code to click and open the dialog
$(".sel").unbind('click');
$(".sel").on("click", function(e){
e.preventDefault();
$("#StoreForm").dialog('open');
var valueSelected = $(this).closest('tr').children('td.item').text();
$.ajax({
url: 'query/categories.cfc',
dataType: 'json',
cache: false,
data: {method: 'getProductInfo',
queryFormat: 'column',
returnFormat: 'JSON',
productID: valueSelected
},
success: function(response, status, options){
$("#PROD_SUPER_ID").val(response.DATA.PROD_SUPER_ID[0]);
$("#color").val(response.DATA.COLOR_ATTRIB);
$("#SIZE_ATTRIB").val(response.DATA.SIZE_ATTRIB);
$("#price").val(response.DATA.PRICE);
var w = [];
w.push("<p>", response.DATA.ICON[0], "</p>", "<p>",
response.DATA.FULL_DESCRIPTION [0], "</p>")
$("#StoreForm").prepend(w.join(""));

What I found was you can close the dialog and empty the html and it will clear this type of dialog set-up. For reopening I nested the 2nd ajax call in the success response of the initial one..
//set up dialog with options
$("#StoreForm").dialog({
autoOpen: false,
width: 500,
height: 500,
modal: true,
buttons: {
Cancel: function(){
$('#StoreForm').dialog('close');
$('#StoreForm').html("");
},
//pop-up individual items
"Add to Cart": function(){
$.ajax({
url: $("#storeCart").attr('action'),
data: $("#storeCart").serializeArray(),
type: 'POST',
success: function(response){
var name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );
if you have any questions please respond. Thanks

Related

JQUERYUI: Modal buttons dont work when I close and open

I am creating a dialog in javascript and for some reason when I first open the dialog the buttons works fine. But when I close and open it the buttons dont work. The edit click function doesnt work the second time when I repopen the dialog
var newDiv = $(document.createElement('div'));
$(newDiv).dialog({
title: "New Dialog",
modal: true,
autoOpen: true,
width: 650,
height: 440,
resizable: false,
draggable: true,
buttons: [
{
html: "<b>Edit</font></b>",
icons: {
primary: "ui-icon-check"
},
click: function() {
$('#notetext').prop("disabled", false);
$('#uibtnSubmit').button("enable");
//$('#uibtnSubmit').prop("disabled", false);
//$("#uibtnSubmit").button().attr('disabled', false).removeClass('ui-state-disabled');
}},
{
html: "<b><font color='green'>Submit</font></b>",
disabled:true,
id: "uibtnSubmit",
icons: {
primary: "ui-icon-script"
},
click: function() {
var editnotes = $('#notetext').val();
//update the notes in the database against the user.
$.ajax({
type: "post",
cache: false,
async: false,
url:"url",
datatype: "json",
data: data,
success: function(data){
$(newDiv).dialog('close');
},
error: function(jqXHR, statusText, err){
//console.log(err);
}
});
}},
{
html: "<b><font color='red'>Exit</font></b>",
icons: {
primary: "ui-icon-cancel"
},
click: function() {
$(this).dialog('close');
}
}
]
});
I tried to use different properties like removeClass, attr but they arent working.
I solved the issue by reloading the page once Exit or submit value was clicked. That way when the dialog box was reloaded it was initialized.

dialog is showing the same result

i have this dialog to show the file name when you click on the icon. When i first click it the dialog will be empty then i close it and reopen the dialog will show the name (via ajax). Then when i close the dialog again and click on a different file icon its showing the first file name. then when i close it again and reopen it, it will show the correct filename. Why is it doing this?
Here is my javascript
$('.edit').click(function(e){
e.preventDefault();
var auth = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'ajax/edit_filename.php',
data: {auth:auth},
success: function(result){
filename = result;
}
});
$( "#dialog" ).dialog({
modal: true,
resizable: false,
title: 'Edit file name',
buttons: {
"Close": function() {
$(this).dialog("destroy");
$(this).dialog("cancel");
}
}
});
$('.ui-dialog-content').html('<input type="text" value="'+filename+'"/>');
});
i worked out what i did wrong, i was calling the dialog before i got the ajax response
here is the correct javascript incase this happens to you
$('.edit').click(function(e){
e.preventDefault();
var auth = $(this).attr('id');
$.ajax({
type: 'POST',
url: 'ajax/edit_filename.php',
data: {auth:auth},
cache: false,
success: function(result){
filename = result;
}
});
$.post( "ajax/edit_filename.php", { auth:auth })
.done(function( data ) {
$( "#dialog" ).dialog({
modal: true,
resizable: false,
title: 'Edit file name',
buttons: {
"Close": function() {
$(this).dialog("destroy");
$(this).dialog("cancel");
}
}
});
$('.ui-dialog-content').html('<input type="text" value="'+data+'"/>');
});
});

mvc jquery passing form values after user presses "Accept" button

So I have a form and a submit button that posts the form to an action. But I wanted to show a popup where the user can deny or accept an agreement.
Here's my jquery
$(document).ready((function () {
var dialog = $('#confirmation-dialog').dialog({
autoOpen: false, width: 500, height: 600, resizable: false, modal: true,
buttons: {
"Accept": function () {
$(this).dialog('close');
$.ajax({
type: 'POST',
data: {__RequestVerificationToken: $("input[name=__RequestVerificationToken]").val()}
});
},
"Cancel": function () {
$(this).dialog('close');
}
}
});
$('#registration-submit').click(function (e) {
var action = $(this.form);
console.log(action);
var form = $('form');
dialog.dialog("open");
return false;
});
}));
My problem with this is that it would post, but it would only send my AntiforgeryToken, and not the values of the form. But when it goes through the TryupdateModel it would go through for some reason but will not Save (cuz of the missing data that wasn't passed on the formcollection).
You are not sending the data of the form... You are only sending __RequestVerificationToken: in your ajax request.
Maybe try:
$(this).dialog('close');
var dataObj = $('form').serialize();
dataObj.__RequestVerificationToken = $("input[name=__RequestVerificationToken]").val();
$.ajax({
type: 'POST',
data: dataObj
});
This way, you add to data the values in the form inputs and then add your token to it.

Zend Framework Ajax Link to work with jQuery Dialog Box

I have tried now the last 3 weeks to get a ajaxLink to work with a jQuery Dialog Box. I have a delete Bookmark Function and want that a dialog Box appears, where you have to confirm that you want to delete the Bookmark, before the Ajax Request is fired and deletes the Bookmark.
I assume that I have to add something to the beforeSend function, but I can not figure out what needs to be written in it. Could someone advice what I need to do? I hope someone knows the answer, I run out of ideas. Thank you very much in advance !
Here my sourcecode so far:
echo $this->ajaxLink("Remove Bookmark","/bookmark/remove/article ".$this->escape($entry->id),
array(
'id' => '',
'class' => 'btn orange delete dialog-confirm',
'dataType'=>'JSON',
'method' => 'post',
'update' => '.bookmark',
'beforeSend' => '????',
'complete' => '$("."+data+"").remove();if ($(".watchlist").length == 0){$(".watch").append("<p>No items watched</p>")}'
));
And my jQuery Dialog Box:
$('.dialog-confirm').click(function(e){
e.preventDefault();
var URL = $(this).attr("href");
$(this).css('display','block');
$('#dialogbox').dialog({
resizable: false,
height:180,
width:350,
modal: true,
closeOnEscape: true,
buttons: {
"Yes, delete bookmark": function() {
window.location.href = URL;
return true;
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
Your Ajax request must be triggered only if a user click on the "Yes, delete bookmark" button. Therefore, you need to add to this button function a jQuery ajax function and remove your first ajaxLink().
//in your view.phtml
<div id="dialogbox" style="display:none">Do you really want to remove this bookmark?</div>
<span style="cursor:pointer" class="btn orange delete dialog-confirm" id="1">Remove Bookmark</span>
<?php $this->jQuery()->addOnload('
$(function() {
var id;
$("#dialogbox").dialog({
resizable: false,
height:180,
width:350,
modal: true,
buttons: {
"Yes, delete bookmark": function() {
$.ajax({
type: "POST",
url: "/bookmark/remove/article",
dataType: "json",
data: "id="+id,
success: function(data, textStatus, jqXHR) {
$("."+data+"").remove();
if ($(".watchlist").length == 0) {
$(".watch").append("<p>No items watched</p>")
}
}
});
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
});
$(".delete").click(function(e) {
id = this.id;
console.log(id);
$( "#dialogbox" ).dialog( "open" );
});
});
'); ?>
Now, if you click on Remove Bookmark, it displays a jQuery Dialog with two buttons: Cancel and "Yes, delete bookmark", and once you click on yes, it calls an jQuery.ajax function and send the id to /bookmark/remove/article as a parameter.

jQGrid + jQueryUI Autocomplete + combobox automatically open on focus

I'm sure I'm missing something very simple on this one. After banging my head against the desk (literally) for a couple of days now, I submit myself to the mercy of the stack:
I'm using jQuery UI Autocomplete as a combobox in my jQGrid (I know! I've already looked for the solution elsewhere to no avail!). I would like the dropdown to open when I access the cell for editing through the onSelectRow event in jqGrid. Basically, I want to do exactly what is discussed here:
Open jQuery UI ComboBox on focus
and demo'd here:
http://jsfiddle.net/gEuTV/
The only difference is that I need it in jqGrid. I've tried the code below which I (mistakenly) through would trigger the combobox to appear when the row is focused, but the combobox doesn't appear on focus of the row in the onSelect event. I have a sneaking suspicion that I'm just putting the following code in the wrong spot, but I've tried it everywhere I can think of:
$("#"+id+"_usr_validation","#list2").bind("focus", function () {
this.value = '';
$(this).autocomplete("search", '');
Here's my complete code including the grid:
$(function(){
var lastsel;
$("#list2").jqGrid({
url: 'php_includes/uploadgrid.php',
datatype: "json",
mtype: 'GET',
colNames:[
'User Value',
'Translated Value',
'User Validation,
],
colModel:[
{name:'usr_value',index:'usr_value', sortable:'true', width:60, align:"center", editable:false},
{name:'translated_value',index:'translated_value', sortable:'true', width:60, align:"center", editable:false},
{name:'usr_validation',index:'usr_validation', sortable:'true', width:60, align:"center", editable:true}
],
pager: '#pager2',
rowNum: 1000,
scroll: true,
gridview: true,
viewrecords: false,
height: 'auto',
hidegrid: false,
autowidth: true,
pgbuttons: false,
pginput: false,
forceFit: true,
emptyrecords: "No record was loaded",
onSelectRow: function(id){
if(id && id==lastsel){
$("#list2").jqGrid('editRow',id,true,autocomp,'','','',selectNone);
} else {
if(id && id!==lastsel){
$("#list2").jqGrid('saveRow',lastsel);
$("#list2").jqGrid('editRow',id,true,autocomp,'','','',selectNone);
lastsel=id;
}
}
},
editurl: '/php_includes/jqGridCrud.php',
});
jQuery("#list2").jqGrid('navGrid',"#pager2",{edit:false, search:false, del:false, add:false})
function selectNone(){
$("#list2").jqGrid('resetSelection');
}
//this function de-selects all previously accessed rows
function autocomp(id) {
var term2 = $("#list2").jqGrid('getCell',id,'usr_value');
$("#"+id+"_usr_validation","#list2")
.autocomplete({
source: function(request, response) {
$.ajax({
url: "/php_includes/Autocomplete.php",
dataType: "json",
data: {
term : request.term,
term2 : term2,
},
success: function(data) {
response(data);
}
});
},
minLength: 0,
select: function(event, ui) {
$("#list2").val(ui.item.id);
},
});
$("#"+id+"_usr_validation","#list2").bind("focus", function () {
this.value = '';
$(this).autocomplete("search", '');
});
}
});
You should change 'User Validation, to 'User Validation' and remove trailing commas in different places of your code (like from editurl: '/php_includes/jqGridCrud.php',} and close which are syntax errors in JavaScript, but ignored in many, but not all web browsers).
UPDATED: One more problem is that the focus on the editing field will be set before oneditfunc will be called, so the "focus" event can not be triggered. As a workaround you can trigger "focus" event directly after the .bind("focus", ....
See your modified demo here.

Resources