I'm using jQuery UI dialog to confirm the delete request. I'm trying to pass in an ID to an AJAX post when I user confirm a deletion request. Thank you in advance for any insight.
Here is HTML:
<table width="100%" cellspacing="1" cellpadding="5" border="0" class="detailTbl" id="myTable">
<tbody>
<tr class="divider" id="editRow220">
<td align="top">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
<td align="top">
<a class="btn_delete deleteMe form-tip" href="#" id="220" title="Delete this item"></a>
<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </span>
</td>
</tr>
</tbody>
</table>
Here is SCRIPT:
$("#myTable tbody").on("click", "a.deleteMe", function (e) {
e.preventDefault();
var RemoveID = $(this);
alert(RemoveID.attr("id")); // ***correct ID here ***
var $myDialog = $('<div></div>')
.html('Are you sure you want to delete this item?')
.dialog({
autoOpen: false,
title: 'Confirmation',
buttons: {"Yes": function(e) {
alert(RemoveID.attr("id")); // ***RemoveID is undefined here***
// AJAX Call here //
return true;
}, "No": function() {
$(this).dialog("close");
return false;
}
}
});
return $myDialog.dialog('open');
});
This may be a sloppy solution, but can you try assigning the ID to a global variable, then using it:
var mID;
$("#myTable tbody").on("click", "a.deleteMe", function (e) {
e.preventDefault();
mID = $(this).attr("id");
var $myDialog = $('<div></div>')
.html('Are you sure you want to delete this item?')
.dialog({
autoOpen: false,
title: 'Confirmation',
buttons: {"Yes": function(FmoPmoToRemove) {
alert(mID); //shouldnt be undefined anymore
..rest of code..
I made a simple moch-up on jsFiddle www.jsfiddle.net/bphamous/rQ3MC and it appears to be working. Issue must be in my code.
what is the problem when using cofirm() of Java script like this :
function delete(Id){
boolean b = confirm("Deleting : "+Id", Are you sure ..??");
if(b == true){
// make the delete process here ...
}
else{
// do dtuff .....
}
}
Related
I'm using jQuery mobile 1.9.1 min on PhoneGap.
I have a list where each iten on click opens an actions popup:
function showActions(index){
selectedIndex = index;
$("#actionPopup").popup("open", {positionTo: '#list li:nth-child('+ index +')'});
}
<div data-role="popup" id="actionPopup" data-overlay-theme="a">
Close
<ul data-role="listview">
<li data-role="divider">Actions</li>
<li data-icon="false" onclick="showDetails();">action1</li>
<li data-icon="false">action2</li>
<li data-icon="false">action3</li>
<li data-icon="false">action4</li>
</ul>
</div>
When I press on action1 with showDetails() them method is called but the second popup isn't shown.
function showDetails(){
console.log("showDetails");
$("#infoPopup").popup("open");
}
<div data-role="popup" id="infoPopup">
Close
<div id="infoContent">
<table>
<tr id="eventcode">
<td>test1:</td>
<td> </td>
</tr>
<tr id="eventtype">
<td>test2:</td>
<td> </td>
</tr>
</table>
</div>
</div>
What can I do?
My solution
$.mobile.switchPopup = function(sourceElement, destinationElement, onswitched) {
var afterClose = function() {
destinationElement.popup("open");
sourceElement.off("popupafterclose", afterClose);
if (onswitched && typeof onswitched === "function"){
onswitched();
}
};
sourceElement.on("popupafterclose", afterClose);
sourceElement.popup("close");
};
I used this simple function for the work-around:
function myPopup(myPage) {
history.back();
setTimeout(function () {
$(myPage).popup('open');
}, 100);
}
#Rakoo has a nice answer. Here is a leaner version:
$.mobile.switchPopup = function(sourceElement, destinationElement, onswitched) {
sourceElement.one("popupafterclose", function() {
destinationElement.popup("open")
!onswitched || typeof onswitched !== "function" || onswitched()
}).popup("close")
};
If you don't need the onswitched feature and aren't adding it to $.mobile, It can be this short and simple:
$('#popup1').one("popupafterclose", function(){$('#popup2').popup("open")}).popup("close")
It seems that chaining popups is not possible.
The solution:
$( document ).on( "pageinit", function() {
$( '.popupParent' ).on({
popupafterclose: function() {
setTimeout( function(){ $( '.popupChild' ).popup( 'open' ) }, 100 );
}
});
});
I used this code to switch popup from popup it works fine.
function switchpop()
{
$( '#popupMenu' ).popup( 'close' );
$( "#popupMenu" ).bind({popupafterclose: function(event, ui)
{
$( "#notes" ).popup( "open" );
}
});
}
After four hours of fighting with this I reduced the problem to this:
This is in a button click function on the first popup
$('#popupCall').popup('close');
window.setTimeout(function () { $('#popupContact').popup('open') }, 50);
Im trying to apply the JQuery UI highlight effect to an element when an item that is bound to a knockout observablearray is updated.
The highlight effect is applied but the highlight color used is always the elements current background color. even if I specify the highlight color using the { color: 'XXXXXXX' } option.
any ideas what might be happening?
Thanks,
Steve.
Code below: The element is the span.tag
<div class="row">
<div class="span12">
<div class="tagsinput favs span12" style="height: 100%;" data-bind="foreach: favs, visible: favs().length > 0">
<span class="tag" data-bind="css: $root.selectedFav() == userPrefID() ? 'selected-fav' : '', attr: { id: 'fav_' + userPrefID() }">
<span data-bind="text: name, click: $root.loadFav.bind($data)"></span>
<a class="tagsinput-fav-link"><i class="icon-trash" data-bind="click: $root.delFav.bind($data)"></i></a>
<a class="tagsinput-fav-link-two" data-bind="visible: $root.selectedFav() == userPrefID()"><i class="icon-save" data-bind=" click: $root.saveFav.bind($data)""></i></a>
</span>
</div>
</div>
</div>
// This is the code that does a save via ajax then highlights the element when done.
$.getJSON('#Url.Action("SaveFav","User")', { id: item.userPrefID(), fav: window.JSON.stringify(fav) }, function (result) {
var savedFav = ko.utils.arrayFirst(self.favs(), function (aFav) {
return aFav.userPrefID() == result.userPrefID; // <-- is this the desired fav?
});
// Fav found?
if (savedFav) {
// Update the fav!
savedFav.value(result.value);
}
}).done(function () {
var elementID = "#fav_" + item.userPrefID();
highlightElement(elementID);
});
// Function to highlight the element
function highlightElement(element) {
$(element).effect("highlight", {}, 1500);
}
I would do this the 'knockout' way... use a custom bindingHandler. You shouldn't be directly manipulating DOM in your viewModel, but only touching properties of your viewModel.
Taking this approach, you simply set a boolean value to true when your save is complete... this triggers the highlight effect (the jquery/dom manipulation neatly hidden away from your viewmodel) and when highlight effect completes, the handler sets the boolean back to false. Nice and tidy.
HTML:
<div id="#fav" data-bind="highlight: done">This is a test div</div>
<br />
<button data-bind="click: save">Simulate Save</button>
Javascript:
ko.bindingHandlers.highlight = {
update: function(element, valueAccessor) {
var obs = valueAccessor();
var val = ko.unwrap(obs);
if (val) {
$(element).effect("highlight", {}, 1500, function() {
obs(false);
});
}
}
};
var vm = function() {
var self = this;
self.done = ko.observable(false);
self.save = function() {
self.done(true);
};
}
ko.applyBindings(new vm());
Fiddle:
http://jsfiddle.net/brettwgreen/pd14q4f5/
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
i m use dialog box jquery in which i want use datepicker
it show me outsde of the dialog box.....thats problem....
<div id="dialog" title="Find Patient">
<p>
<table style="table-layout: fixed; width: 550px;">
<tr>
<td><label class="form-item-label form-item-label-right">Patient Id :</label> </td>
<td><input type="text" name="byId" id="byId" style="width: 90%" /></td>
<td><a class="button" href="#"><span>Find</span></a></td>
</tr>
<tr>
<td><label class="form-item-label form-item-label-right">Patient`s Name :</label></td>
<td><input type="text" name="byName" id="byName" style="width: 90%"/></td>
<td><a class="button" href="#"><span>Find</span></a></td>
</tr>
<tr>
<td></td>
<td><input type="text" id="dob" name="dob" style="width: 90%"></td>
<td><a class="button" href="#"><span>Find</span></a></td>
</tr>
</table>
</p>
</div>
when i m use the datepicker Jquery in last row of table in dialog box
load my html page Datepicker is load on page first
I dont know if this is your solution, but try this out if you are tend to use the Jquery datepicker you should add it to the element directly on load mabye and not on focus, it will append when you focus the textbox anyway. Notice the line of code $('#dob').datepicker();
$(function () {
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$('#dob').datepicker();
// Dialog Link
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
return false;
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function () { $(this).addClass('ui-state-hover'); },
function () { $(this).removeClass('ui-state-hover'); }
);
});
I want to refresh page when close the dialog? Is this possible? How can I do this?
There are links that opens the their own dialog. But When I clicked first time any link, dialog cache it's id, And then I clicked others, link id always same (first clicked id).
Should I refresh the page when close the dialog or Is there another way to fix this problem.
I use codes in below for opening dialog:
#foreach (var item in Model)
{
<tr>
<td>#Html.ActionLink(linkText: item.musteri_adi,
actionName: "MusteriDuzenle",
controllerName: "Musteri",
routeValues: new { sno = item.sno },
htmlAttributes: new { #class = "open_dialog", data_dialog_title = item.musteri_adi })
</td>
<td>#Html.DisplayFor(x => item.fatura_adresi)
</td>
</tr>
}
Thanks. And sorry my poor english :)
You can use beforeClose event to call a function to refresh your page.
$( "#myDialog" ).dialog({
beforeClose: function(event, ui) {
window.location.reload();
// or you can use window.location = 'mypage.html';
}
});
I have a table and within the first <td> is a hidden <div>. I want to show the div using a jQuery ui dialog which I have the following code
example tr
<tr>
<td>
<div id="subscriberNote" style="display: none;">
long message text........
</div>
long mess...
</td>
<td>
<a id="notedetails" href="#">View note</a>
</td>
</tr>
jQuery
function subscriberNotes_onload() {
$("#subscriber_notes tr").bind("click", function() {
openDialog(this);
});
}
function openDialog(row){
$(row).closest("tr").find("td:eq(0)").find("#subscriberNote").dialog({
title: "Message",
modal: true,
width: 600,
height: 530,
buttons: {
"OK": function () { $(this).dialog("close"); }
}
}).show();
}
After the dialog is shown and closed it is removing the hidden div and so has nothing to show until the page is refreshed.
Make the last function like:
function openDialog(row){
$(row).closest("tr").find("td:eq(0)").find("#subscriberNote").dialog({
title: "Message",
modal: true,
width: 600,
height: 530,
buttons: {
"OK": function () { $(this).dialog("close"); }
},
close: function(){ $(this).dialog("destroy")}
}).show();
}
According to the docs it should revert to its original state.