i am using struts2-jquery-jqgrid. i have buttons in the columns of the grid. i need to implement a confirm dialog when user clicks to delete.
SOLUTION:
// JAVASCRIPT THAT ADD BUTTONS IN THE COLUMN AND EVENT CLICK
$.subscribe('gridCompleteTopics2', function() {
var ids = jQuery("#gridtable2").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){
var fila = jQuery("#gridtable2").jqGrid("getRowData", ids[i]);
link = "<button id='opener' onClick='deleteRecord(" + fila["idplanilla_det"] + ");'>Open Dialog</button>";
jQuery("#gridtable2").jqGrid('setRowData',ids[i],{acti:link});
}
});
function deleteRecord(id) {
alert(id);
$("#dialogo").dialog("open");
}
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
resizable: false,
height:140,
modal: true,
buttons: {
"ACEPTAR": function() {
$( this ).dialog( "close" );
},
"CANCELAR": function() {
$( this ).dialog( "close" );
}
}
});
});
<div id="dialog" title="Empty the recycle bin?">
These items will be permanently deleted and cannot be recovered. Are you sure?
WORK.
First of all, you should not have multiple controls with the same ID. Here, you are creating ids.length-many buttons with id opener. Instead, assign a class to the buttons, e.g. opener.
Then, you should move your .opener click function after the buttons were created, as such:
$.subscribe("gridCompleteTopics2", function () {
var ids = jQuery("#gridtable2").jqGrid("getDataIDs");
for (var i = 0; i < ids.length; i++) {
var fila = jQuery("#gridtable2").jqGrid("getRowData", ids[i]);
link = "<button id='opener'>Open Dialog</button>";
jQuery("#gridtable2").jqGrid("setRowData", ids[i], { acti: link });
}
$(".opener").on("click", function() {
$("#dialog").dialog("open");
});
});
Related
I am working on a small project (just a practice example - not for real use). Its a very simple CRUD application, and I am not aloud to alter the index.html. Also have to use JQuery UI Dialog and not prompt().
I got up to ADD functionality and I'm stuck. I've created a Jquery UI dialog that appends a form - its triggered when 'Add item' is clicked. Then The action for clicking 'yes' in the form needs to return what was in the input. I am unable to retrieve the value and there is no server side technology(like php)involved. function add_item() in answers.js is where I am working now.
I also don't know why, but an additional input box appears on the bottom of my html page after clicking 'Add item' (it should only append to the form )
*Note: CRUD functions begin after document.ready...lower on the page.
Also, besides the one default item in index.html list items are originally from a json file
*
answer.js
$(document).ready(function()
{
///////// REMOVE ALL ////////////
$(document).on("click", "div a:nth-of-type(3)", function(e)
{
e.preventDefault();
remove_all();
});
$("div a:nth-of-type(3)").click(remove_all);
///////// ADD ITEM ////////////
$(document).on("click", "#add_item", function(e)
{
e.preventDefault();
add_item();
});
$("#add_item").click(add_item);
///////// LOAD ALL ////////////
$(document).on("click", "div a:nth-of-type(2)", function(e)
{
e.preventDefault();
load_all();
});
///////// REMOVE ITEM ////////////
$(document).on("click", "#my_list a", function(e)
{
e.preventDefault();
var current_item = $(this).parent();
remove_item(current_item);
});
$("#my_list a").click(remove_item(current_item));
///////// EDITABLE ITEM ////////////
});
/// CRUD FUNCTIONS ////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
function add_item()
{
$('body').append('<div id="dialog-form"><form> Add your item:<br><input type="text" name="new_item" id="new_item" ></form></div>');
// JQUERY UI DIALOG
$( "#dialog-form" ).dialog({
resizable: false,
title:'Add new item',
height:240,
width:260,
modal: true,
buttons: {
"Yes": function() {
var test = $('#new_item').val();
alert(test);
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
}
function remove_all()
{
$('#my_list li').hide();
}
function load_all()
{
$.getJSON( "myLists/myList.json", function( json )
{
var items = json;
$('#my_list li').remove();
$.each(items, function(index,the_item)
{
$('#my_list').append('<li>'+the_item+'x</li>')
});
});
}
function remove_item(current_item)
{
// APPEND DIALOG BOX DIV
$('<div id="dialog-confirm">').appendTo('body');
// JQUERY UI DIALOG
$( "#dialog-confirm" ).dialog({
resizable: false,
title:'Remove this item?',
height:140,
width:260,
modal: true,
buttons: {
"Yes": function() {
$(current_item).hide();
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
}
INDEX.HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link href="jquery-ui/css/ui-lightness/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="answer.js"></script>
<title>jQuery Test</title>
</head>
<body>
<div>
<h1>My Shopping List</h1>
Add Item | Load List | Clear List
<ul id="my_list">
<li>Brand New Shoes x</li>
</ul>
</div>
</body>
</html>
Offering a few updates that I think might help:
Working Example: https://jsfiddle.net/Twisty/5g72nncw/
$(document).ready(function() {
///////// REMOVE ALL ////////////
$(document).on("click", "div a:nth-of-type(3)", function(e) {
e.preventDefault();
remove_all();
});
$("div a:nth-of-type(3)").click(remove_all);
///////// ADD ITEM ////////////
$(document).on("click", "#add_item", function(e) {
e.preventDefault();
console.log("Running Add Item.");
add_item();
});
$("#add_item").click(add_item);
///////// LOAD ALL ////////////
$(document).on("click", "div a:nth-of-type(2)", function(e) {
e.preventDefault();
load_all();
});
///////// REMOVE ITEM ////////////
$(document).on("click", "#my_list a", function(e) {
e.preventDefault();
var current_item = $(this).parent("li");
remove_item(current_item);
});
//$("#my_list a").click(remove_item(current_item));
///////// EDITABLE ITEM ////////////
});
/// CRUD FUNCTIONS ////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////
function add_item() {
if ($("#dialog-form").length == 0) {
console.log("Dialog not found, creating new Dialog.");
var newDialog = $("<div>", {
id: "dialog-form"
});
} else {
console.log("Dialog Found.");
var newDialog = $("#dialog-form");
newDialog.dialog("open");
return true;
}
newDialog.append("<label style='display: block;'>Add your item:</label><input type='text' id='new_item' />");
//$('body').append('<div id="dialog-form"><form> Add your item:<br><input type="text" name="new_item" id="new_item" ></form></div>');
// JQUERY UI DIALOG
newDialog.dialog({
resizable: false,
title: 'Add new item',
height: 240,
width: 260,
modal: true,
autoOpen: false,
buttons: [{
text: "Yes",
click: function() {
var test = $('#new_item').val();
console.log(test);
$("#my_list").append("<li>" + test + " <a href='#'>x</a></li>");
$(this).dialog("close");
$('#new_item').val("");
}
}, {
text: "Cancel",
click: function() {
$(this).dialog("close");
$('#new_item').val("");
}
}]
});
//$("body").append(newDialog);
newDialog.dialog("open");
}
function remove_all() {
$('#my_list li').remove();
}
function load_all() {
$.getJSON("myLists/myList.json", function(json) {
var items = json;
$('#my_list li').remove();
$.each(items, function(index, the_item) {
$('#my_list').append('<li>' + the_item + 'x</li>')
});
});
}
function remove_item(current_item) {
// APPEND DIALOG BOX DIV
$('<div id="dialog-confirm">').appendTo('body');
// JQUERY UI DIALOG
$("#dialog-confirm").dialog({
resizable: false,
title: 'Remove this item?',
height: 140,
width: 260,
modal: true,
buttons: {
"Yes": function() {
$(current_item).hide();
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
}
When removing an item, you want to pass the <li> to your function. This way it is removed from the <ul>.
When adding the item, I did not append the <div> to the body. I noticed when you appended the <div>, since it was not in the DOM when the page loaded, it does not get initialized as a .dialog() and thus is rendered into the HTML. My method avoids this.
Nothing wrong with the way you create the buttons, yet this is more specific and is how it is described by the UI API: http://api.jqueryui.com/dialog/#option-buttons
Hope this helps.
i'm new here and didn´t find the solution for my problem.
i searched the web and tried tons of solutions but they didn´t work.
i use Jquery Tabs with the closable feature( http://jsfiddle.net/42er3/9/ )
Now i wanted to activate the latest created Tab. This doesn´t work ^^
Here is my Code:
$(function () {
var tabTitle = $("#tab_title"),
tabContent = $("#tab_content"),
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-close' role='presentation'>Remove Tab</span></li>",
tabCounter = 1;
var tabs = $("#tabs").tabs();
// modal dialog init: custom buttons and a "close" callback resetting the form inside
var dialog = $("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Send: function () {
addTab();
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
form[0].reset();
}
});
// addTab form: calls addTab function on submit and closes the dialog
var form = dialog.find("form").submit(function (event) {
addTab();
dialog.dialog("close");
event.preventDefault();
});
// actual addTab function: adds new tab using the input from the form above
function addTab() {
var label = tabTitle.val() || "Tab " + tabCounter,
id = tabTitle.val(),
li = $(tabTemplate.replace(/#\{href\}/g, "#" + id).replace(/#\{label\}/g, label)),
tabContentHtml = tabContent.val() || "Tab " + tabCounter + " content.";
tabs.find(".ui-tabs-nav").append(li);
tabs.append("<div id='" + id + "' class='rel'><p>" + tabContentHtml + "</p><hr /><div id='writebox'><form name='send' id ='sent'><textarea name ='msg' class='boxsizingBorder'></textarea><input type='submit' name='" + id + "' /></form></div></div>");
//after added the tab, active it
tabs.tabs({
active: tabCounter
}); // <---------------------------Here it is
//alert(panelId+"-"+tabCounter);
tabCounter++;
tabs.tabs("refresh");
}
// addTab button: just opens the dialog
$("#add_tab")
.button()
.click(function () {
dialog.dialog("open");
});
// 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");
});
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");
}
});
});
You can use the following code to programatically make a tab active
$( "#tabs" ).tabs( "option", "active", 2 );
I've updated the addTab() method in your Fiddle as follows:
function addTab() {
...
tabs.tabs("refresh");
tabs.tabs( "option", "active", tabCounter-1 );
tabCounter++;
}
As tab indexes start at 0 rather than 1, I've had to subtract 1 from tabCounter to get the index of the tab that was just added.
See here for a demo
I'm trying to make a mouseover map area on an image that must display a dialog box when the mouse is over.
The dialog box content is different, depending on which area it is.
My script actually always show all the dialog boxes.
Here is the jsFiddle I created :
http://jsfiddle.net/U6JGn/4/
and the javascript :
$(function() {
$('#box').dialog( { modal:true, resizable:false } ).parent().find('.ui-dialog-titlebar-close').hide();
for (var i = 0; i < 2; i++) {
$( "#elem"+i ).mouseover(function() {
$( ".box"+i ).dialog( "open" );
});
$( "#elem"+i ).mouseout(function() {
$( ".box"+i ).dialog( "close" );
});
}
});
What am I doing wrong ?
Assign the box dialog to a variable and then don't queue more jquery events with it because it will break your code.
Since Ids need always to be unique we need to do some changes in your html and css
ids: #box0, #box1
class: .box
$(function() {
$('.box').each(function(k,v){ // Go through all Divs with .box class
var box = $(this).dialog({ modal:true, resizable:false,autoOpen: false });
$(this).parent().find('.ui-dialog-titlebar-close').hide();
$( "#elem"+k ).mouseover(function() { // k = key from the each loop
box.dialog( "open" );
}).mouseout(function() {
box.dialog( "close" );
});
});
});
working example: jsfiddle
Try this:
for (var i = 0; i < 2; i++) {
(function(i) {
$( "#elem"+i ).mouseover(function() {
$( ".box"+i ).dialog( "open" );
});
$( "#elem"+i ).mouseout(function() {
$( ".box"+i ).dialog( "close" );
});
})(i);
}
UPDATE:
Take a look at the demo
http://jsfiddle.net/U6JGn/129/
Modified JQuery code....
$(document).ready(function() {
for (var i = 0; i<= 1; i++) {
$( "#elem"+i ).on('mouseenter',function() {
var st = $(this).attr('Id').replace('elem','');
$( ".box" + st).css('display','');
});
$( "#elem"+i ).on('mouseout',function() {
var st = $(this).attr('Id').replace('elem','');
$( ".box"+st ).hide();
});
}
});
I want to use translations in my code, they are coming from PHP/MySql and are converted into an javascript array:
var translate = <?= json_encode($Object->translate);?>;
Translations are available in Javascript (tested).
Now, I want to use them in my Javascript code, by example Jquery UI dialog:
$("#logoff").click(function(){
var action = "logoff";
var btnLogoff = translate["dialog/buttonLogoff"]; // this gives the translation from the array
var btnCancel = translate["dialog/buttonCancel"]; // this gives the translation from the array
$("#dialog").dialog(
{
title: translate["dialog/titleLogoff"],
modal: true,
resizable: false,
buttons: {
btnLogoff : function() {
var loadUrl = "includes/_ajax/actions.ajax.php";
$.post(loadUrl,{action:action}, function(data) {
if(data)
location.reload();
});
$( this ).dialog( "close" );
},
btnCancel: function() {
$( this ).dialog( "close" );
}
}
}
);
$("#dialog").html("<span class='ui-icon ui-icon-alert' style='float: left; margin: 0 7px 20px 0;'></span>" + translate["dialog/textLogoff"]);
});
The problem is dat the property btnLogoff is not showing the translated text but instead shows itself ("btnLogoff").
In the last section, translate["dialog/textLogoff"] is translated like it is meant to be. I am clearly doin something wrong. Can I use the var as a property id? How?
I think you aren't using the jQuery.dialog API fully. See http://api.jqueryui.com/dialog/#option-buttons
Have a try using the 'text' property of the buttons configuration:
$("#dialog").dialog(
{
title: translate["dialog/titleLogoff"],
modal: true,
resizable: false,
buttons: [
{
text : btnLogoff,
click : function() {
var loadUrl = "includes/_ajax/actions.ajax.php";
$.post(loadUrl,{action:action}, function(data) {
if(data)
location.reload();
});
$( this ).dialog( "close" );
}
}
,
{
text : btnCancel,
click: function() {
$( this ).dialog( "close" );
}
}
]
}
);
I have a page that call from ajax a form with a specific target. this form has a delete entry and for that a warning with a jQuery dialog is used. everything works great.
BUT :
After doing the change or even not doing it, when I open another form (different form by ajax call) and I call the same code below described. When It is submit the dialog the #var_blabla as a value of 1 (the value of the first dialog opened/loaded) and for that moment should be '2'.
I try to figure it out.. So my problem I guess is not for the dialog it self, since I try to load a second page without the constructor and the dialog didn't open (what should be expected).
The problem is on the button 'Submit Delete' that has an event function and it stays active over another that is created.
The site have a lot of forms and many dialogs for each form, is there a wait to unbind, or destroy completely the dialog and the buttons? Ideas please?
Thanks
simplified 1st dialog call code:
$("#dialog-confirm-elimina").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Submit Delete': function() { $('#var_blabla').val('1');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
simplified 2nd dialog call code:
$("#dialog-confirm-elimina").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Submit Delete': function() { $('#var_blabla').val('2');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
UPDATE:
<script type="text/javascript">
submited=false;
var toggleOpened = true;
$("#admin_retractil_1").click(function () {
if(!toggleOpened){
$('#admin_retractil_1').toggleClass('toggleGESBHeadown');
toggleOpened=true;
}
else{
$('#admin_retractil_1').toggleClass('toggleGESBHeadown');
toggleOpened=false;
}
var objecto = $(this).attr("id");
$('#' + objecto+"_div").slideToggle("slow");
});
var toggleOpened2 = false;
$("#admin_retractil_2").click(function () {
if(!toggleOpened2){
$('#admin_retractil_2').toggleClass('toggleGESAHeadown');
toggleOpened2=true;
}
else{
$('#admin_retractil_2').toggleClass('toggleGESAHeadown');
toggleOpened2=false;
}
var objecto = $(this).attr("id");
$('#' + objecto+"_div").slideToggle("slow");
});
$(document).ready(function() {
//$( "button").button();
var locked = true;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-locked" }});
$( "#EditDataForm" ).click(function() {
if(locked){
locked = false;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-unlocked" }});
$('#edit_data_admin').slideToggle("slow");
$('#view_data_admin').slideToggle("slow");
}else{
locked = true;
$( "#EditDataForm").button({ icons: { primary: "ui-icon-locked" }});
$('#edit_data_admin').slideToggle("slow");
$('#view_data_admin').slideToggle("slow");
}
return false; });
$( "#DelDataForm").button({ icons: { primary: "ui-icon-scissors" }});
$( "#DelDataForm" ).click(function() {
$('#dialog-confirm-del').dialog('open');
return false; });
/*abre popup de alerta de eliminar */
arrayRemove.push("dialog-confirm-del");
$("#dialog-confirm-del").dialog({
autoOpen: false,
resizable: false,
height:220,
modal: true,
buttons: {
'Remove Stuff': function() {
$('#sel_action_form').val('TypoDesClients_DelDef');
$('#name').val('_____');
$('#form_submit').submit();
$(this).dialog('close');
},
Cancelar: function() {
$(this).dialog('close');
}
}
});
$( "#AcceptChanges").button({ icons: { primary: "ui-icon-check" }});
$("#form_submeter").validator({
position: 'center right',
offset: [0, 0],
message: '<div><em /></div>'
}).bind("onSuccess", function(e, els) {
var numSucceeded = els.length,
numExpected = $(this).data('validator').getInputs().length;
if (numSucceeded === numExpected) {
if(!submited){submited=true;
SubmitFormSV('form_submit', 'action/action_a.php');
return false;
}else return false;
}
});
$( "#radio" ).buttonset();
$("#1_radio").click(function () {
$("#tr_1").show();
});
$("#2_radio").click(function () {
$("#tr_1").hide();
});
});
local lib:
function SubmitFormSV(formul, address)
{
DoChecks();
$("#loading").show("slow");
$.post(baseURL + address, $('#' + formul).serialize(), function(html){
$('#content').slideUp("slow", function () {
AjaxChargePage(html, true);
});
});
$("#loading").hide("slow");
return false;
}
next the next chuck of javascript is similar to this one.
and with this work because destroy didn't:
DoChecks() As:
$.each(arrayRemove, function() {
var element = arrayRemove.pop();
$('#'+element).remove();
});
When you're done with dialog 1 try...
$("#dialog-confirm-elimina").dialog("destroy");
or in your Cancel function...
$(this).dialog("destroy");
The .dialog command creates a new dialog on the element selected. You're doing this twice, and thus having problems. Once the dialog is created it can be reused using open and close methods or destroyed as I've shown above and then recreated.
Ok, then finally I got a solution that make everything works. Instead of using the
$("#dialog-confirm-elimina").dialog("destroy");
I use:
$("#dialog-confirm-elimina").remove();
I still don't know the reason but clearly don't have the problem anymore.
Thanks for the answer though.
PS: If anyone know how could this append I appreciate to illuminate me about it.Thanks