I use jstree and jquery-ui v1.10.1 .I use context menu on tree and i want before delete node show confirm dialog(like jquery-ui dialog).
I use dialog in "before.jstree" event, but when show dialog box, before an option is selected(yes or no) ,the selected node is deleted.
How to solve this problem?
.bind("before.jstree", function(e, data) {
if (data.func === "remove") {
if (!confirmRemove()) {
e.stopImmediatePropagation();
return false;
}
}
}
function confirmRemove() {
return $confirmDialog.dialog('open');
}
I'm using the 2.1.0 version and there is another solution for this functionality.
What you have to do is add a function to the check_callback option.
Like this:
$("#your_tree").jstree({
"core": {
"check_callback": function (operation, node, node_parent, node_position, more) {
// operation can be 'create_node', 'rename_node', 'delete_node', 'move_node', 'copy_node' or 'edit'
// in case of 'rename_node' node_position is filled with the new node name
if (operation === 'delete_node') {
if (!confirmRemove()) {
return false;
}
}
return true;
}
}
I know that this is an old question, but i looked for a more recent question/answer and didn't find it.
Hope it helps to other people that will have the same question :)
The JQuery-UI-Dialog is asynchronous; If you call it, your eventhandler does not stop execution and waits, but goes on and deletes the Node.
Try the JavaScript-Dialog confirm() since this is synchronous and stops further execution until the User confirmed or declined the Dialog.
Related
I’m just starting with Forge and JIRA apps development, I need to open a ModalDialog when an issue changes its state to “Done” (either by dragging it to the Done column or by changing its status in the issue panel). I don’t know where to start, I tried clonning the jira-issue-activity-ui-kit starter but I don’t get where the modal should open, any ideas? Thanks
This is the code I've tried:
const DONE = 'Done';
export async function run(event, context) {
console.log('Hello World!', event, event.changelog.items);
// if the issue is solved (status changed to Done)
if (event.changelog.items.some(function changedToPreferredStatus(change) {
return statusChangedTo(change, DONE);
})) {
let description = event.issue.fields.summary;
// OPEN MODAL DIALOG HERE
}
}
function statusChangedTo(change, to) {
return change.field === 'status' && change.toString === to;
}
I'm loading the Zendesk web widget into a page, and this is the event handler for when it's loaded in
scriptElement.onload = function () {
zE(function () {
$zopim(function () {
$zopim.livechat.button.setHideWhenOffline(true);
$zopim.livechat.setOnStatus(function (status) {
console.log('status',status);
status === 'online' ? $zopim.livechat.button.show() : $zopim.livechat.button.hide();
});
$zopim.livechat.setStatus('offline');
});
});
};
It has the setOnStatus event handler which should trigger anytime the status changes. It seems to be triggered once when the page initially loads in. You'd expect it to be triggered as well everytime I call the setStatus method, but that's not the case. Where I log the status, it's always just 'online', and it only happens once.
What I'm trying to do is force the button to disappear when the status is offline. Yet setting the status to 'offline' doesn't hide the button, just displays the offline version (i.e. a button which lets me send an offline message, rather than a live chat).
I thought the setHideWhenOffline method might have helped, but that doesn't seem to make any difference in this case.
Any ideas?
Actually I found the solution I needed here, this prevents the offline button appearing.
window.zESettings = {
webWidget: {
contactForm: {
suppress: true
}
}
};
https://developer.zendesk.com/embeddables/docs/widget/settings#suppress
I made a simple page with some divs being sortable by the jQuery UI Sortable, with a little help from Touch Punch to get it working on an iPad running iOS 7.1.2.
Inside each of these divs, I included a text input tag. On desktop browsers the inputs work fine, but the iPad doesn't recognize the click on the input component. The keyboard isn't launched and I can't type into it. Any lights?
My page is here: https://www.dropbox.com/s/5crp55r9jw98var/sortableTest.zip?dl=0
Well, here's what worked for me.
I edited the jquery.js. On jQuery.Event.prototype, inside the preventDefault function, there is:
if ( e.preventDefault ) {
e.preventDefault();
} else {
e.returnValue = false;
}
Basically, I changed the if condition to e.preventDefault && e.target.tagName != "INPUT". It solved the example, but in the real life I needed to add some more conditions to ensure that other input fields won't get caught by this.
Change in jquery.ui.touch-punch.js worked for me.
JS: jquery.ui.touch-punch.js
Method to modify:
//line: 31
function simulateMouseEvent(event, simulatedType) {
//...
}
//changes to add ++
if ($(event.target).is("input") || $(event.target).is("textarea")) {
return;
} else {
event.preventDefault();
}
I know this is an old question but got the following to work for me without modifying the JS files:
let detectTap = false;
$('body').on('touchstart', '#sortableMenu input', () => {
detectTap = true;
});
$('body').on('touchmove', '#sortableMenu input', () => {
detectTap = false;
});
$('body').on('touchend', '#sortableMenu input', (e) => {
if (detectTap) $(e.target).focus();
});
Basically just adding a tap listener on the inputs, and when it gets the tap, focus on that input.
Is there any way to handle back button (device backbutton) as default functionality to move back page? I need to implement the same functionality on back button goes to previous page. If there is no previous page (first page) it exit the application. Is this possible in PhoneGap?
I also need to pop page before going to push another page is this posible in jQuery?
Checking window.location.length would be the easiest way to determine if you're on the first page, but this isn't available in Phonegap.
But since you're using JQM, you can either use the navigate event as Omar suggests or could manually count the number of pages shown and the number of pages gone back (same thing) and use this to determine if the first page is being shown and whether to exit the app. Something like this would work:
var pageHistoryCount = 0;
var goingBack = false;
$(document).bind("pageshow", function(e, data) {
if (goingBack) {
goingBack = false;
} else {
pageHistoryCount++;
console.log("Showing page #"+pageHistoryCount);
}
});
function exitApp() {
console.log("Exiting app");
navigator.app.exitApp();
}
function onPressBack(e) {
e.preventDefault();
if(pageHistoryCount > 0) pageHistoryCount--;
if (pageHistoryCount == 0) {
navigator.notification.confirm("Are you sure you want to quit?", function(result){
if(result == 2){
exitApp();
}else{
pageHistoryCount++;
}
}, 'Quit My App', 'Cancel,Ok');
} else {
goingBack = true;
console.log("Going back to page #"+pageHistoryCount);
window.history.back();
}
}
function deviceready() {
$(document).bind('backbutton', onPressBack);
}
$(document).bind('deviceready', deviceready);
As for the second part of your question:
Secondly i need to pop page before going to push another page is this
posible in jquery ?
It's not clear what you're asking here. Do you mean you want to show some kind of popup content like a dialog between every page change? Please clarify then I can help you :-)
I'm developing an MVC4 mobile app using Visual Studio 2012 with jQuery Mobile. I need to remember the state of checkboxes and radio buttons so I store their value in a cookie. When I come back to the page in the pageinit event I set the values but the controls never update visually. Using Firebug with the page rendering as mobile I can see that the values changed correctly. I've tried calling checkboxradio('refresh') on the element like this:
$('#btnCompany').prop('checked', true)checkboxradio('refresh');
but I always get an error saying checkboxradio is undefined and not supported. I know the control is a radio button. To try and work around the problem I extracted the code in jQuery Mobile to refresh a radio button and checkbox which I call and again I can clearly see in Firebug that not only is the input checked correctly but the label classes have changed appropriately. However, visually nothing changes, they look like they did originally. Am I missing something? Why am I getting an error saying checkboxradio is not supported even when I call this in the pageinit event:
$("input[type='radio']").checkboxradio("refresh");
I've tried refreshing by hiding then showing the containing div but that failed. Nothing I've tried refreshes the controls visually. Any and all help would be greatly appreciated!!!
Here are the functions I'm calling to refresh the page bypassing checkboxradio. Here is the function I call to try and work around the problem:
function SetSearchFormState() {
if ($.cookie('cmdSearchForm') != null) {
//$('#searchParamsDiv').hide();
var formData = JSON.parse($.cookie('cmdSearchForm'));
$('#SearchText').val(formData.SearchText);
// Set all search buttons to not selected.
$('.searchBtn').each(function () {
$(this).prop('checked', false);
RefreshCheckboxRadio(this, false);
});
// Set the appropriate search button selected.
$('#hidSearch').val(formData.hidSearch);
switch (formData.hidSearch) {
case 'Opportunity':
$('#btnOpportunity').prop('checked', true);
RefreshCheckboxRadio($('#btnOpportunity'), true);
break;
case 'Company':
$('#btnCompany').prop('checked', true);
RefreshCheckboxRadio($('#btnCompany'), true);
break;
case 'Contact':
$('#btnContact').prop('checked', true);
RefreshCheckboxRadio($('#btnContact'), true);
break;
}
// Set all status buttons to not selected.
$('.statusBtn').each(function () {
$(this).prop('checked', false);
RefreshCheckboxRadio(this, false);
});
// Set the appropriate status button selected.
$('#hidStatus').val(formData.hidStatus);
switch (formData.hidStatus) {
case 'Lead':
$('#btnLead').prop('checked', true);
RefreshCheckboxRadio($('#btnLead'), true);
break;
case 'Prospect':
$('#btnProspect').prop('checked', true);
RefreshCheckboxRadio($('#btnProspect'), true);
break;
case 'Customer':
$('#btnCustomer').prop('checked', true);
RefreshCheckboxRadio($('#btnCustomer'), true);
break;
}
// Set the appropriate include button selected.
$('#hidAllUsers').val(formData.hidAllUsers);
$('#btnAllUsers').prop('checked', false);
RefreshCheckboxRadio($('#btnAllUsers'), false);
if (formData.hidAllUsers == 'True') {
$('#btnAllUsers').prop('checked', true);
RefreshCheckboxRadio($('#btnAllUsers'), true);
}
$('#hidDead').val(formData.hidDead);
$('#btnDead').prop('checked', false);
RefreshCheckboxRadio($('#btnDead'), false);
if (formData.hidDead == 'True') {
$('#btnDead').prop('checked', true);
RefreshCheckboxRadio($('#btnDead'), true);
}
//$('#searchParamsDiv').show();
$("input[type='radio']").checkboxradio("refresh");
$("input[type='checkbox']").checkboxradio("refresh");
}
};
And here is the function that I extracted out of jQuery mobile's checkboxradio refresh method:
function RefreshCheckboxRadio(control, value) {
if ($(control).is(':radio')) {
var parent = $(control).parent('div');
var controlId = $(control).attr('id');
var label = $(parent).find("label[for='" + controlId + "']");
var icon = $(label).find(".ui-icon");
//$(parent).hide();
if (value == false) {
$(control).removeAttr('checked');
$(label).removeClass('ui-radio-on ui-button-active').addClass('ui-radio-off');
$(icon).removeClass('ui-icon-radio-on').addClass('ui-icon-radio-off');
} else if (value == true) {
$(control).attr('checked', 'checked');
$(label).addClass('ui-radio-on ui-button-active').removeClass('ui-radio-off');
$(icon).addClass('ui-icon-radio-on').removeClass('ui-icon-radio-off');
}
//$(parent).show();
} else if ($(control).is(':checkbox')) {
var parent = $(control).parent('div');
var controlId = $(control).attr('id');
var label = $(parent).find("label[for='" + controlId + "']");
var icon = $(label).find(".ui-icon");
//$(parent).hide();
if (value == false) {
$(control).removeAttr('checked');
$(label).removeClass('ui-checkbox-on ui-button-active').addClass('ui-checkbox-off');
$(icon).removeClass('ui-icon-checkbox-on').addClass('ui-icon-checkbox-off');
} else if (value == true) {
$(control).attr('checked', 'checked');
$(label).addClass('ui-checkbox-on ui-button-active').removeClass('ui-checkbox-off');
$(icon).addClass('ui-icon-checkbox-on').removeClass('ui-icon-checkbox-off');
}
// $(parent).show();
}
};
After this code is run I can see the values are correct and exactly as they would be if checkboxradio('refresh') had been called. So even though I can't get checkboxradio to work, performing the work manually should work and in fact does when I view the changes in Firebug yet the controls still don't change their appearance.
After much experimentation I finally threw out this code, disabled Ajax in jQuery Mobile, then handled all of the Ajax manually. I could write a book about what I learned about developing jQuery Mobile apps with MVC4 and probably help many folks out there but alas I don't have the time nor do I get paid for doing so, sorry. I can only hope that someday somebody documents how to do things the right way so there's a single source people can turn to instead of having to spend hours searching for bits and pieces here and there.