I have a website that shows a jQuery dialogue with a TextArea inside it. It also has a save button, what I'm trying to do is to pass the data from the TextArea to MySQL database table.
onEdit: function (ev, elem) {
var $elem = $(elem);
$('#NoteDialog').remove();
return $('<div id="NoteDialog"></div>').dialog({
title: "Note Editor",
resizable: false,
modal: true,
height: "300",
width: "450",
position: { my: "left bottom", at: "right top", of: elem},
buttons: {
"Save": function () {
var txt = $('textarea', this).sceditor("instance").val();
// Put the editied note back into the data area of the element
// Very important that this step is included in custom callback implementations
$elem.data("note", txt);
$(this).dialog("close");
},
"Delete": function () {
$elem.trigger("remove");
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
open: function (event, ui) {
$(this).css("overflow", "hidden");
var textarea = $('<textarea id="txt" name="text" style="height:100%; width:100%;">');
$(this).html(textarea);
// Get the note text and put it into the textarea for editing
textarea.val($elem.data("note"));
textarea.sceditor({
resizeEnabled: false,
style: "jquery.sceditor.min.css",
toolbar: 'bold,italic,underline,subscript,superscript|left,center,right,justify|orderedlist,bulletlist,link,image',
width: '100%',
height: '100%'
});
},
close: function (event, ui) {
$("textarea").sceditor("instance").destroy();
}
});
When you click on the button save, send an AJAX request with your textarea data to a PHP file
$.ajax({
type:"POST",
cache:false,
url:"file.php",
data: {data : your_text_area_data} ,
success: function (result) {
//Write there
//If your php file sends back info, it's in the variable result
}
});
In your php file file.php, get your data back and do the query to your data base:
The data from your textarea can be accessed with : $_POST['data'] and then do your query :
INSERT/UPDATE ...
Edit : no need to add a callback as I mentionned in the comment (I'm assuming your code is working as it is), you can add the $.ajax when your SAVE button is triggered :
"Save": function() {
var txt = $('textarea', this).sceditor("instance").val();
//Put the editied note back into the data area of the element
//Very important that this step is included in custom callback implementations
$elem.data("note", txt);
//$.ajax here
$(this).dialog("close");
},
Related
Although the subject of keyboard shortcuts has been treated here often, I cannot account for the following.
1) I put up a jQuery dialog
function statements ()
{
/* Initialization */
$.ajax
({
url: '/comeAndGo/MOVEMENTS/statements.php',
type: "GET",
dataType: 'html',
async: false,
success: function (data) { $('#mainContainer').html(data); },
error: function () { alert("Error"); }
});
$("#DLG_Statements").dialog(
{
title:"Statements",
height: 560, width: 600,
modal: true,
position: {my: "top", at: "top+60"},
buttons:
[
{
id: "bCancel",
text: "Dismiss",
click: function ()
{
$(this).dialog("close");
location.href = gPath + "homePage.php";
}
},
{
id: "bOK",
text: "OK",
click: function () {}
}
],
draggable: false,
closeOnEscape: false, // (5)
resizable: false
});
$(document).bind('keydown', 'Alt+j', function () { alert ('jquery.hotkeys'); });
}
2) The DLG_Statements is within a <div> inside a form which is part of statements.php. It includes several input elements such as radio buttons, drop-down menus, text input, a check-box.
MY PROBLEM
1) The jquery.hotkeys call does not respond when the cursor is positioned inside certain div's such as a text input field;
2) The jquery.hotkeys call responds unpredictably (it does/it does not) as a consequence of my clicking in different zones of the dialog;
3) The jquery.hotkeys call does not respond at all if I try and be more specific as to the jQuery wrapper, e.g. $("#DLG_Statements").bind (etc.)
What is it I am doing wrong?
I am using the qtip2 Jquery plug-in to provide suggestions on keyup in an input but what I would like to do is instead of refreshing the entire tool-tip bubble every time the content is updated id rather just refresh the content of the tool-tip without closing it.
So effectively if there is no tool tip present it will show the tool-tip and call the content via Ajax but if there is an existing tool-tip it will just update the content of the existing tool tip.
http://jsfiddle.net/fDavN/11723/
Ok Iv updated my code and it kinda works but I am getting an error: typeError: $(...).updateContent is not a function.
Anbody know why?
$(document).ready(function() {
var title = 'KnowledgeBase Suggestions';
$('#name').on("keyup", function () {
if($(this).data('qtip') ) {
var getFormUrl = "http://qtip2.com/demos/data/owl";
$.ajax({ url: getFormUrl,
success: function (data) {
$(this).updateContent($(".qtip-content").html(data));
}
});
}
else {
$(this).qtip({
content: {
text: "Loading...",
ajax:{
url: 'http://qtip2.com/demos/data/owl', // Use href attribute as URL
type: 'GET', // POST or GET
data: {}, // Data to pass along with your request
success: function(data, status) {
// Process the data
// Set the content manually (required!)
this.set('content.text', data);
}
},
title: {
button: true,
text: title
}
},
position: {
my: 'top left',
at: 'center right',
adjust: {
mouse: false,
scroll: false,
y: 5,
x: 25
}
},
show: {
when: false, // Don't specify a show event
ready: true, // Show the tooltip when ready
delay: 1500,
effect: function() {
$(this).fadeTo(800, 1);
}
},
hide: false,
style: {
classes : 'qtip-default qtip qtip qtip-tipped qtip-shadow', //qtip-rounded'
tip: {
offset: 0
}
}
});
}
});
});
A stab in the dark as I don't know what updateContent does but you might have an issue with how you are referencing $(this)
try changing
$('#name').on("keyup", function () {
var $this = $(this);
if($this.data('qtip') ) {
var getFormUrl = "http://qtip2.com/demos/data/owl";
$.ajax({ url: getFormUrl,
success: function (data) {
$this.updateContent($(".qtip-content").html(data));
}
});
}
else {
....
the reason is this is a different this when inside the ajax callback
I am working with JQuery dialog which is opened before an ajax call and on returning from the ajax call the dialog('close') is executed. below statement opens up the busy dialog box as a banner (with no ok or cancel option):
$('.updateActionsTasks').live('click', function ()
{$('#modalBusy').html('<span>Busy...Please Wait.</span>').dialog({ dialogClass: 'no-close', resizable: false, width: 100, height: 100, modal: true, title: 'Busy' });
More code goes here ...
//Ajax function call goes here
However, the close method work correctly only once. Upon executing the click again, the dialog opens up but never gets closed. The line with tag 'COMM' executes but does not close the dialog from second time execution on wards.
function ActionWorklistItem(serviceUrl, worklistActionItems, actionName, ActiveTab) {
$.ajax({
type: "GET",
url: serviceUrl,
dataType: ($.browser.msie) ? "text" : "xml",
success: function (data) {
var xml;
if (typeof data == "string") {
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.loadXML(data);
} else {
xml = data;
}
var xmlText = $(xml).text();
xmlObj = $.parseXML(xmlText);
if ($(xmlObj).find('IsSuccess').text() == 'true') {
$('#modalBusy').dialog('close'); //COMM: This always executes
__doPostBack($('.upWorklistCtrlID').val(), ActiveTab);
} else {
$('#modalBusy').dialog('close');
//Create error msg dialog }
},
error: function (xhr, ajaxOptions, thrownError) {
$('#modalBusy').dialog('close');
//Create error msg dialog
}
});
Instead of initializing the dialog each click, initialize it once and then just open it when the link is clicked:
$('#modalBusy').html('<span>Busy...Please Wait.</span>').dialog({ autoOpen : false, dialogClass: 'no-close', resizable: false, width: 100, height: 100, modal: true, title: 'Busy' });
$('.updateActionsTasks').live('click', function () {
$('#modalBusy').dialog('open');
The autoOpen : false option will make it so the dialog does not open when it's initialized.
Following line seems to have done the trick.
$('#modalBusy').dialog('destroy').remove();
I have 2 functions declared makeAjaxCall and editOrderDetails
editOrderDetails executes makeAjaxCall to go and get a json object with the results of the call.
function editOrderDetails()
{
makeAjaxCall(
baseurl+'/orderoutbound/editorderdetails',
'orderID='+orderID+'&customerReference='+("#orderReference").val()+'&email='+$("#emailAddress").val(),
function(data){
if(data.success)
{
$("#editOrderDetailsErrorDiv").html(successDiv(data.generalMessage));
$(".customerReferenceSpan").html(data.order.customerReference);
$(".emailSpan").html(data.order.emailAddress);
}else{
$("#editOrderDetailsErrorDiv").html(errorDiv(data.generalMessage));
$("#emailAddressErrorDiv").html(data.errors.emailAddress);
}
},
function(data) {
$("#editOrderDetailsErrorDiv").html(errorDiv("There was an error.."));
}
);
}
now i'm using a jquery dialog to work with
$("#editOrderDetailsDialog").dialog('destroy').dialog({
autoOpen: false,
title: 'Edit Order Details',
closeOnEscape: true,
width: 500,
height: 300,
buttons:{
"Save": function() { editOrderDetails(); },
"Cancel": function() { $(this).dialog("close"); }
}
});
as my save call back function i'm trying to set my editOrderDetails function.
This however doesnt work and i'm guessing it has something to do with the scopeing.
i have tried declaring var editOrderDetails = function(){}; outside of any and all jquery doc ready functions
i have also tried window.editOrderDetails()
also instead of making a function wrapping the function call
i have tried putting the function into a variable var editOrderDetails = function(){};
then "save" : editOrderDetails
i'm at a loss. any ideas would be appreciated ?
PS yes the dialog works correctly. if i place an alert in the callback function it executes when i click save.
<script type="text/javascript">
<!--
var orderID = '<?= $this->orderID; ?>';
var customerID = '<?= $this->customerID; ?>';
//################ PAGE FUNCTIONS ################
//MAKE AN AJAX CALL
function makeAjaxCall(ajaxUrl, data, functionSuccess, functionFailure){
$.ajax(
{
type: "GET",
url: ajaxUrl,
contentType: "application/json; charset=utf-8",
data: data,
dataType: "json",
success: functionSuccess,
error: functionFailure
});
}
//END MAKE AN AJAX CALL
//EDIT ORDER DETAILS
function editOrderDetails()
{
makeAjaxCall(
baseurl+'/orderoutbound/editorderdetails',
'orderID='+orderID+'&customerReference='+("#orderReference").val()+'&email='+$("#emailAddress").val(),
function(data){
if(data.success)
{
$("#editOrderDetailsErrorDiv").html(successDiv(data.generalMessage));
$(".customerReferenceSpan").html(data.order.customerReference);
$(".emailSpan").html(data.order.emailAddress);
}else{
$("#editOrderDetailsErrorDiv").html(errorDiv(data.generalMessage));
$("#emailAddressErrorDiv").html(data.errors.emailAddress);
}
},
function(data) {
$("#editOrderDetailsErrorDiv").html(errorDiv("There was an error.."));
}
);
}
//END EDIT ORDER DETAILS
//################ END PAGE FUNCTIONS ################
$(function() {
// EDIT ORDER DETAILS DIALOG
$("#editOrderDetailsDialog").dialog('destroy').dialog({
autoOpen: false,
title: 'Edit Order Details',
closeOnEscape: true,
width: 500,
height: 300,
buttons:{
"Save": function() { editOrderDetails(); },
"Cancel": function() { $(this).dialog("close"); }
}
});
// END EDIT ORDER DETAILS DIALOG
});
//-->
</script>
You are missing a $ in the call to makeAjaxCall.
'orderID='+orderID+'&customerReference='+("#orderReference").val()+'&email='+$("#emailAddress").val(),
Becomes:
'orderID='+orderID+'&customerReference='+$("#orderReference").val()+'&email='+$("#emailAddress").val(),
This http://jsfiddle.net/jQRyq/8/ works fine for me, could you post a bit more of your code for context? Specifically where the editOrderDetails functions is defined.
I am having a hell of a time trying to figure out why the code below crashes when the dialog is closed or cancelled. It errors on lines that use ($this) in the dialog button function.
For some reason if I hard code values into addTaskDialog.html(AddTaskForm); it works. I have even hardcoded the returned ajax form and it worked... This problem happens in all browsers.
$(function ()
{
/*
* Initializes AddTask Dialog (only needs to be done once!)
*/
var $dialog = $('<div></div>').dialog(
{
width: 580,
height: 410,
resizable: false,
modal: true,
autoOpen: false,
title: 'Basic Dialog',
buttons:
{
Cancel: function ()
{
$dialog.dialog('close');
},
'Create Task': function ()
{
}
},
close: function ()
{
$dialog.dialog('close');
}
});
/*
* Click handler for dialog
*/
$('#AddTask').click(function ()
{
/* Ajax request to load form into it */
$.ajax({
type: 'Get',
url: '/Planner/Planner/LoadAddTaskForm',
dataType: 'html',
success: function (AddTaskForm)
{
$dialog.html(AddTaskForm);
$dialog.dialog('open');
}
});
});
});
});
Ok I think I know what is going on. On your success callback you are referencing $(this) in AddTaskDialogOptions the problem is that the in this scope $(this) no longer refers to $("#AddTask") so you will need to set a variable to keep a reference to $(this) like so:
var that;
$('#AddTask').click(function ()
{
that = $(this);
/* Ajax request to load form into it */
$.ajax({
type: 'Get',
url: '/Planner/Planner/LoadAddTaskForm',
dataType: 'html',
success: function (AddTaskForm)
{
var addTaskDialog = $('<div></div>');
addTaskDialog.dialog(AddTaskDialogOptions);
addTaskDialog.html(AddTaskForm);
addTaskDialog.dialog('open');
}
});
});
var AddTaskDialogOptions = {
width: 580,
height: 410,
resizable: false,
modal: true,
autoOpen: false,
title: 'Basic Dialog',
buttons:
{
Cancel: function ()
{
that.dialog('close');
},
'Create Task': function ()
{
}
},
close: function ()
{
that.dialog('destroy').remove();
}
}
I figured it out. I'm not sure where I got this code, but it was causing the problems, so I took it out and it all works fine.
close: function ()
{
$dialog.dialog('close');
}