buttons : {
Ok: function() {
$(this).dialog('close');
return (typeof callback == 'string') ?
window.location.href = callback :
callback();
},
Cancel: function() {
$(this).dialog('close');
return false;
}
},
For jquery UI, I need to return values the same as a javascript confirm message a 1 and a 0
I assume I do a callback, but unsure how to reference the callback...
EDIT
jsp developer stated that he doesn't neccessarily need a callback, but needs to be able to do something similar to:
if (answer == true) {
//do something
}
else {
//do something different
}
how would I do that?
You cannot do a return in a jquery dialog.
What you can do:
buttons: {
Ok: function() {
$(this).dialog('close');
callback_fn(1);
},
Cancel: function() {
$(this).dialog('close');
callback_fn(0);
}
},
//later on:
function callback_fn(bool){
//do something with the 1 or 0
}
Related
I've already been on here for a similar question, but moved this interaction in my code and have the same issue... but I believe with a different cause.
I have a page that has an "Email Me" button at the bottom of it:
http://danux.me/
When you click the "Email Me" button, an overlay should appear and with an email form in the middle of it. I had it working on a test page, and then moved all the items over to my index.html and it's not working.
My goal right now is just to get the overlay and form to pop up in the page.
I checked my paths to make sure they were right and I think they are, but I don't know how to parse or inspect php with Google's emulator to see where something might not be working.
I checked my index.html head link to the css, the javascript at the end of my index.html and then in the contact.js, there's a GET link that points down to the php file.
Also, I am unsure in the HTML how to "call"(?) the php or jquery on that button and if that's the issue. It worked before as is and I am assuming that class="contact" is what's making all this work? I don't know. I'd be interested to know how a class triggers a javascript file.
I also got ripped earlier for not having PHP, but I didn't know until today that can't be viewed, so I'll put it below. I'm not sure if it's helpful or not.
jQuery(function ($) {
var contact = {
message: null,
init: function () {
$('#contact-form input.contact, #contact-form a.contact').click(function (e) {
e.preventDefault();
// load the contact form using ajax
$.get("contact/data/contact.php", function(data){
// create a modal dialog with the data
$(data).modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["15%",],
overlayId: 'contact-overlay',
containerId: 'contact-container',
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
});
});
},
open: function (dialog) {
// dynamically determine height
var h = 280;
if ($('#contact-subject').length) {
h += 26;
}
if ($('#contact-cc').length) {
h += 22;
}
var title = $('#contact-container .contact-title').html();
$('#contact-container .contact-title').html('Loading...');
dialog.overlay.fadeIn(200, function () {
dialog.container.fadeIn(200, function () {
dialog.data.fadeIn(200, function () {
$('#contact-container .contact-content').animate({
height: h
}, function () {
$('#contact-container .contact-title').html(title);
$('#contact-container form').fadeIn(200, function () {
$('#contact-container #contact-name').focus();
$('#contact-container .contact-cc').click(function () {
var cc = $('#contact-container #contact-cc');
cc.is(':checked') ? cc.attr('checked', '') : cc.attr('checked', 'checked');
});
});
});
});
});
});
},
show: function (dialog) {
$('#contact-container .contact-send').click(function (e) {
e.preventDefault();
// validate form
if (contact.validate()) {
var msg = $('#contact-container .contact-message');
msg.fadeOut(function () {
msg.removeClass('contact-error').empty();
});
$('#contact-container .contact-title').html('Sending...');
$('#contact-container form').fadeOut(200);
$('#contact-container .contact-content').animate({
height: '80px'
}, function () {
$('#contact-container .contact-loading').fadeIn(200, function () {
$.ajax({
url: '/contact/data/contact.php',
data: $('#contact-container form').serialize() + '&action=send',
type: 'post',
cache: false,
dataType: 'html',
success: function (data) {
$('#contact-container .contact-loading').fadeOut(200, function () {
$('#contact-container .contact-title').html('Thank you!');
msg.html(data).fadeIn(200);
});
},
error: contact.error
});
});
});
}
else {
if ($('#contact-container .contact-message:visible').length > 0) {
var msg = $('#contact-container .contact-message div');
msg.fadeOut(200, function () {
msg.empty();
contact.showError();
msg.fadeIn(200);
});
}
else {
$('#contact-container .contact-message').animate({
height: '30px'
}, contact.showError);
}
}
});
},
close: function (dialog) {
$('#contact-container .contact-message').fadeOut();
$('#contact-container .contact-title').html('Goodbye...');
$('#contact-container form').fadeOut(200);
$('#contact-container .contact-content').animate({
height: 40
}, function () {
dialog.data.fadeOut(200, function () {
dialog.container.fadeOut(200, function () {
dialog.overlay.fadeOut(200, function () {
$.modal.close();
});
});
});
});
},
error: function (xhr) {
alert(xhr.statusText);
},
validate: function () {
contact.message = '';
if (!$('#contact-container #contact-name').val()) {
contact.message += 'Name is required. ';
}
var email = $('#contact-container #contact-email').val();
if (!email) {
contact.message += 'Email is required. ';
}
else {
if (!contact.validateEmail(email)) {
contact.message += 'Email is invalid. ';
}
}
if (!$('#contact-container #contact-message').val()) {
contact.message += 'Message is required.';
}
if (contact.message.length > 0) {
return false;
}
else {
return true;
}
},
validateEmail: function (email) {
var at = email.lastIndexOf("#");
// Make sure the at (#) sybmol exists and
// it is not the first or last character
if (at < 1 || (at + 1) === email.length)
return false;
// Make sure there aren't multiple periods together
if (/(\.{2,})/.test(email))
return false;
// Break up the local and domain portions
var local = email.substring(0, at);
var domain = email.substring(at + 1);
// Check lengths
if (local.length < 1 || local.length > 64 || domain.length < 4 || domain.length > 255)
return false;
// Make sure local and domain don't start with or end with a period
if (/(^\.|\.$)/.test(local) || /(^\.|\.$)/.test(domain))
return false;
// Check for quoted-string addresses
// Since almost anything is allowed in a quoted-string address,
// we're just going to let them go through
if (!/^"(.+)"$/.test(local)) {
// It's a dot-string address...check for valid characters
if (!/^[-a-zA-Z0-9!#$%*\/?|^{}`~&'+=_\.]*$/.test(local))
return false;
}
// Make sure domain contains only valid characters and at least one period
if (!/^[-a-zA-Z0-9\.]*$/.test(domain) || domain.indexOf(".") === -1)
return false;
return true;
},
showError: function () {
$('#contact-container .contact-message')
.html($('<div class="contact-error"></div>').append(contact.message))
.fadeIn(200);
}
};
contact.init();
});
Is this the functionality you are looking for?
See:
http://www.joecodeman.com/ITServices/Demos/jQuery/ShowDemo_v01a.html
If this is the effect dgbenner is looking for... then it is just a matter of organizing his/her code so it works correctly.
The basic effect dgbenner is trying to achieve is very simple. Therefore, the code just needs to be organized correctly.
This is the basic code / pseudo code:
//1) run the currently selected effect
function runEffect() {
//2) Hide the button`
$( "#eMailButton" ).fadeOut();
//3) Show the email form
$( "#effect" ).show( selectedEffect, options, 500, callback );
//4) Hide the email form and show the button again ( 4 seconds later in this demo...)
// other effects and actions can be coded when the user submits his/her info..)
function callback() {
setTimeout(function() {
$( "#effect:visible" ).removeAttr( "style" ).fadeOut();
$( "#eMailButton" ).fadeIn();
}, 4000 );
};
I am trying to make a jQuery popup to delete the record from table.
Here's what I am doing to call my function:
echo '<div id="dialog-confirm">'.'<td>' . '<input type="image" src="delete.png" id = "deleteconfirm" style = "height:20px;margin-left :8px;" onclick = "deleterecord('.$row['id'].')">' . '</td>'.'</div>';
And here's my function:
function deleterecord ( id ) {
function fnOpenNormalDialog() {
$("#dialog-confirm").html("Confirm Dialog Box");
// Define the Dialog and its properties.
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Modal",
height: 250,
width: 400,
buttons: {
"Yes": function () {
$(this).dialog('close');
callback(true);
},
"No": function () {
$(this).dialog('close');
callback(false);
}
}
});
}
$('#deleteconfirm').click(fnOpenNormalDialog);
function callback(value) {
if (value) {
window.location.href = 'delete_ven.php?id=' + id;
} else {
alert("Rejected");
}
}
}
Any help? It's not working.
Your callback method doesn't get any information about row ID. For example you could change following lines:
callback(true);
to
callback(id);
and
window.location.href = 'delete_ven.php?id=' + id;
to
window.location.href = 'delete_ven.php?id=' + value;
Edit: Additionally remove all lines containing "fnOpenNormalDialog" and fix the code accordingly. The click event is assigned in html already, and the function inside function isn't meant work this way.
I want to avoid redirection of link to another if my javascript function returns false.
javascript function to be executed when link is clicked(It checks if flag is set or not):
function checkFlag() {
alert("In check flag");
var href = $(this).attr('href');
var var1;
var flag = '<%=Session["hdnFlagInd"]%>';
alert("flag : "+flag);
if (flag == "1") {
$.confirm({
'title': 'Confirmation',
'message': 'Do you want to leave this screen without saving your work?',
'buttons': {
'Yes': {
'class': 'blue',
'action': function () {
alert("Yes clicked");
'<%Session["hdnFlagInd"]="";%>'
return true;
}
},
'No': {
'class': 'gray',
'action': function () {
alert("No Clicked");
return false;
}
}
}
});
}
}
Link inside aspx file:
<li><a ID="link_Individual2" runat="server"
href="~/Views/Individuals/Individual.aspx" onclick="return checkFlag();">Individual</a></li>
The above code is not working for me please help me out.!
Try this (remove the inline javascript)
$(function() {
$("#link_Individual2").on("click",function(e) {
e.preventDefault(); // always stop link and handle in dialog
var href = this.href;
var flag = '<%=Session["hdnFlagInd"]%>';
if (flag == "1") {
// place preventdefault here if you want to only handle click if flag is 1
$.confirm({
'title': 'Confirmation',
'message': 'Do you want to leave this screen without saving your work?',
'buttons': {
'Yes': {
'class': 'blue',
'action': function () {
alert("Yes clicked");
'<%Session["hdnFlagInd"]="";%>'
location = href;
}
},
'No': {
'class': 'gray',
'action': function () {
alert("No Clicked");
}
}
}
});
}
}
The confirm dialog you are using will not make the checkFlag function return a boolean value, because the action functions are executed later and the client is not stopped to wait for a result.
You can try using a Client standard confirm like the following :
function checkFlag() {
alert("In check flag");
var href = $(this).attr('href');
var flag = '<%=Session["hdnFlagInd"]%>';
alert("flag : "+flag);
if (flag == "1") {
return confirm('Do you want to leave this screen without saving your work?');
}
}
Using the confirm(); function will stop the UI from running the script until an option is chosen.
I don't know of a way to do this without using the standard window.confirm(); function, you may have to create a workaround to execute some code after they select Yes to initiate a redirect.
Edit :
See #mplungjan's answer for a way to do this with your custom confirm dialog.
I'm not able to reload dynatree after I received response for AJAX request.
I've a pulldown 'plan.viewType' in code below. I'm invoking a JS function upon a new value selected in this pulldown which will in turn call an AJAX function.
<form:select path="plan.viewType" id="viewType" style="width:11.6em" onChange="loadView()" multiple="false">
<form:options items="${plan.viewType}"/>
</form:select>
I've two trees - dim_tree and kpi_tree.
$(document).ready(function(){
$.fn.clearable = function (treeid) {
var $this = this;
$this.wrap('<div class="clear-holder" />');
var helper = $('<span class="clear-helper">x</span>');
$this.parent().append(helper);
helper.click(function(){
$this.val("");
$('#' + treeid).dynatree('getRoot').search("");
});
};
$("#dimsearch").clearable("dim_tree");
$("#kpisearch").clearable("kpi_tree");
$("#dim_tree").dynatree({
checkbox: true,
selectMode: 3,
children: (isEdit == "true")? eval('('+'${plan_dimension_edit_info}'+')') : eval('('+'${plan_dimension_info}'+')'),
dnd: {
onDragStart: function (node) {
return false;
},
onDragStop: function (node) {
return false;
},
onDragOver: function (targetNode, sourceNode, hitMode) {
return false;
},
onDrop: function (targetNode, sourceNode, hitMode, ui, draggable) {
return false;
}
},
onSelect: function(select, node) {
if(select && dimKPIMisMatch(node)) {
node.select(false);
//showToolTip(node.span, dimMsg);
return;
}
createTreeSortable(select, node, "DIM");
}
});
$("#kpi_tree").dynatree({
checkbox: true,
selectMode: 3,
children: (isEdit == "true")? eval('('+'${plan_measurement_edit_info}'+')') : eval('('+'${plan_measurement_info}'+')'),
dnd: {
onDragStart: function (node) {
return false;
},
onDragStop: function (node) {
return false;
},
onDragOver: function (targetNode, sourceNode, hitMode) {
return false;
},
onDrop: function (targetNode, sourceNode, hitMode, ui, draggable) {
return false;
}
},
onSelect: function(select, node) {
if(select && kpiDIMMisMatch(node)) {
node.select(false);
//showToolTip(node.span, kpiMsg);
return;
}
createTreeSortable(select, node, "KPI");
}
});
});
I would like to reload these two trees when I get response from AJAX call below.
var loadView = function() {
if($("#viewType").val() == "Default View") {
$.ajax({
url : "planmntsdefault.do",
type : "GET",
success : function (data) {
var node = $("#dim_tree").dynatree("getTree").getRoot();
if(node && node.isLazy())
{
node.reloadChildren(function(node, isOk){
if(!isOk) alert("Node " + node + " could not be reloaded.");
else alert("Tree reloaded");
});
}
else
{
node.activate();
node.reloadChildren(function(node, isOk){
if(!isOk) alert("Node " + node + " could not be reloaded.");
else alert("Tree reloaded");
});
}
node = $("#kpi_tree").dynatree("getTree").getRoot();
if(node && node.isLazy())
{
node.reloadChildren(function(node, isOk){
if(!isOk) alert("Node " + node + " could not be reloaded.");
else alert("Tree reloaded");
});
}
else
{
node.activate();
node.reloadChildren(function(node, isOk){
if(!isOk) alert("Node " + node + " could not be reloaded.");
else alert("Tree reloaded");
});
}
},
error : function ( xhr, textStatus, error ) {
}
});
}
}
I referred to other posts how to reload/refresh/reinit DynaTree? which didn't resolve the problem. I've tried another variation where I do destroy and reload. Neither of these approaches work. Am I missing something here? Thanks.
You could try this:
success : function (data) {
$("#dim_tree").dynatree("getTree").reload();
$("#kpi_tree").dynatree("getTree").reload();
},
you can solve your problem by three method if you want to add new data and response come by ajax then u can add following code in dynatree
jQuery
$.ajax({
url : "planmntsdefault.do",
type : "GET",
success : function (data) {
var node = $("#dim_tree").dynatree("getTree").getRoot();
/*here you can use i assume title
come (by this name of root is set in
dynatree and if set isFolder :true then
folder icon appear in dyna tree*/
var childNode = node.addChild({ title: data.title,
isFolder: true
});
}
})
and if u want to edit some root name then you can use
In Previous Code Where We Use Add Set Below Line
var node = $("#tree").dynatree("getActiveNode");
node.data.title = $newtitle;
And For Delete
var node = $("#tree").dynatree("getActiveNode");
activeNode.remove();
these all steps when we apply then it look that dyna tree referesh hope it make help
I am using this question as the basis for a multipurpose jQueryUI dialog function that I can reuse in my site Question 17013222 I want to be able to reuse the code to display different buttons with callbacks defined in the function call
However, I don’t get the result I need when extending this answer to use a callback function. The callback function is running as I build the dynamic buttons instead of when the Dialog Save button is pressed.
I have a jsFiddle here that shows my incompetence jsFiddle
What do I need to do to get the callback to run as the Save button is clicked?
Below is the simplified code snippet
function showDialog(inToDisplay, inTitle, buttonSetup, inSaveCallback) {
'use strict';
var dialog_buttons = {};
$('#jqDialog').load(inToDisplay + '.asp', function () {
$(this).attr('title', inTitle);
/*Build our button choices*/
if (buttonSetup === 'closeonly') {
dialog_buttons['Close'] = function () {
$(this).dialog("close");
$(this).dialog("destroy");
}
} else if (buttonSetup === 'savecancel') {
dialog_buttons['Save'] = function () {
if (inSaveCallback && typeof (inSaveCallback) === "function") {
inSaveCallback;
};
$(this).dialog("close");
$(this).dialog("destroy");
}
dialog_buttons['Close'] = function () {
$(this).dialog("close");
$(this).dialog("destroy");
}
}
$(this).dialog({
autoOpen: false,
modal: true,
open: function (event, ui) {
},
buttons: dialog_buttons
});
$('#jqDialog').dialog('open');
});
}
function saveAnswer() {
alert('ToDo: Save data here');
}
$(document).ready(function () {
showDialog('ajax_manageAnswer', 'Enter your answer details', 'savecancel', saveAnswer());
});
here... http://jsfiddle.net/reigel/zpyNM/
change this
$(document).ready(function () {
showDialog('ajax_manageAnswer', 'Enter your answer details', 'savecancel', saveAnswer); // remove () on saveAnswer...
});
and this
dialog_buttons['Save'] = function () {
if (inSaveCallback && typeof (inSaveCallback) === "function") {
inSaveCallback(); // add -->> ()
};
$(this).dialog("close");
$(this).dialog("destroy");
}