Develop Reference

.html() not working for live update of html table after jquery $.post

I currently have a jQuery dialogue box ( http://api.jqueryui.com/dialog/ ) which when the user clicks on a table with class low_inv_notes, will pop up and allow them to enter in whatever notes they want.
The note gets properly stored in the database, however I am trying to achieve a live update of the table td when they hit submit on that dialogue box, and this is not working. If the user wants to see the updated table they must reload the page which is not something i want.
I believe my problem has something to do with .html(); I have made alerts to check the variables i am using have values and i have checked to make sure all id's and class's are properly labels.
Here is the code for my dialogue box at the moment:
$( ".low_inv_notes" ).click(function(event) {
var notes = $(this).andSelf().html();
var netQty = $(this).closest('tr').find('td:eq(6)').text();
var stockNumber = $(this).closest('tr').find('td:eq(0)').text();
var $dialog = $('<div id="dialog"></div>')
.html('<textarea id="noteContent" style="width: 450px; height: 190px;">' + notes + '</textarea>')
.dialog({ title: 'Edit This Note:',
autoOpen: false,
height: 300,
width: 500,
modal: true,
buttons: {
"Submit":function() {
var old = notes;
var new_notes = $("#noteContent").val();
if(new_notes == old){
alert("Note is the same - change to submit");
$(this).dialog('close');
$(this).dialog('open');
}
else {
$.post( "edit_low_inv_notes.php", { netQty:netQty, stockNumber: stockNumber, new_notes: new_notes},function(data){
var id = stockNumber+'notes';
//alert(id);
//alert(new_notes);
//$('#00260040.01Dnotes').html('test');
$('#'+id).html(new_notes);
}
);
$(this).dialog("destroy").remove();
}
},
"Close":function() {
$(this).dialog("destroy").remove();
}
}
});
$dialog.dialog( "open" );
});
I have tried substituting .text in for .html as well as having .done before the function(data) with the same amount of success. any ideas? Thanks ahead of time

I strongly suspect that the problem is with the . character in the middle of your element id. If your id value really looks like "00260040.01D", then jQuery is going to interpret that . as being a class selector.
You can try this:
$('#' + id.replace(/\./g, '\\.')).html(new_notes);

Hide a text input on a dialog box of CKEditor

I'm working on a plugin in CKEditor which have as a goal to hide or show element depending on which of my check box is checked. I have those element defined :
contents :
[
{
id : 'tab1',
label : 'Configuration Basique',
elements :
[
{
type : 'checkbox',
id : 'check',
label : 'Vers une page web',
'default' : 'unchecked',
onClick : function(){
}
},
{
type : 'text',
id : 'title',
label : 'Explanation',
}
]
},
{
id : 'tab2',
label : 'Advanced Settings',
elements :
[
{
type : 'text',
id : 'id',
label : 'Id'
}
]
}
],
so now what i would like to do is to hide no disable the text input with the label and print it only when the box is checked. So i've seen that i should use something like that :
onLoad : function(){
this.getContentElement('tab1','title').disable();
},
but the thing is i don't want to disable it i want to hide and then print it if the user check the box (which is why i put a onClick function in my checkbox). i've tryed to use the hide() function but it doesn't work and also the setAttribute('style','display : none;')
Tia :)

If you actually want to hide (and not disable) the element you can do this using
this.getContentElement('tab1','title').getElement().hide();
The extra getElement() call returns the litteral DOM object for your contentElement object, so you can call hide()/show() at will on it.

The onClick properties is available and does work on uiElement although it is not documented. The biggest problem is the definition of "this" is not the same inside the event than other place in the config. You first have to get the dialog to get other fields:
{
type: 'checkbox',
id: 'check',
label: 'check',
onClick: function() {
var dialog = this.getDialog()
if(this.getValue()){
dialog.getContentElement('tab1','title' ).disable();
} else {
dialog.getContentElement('tab1','title' ).enable()
}
}
}

Your checkbox definition is correct but there's no such thing like onClick property in dialog uiElement definition. All you got to do is to attach some listeners and toggle your field. Here you go:
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( isThisYourDialog? ) {
...
// Toggle your field when checkbox is clicked or dialog loaded.
// You can also use getInputElement to retrieve element and hide(), show() etc.
function toggleField( field, check ) {
field[ check.getValue() ? 'enable' : 'disable' ]();
}
var clickListener;
dialogDefinition.onShow = function() {
var check = this.getContentElement( 'tab1', 'check' ),
// The element of your checkbox.
input = check.getInputElement(),
// Any field you want to toggle.
field = this.getContentElement( 'tab1', 'customField' );
clickListener = input.on( 'click', function() {
toggleField( field, check );
});
// Toggle field immediately on show.
toggleField( field, check );
}
dialogDefinition.onHide = function() {
// Remove click listener on hide to prevent multiple
// toggleField calls in the future.
clickListener.removeListener();
}
...
}
});
More docs: uiElement API, dialog definition API.

Tooltip of previous onValidationError event displayed even when correct values are entered in the slickgrid node

I am using requiredFieldValidator for my TextEditor. Using the onValidationError event as given below, i set the title attribute of my cell to the error message so that a tooltip will be displayed as 'This is a required field'.
var handleValidationError = function(e, args) {
var validationResult = args.validationResults;
var activeCellNode = args.cellNode;
var editor = args.editor;
var errorMessage = validationResult.msg
$(activeCellNode).live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
$(activeCellNode).attr("title", errorMessage);
} else {
$(activeCellNode).attr("title", "");
}
});
grid.onValidationError.subscribe(handleValidationError);
Successfully, the tooltip is displayed when there is some validation error.
But the problem is When the same cell is given a correct value and validation succeeds, the previous tooltip appears again.
How do I remove that tooltip on successful validation?

I have found a solution for this issue and it works fine.
By going through the slick.grid.js code, i understood that OnValidationError event will be triggered only when the 'valid' value from the validator is false.
My idea was to fire the onValidationError event whenever validator is called i.e on both validation success and failure, and to check for 'valid' value and handle the tooltip according to that value.
STEPS:
In slick.grid.js, I added the trigger for onValidationError event when 'valid' from validator is true also.
(i.e) add the below given code before return statement in if(validationResults.valid) in slick.grid.js
trigger(self.onValidationError, {
editor: currentEditor,
cellNode: activeCellNode,
validationResults: validationResults,
row: activeRow,
cell: activeCell,
column: column
});
2. In the onValidationError event handler of your slickgrid,get the value of the parameter 'valid'. If true, it means validation is success and remove tooltip i.e remove
title attribute for that node. If 'valid' is false, it means
validation has failed and add tooltip.i.e set the title attribute to
error message. By doing this, the tooltip of the previous
onValidationError will not appear on the same node. The code goes as
follows:
grid.onValidationError.subscribe(function(e, args) {
var validationResult = args.validationResults;
var activeCellNode = args.cellNode;
var editor = args.editor;
var errorMessage = validationResult.msg;
var valid_result = validationResult.valid;
if (!valid_result) {
$(activeCellNode).attr("title", errorMessage);
}
else {
$(activeCellNode).attr("title", "");
}
});
Hope this solution will help others for this issue.
HAPPY LEARNING!!!

Rather than editing the slick grid js - I've submitted a request for this change - in the meantime you can subscribe to the following events to remove the previous validation display:
grid.OnCellChange.Subscribe(delegate(EventData e, object a)
{
// Hide tooltip
});
grid.OnActiveCellChanged.Subscribe(delegate(EventData e, object a)
{
// Hide tooltip
});
grid.OnBeforeCellEditorDestroy.Subscribe(delegate(EventData e, object a)
{
// Hide tooltip
});

A much more appropriate way to implement this is to subscribe to the onBeforeCellEditorDestroy event and clean up the state (i.e. clear the tooltip) there.

I wasn't able to determine the current cell in OnBeforeCellEditorDestroy, so I just cleared the title in onCellChange, which fires before onValidationError. For example:
grid.onCellChange.subscribe(function (e, args) {
$(grid.getCellNode(args.row, args.cell)).children("input").attr( "title", "");
});

How to get Radio button values through submit form via Extjs BoxComponent?

I am having some difficulties in making a form submission via a boxcomponent. I am using the boxComponent as I have customized button image, and strangely the transparency only works with boxComponent.
Basically the idea is that when I click on my boxComponent button, it will do 2 things:
Submit 2 radio button values and 1 combobox value via HTTP POST to sendstock.php
On successful submission, it will then proceed to the next page
Here's what I have got for the boxComponent:
var bc_button = new Ext.BoxComponent({
autoEl: {
tag: 'img',
src: 'next_button.gif'
},
style: 'cursor: pointer;',
listeners: {
enable: function(c) {
c.getEl().on('click', function() {
myformpanel.getForm().getEl().dom.action = 'sendstock.php';
myformpanel.getForm().getEl().dom.method = 'POST';
myformpanel.getForm().submit({
success:function() {
window.location.replace("toNextPage.php");
}
});
});
}
}
});
Here is my question, the results is as per below:
comboxbox = 3,
radiobtn1 = on
radiobtn2 = on
What I required is the value of the radiobtn1 and radiobtn2 to be submitted, should provide me with Available or NoStock, instead of on.
Also, is this the correct way to send users to the next page upon successful submission?
Thanks!

Make sure you set the inputValue config property on your radio buttons.
var rad = new Ext.form.Radio({ name: 'something', inputValue: 'purple'});
The inputValue value should then be sent on form post instead of 'on'.

How can I pass an element to a jQuery UI dialog box?

Goal
I've got a web page with a table of items. Each item has a delete button beside it. When that button is clicked, I want to
Ask the user to confirm
Delete the corresponding item from the database
Remove that item's row from the list
Current solution
Right now, I'm doing something like this:
$('button.delete').click(function(){
thisRow = $(this).parent();
itemID = $(this).parent().attr('id');
if (confirm('Are you sure?')){
$.post('/manage_items.php', {"action":"delete", "itemid":itemID}, function(){
thisRow.hide("slow").remove();
});
}
}
This solution works because each button.delete can determine which row and item it belongs to, and act accordingly.
Desired solution
Instead of the clunky "OK or Cancel" alert box, I'd like to use a jQuery UI dialog box. But I'm not sure how to let the dialog know which row and item it should handle on any given click.
Here's how you set it up:
1) Define a dialog box div
<div class="dialogbox" id="confirmdeleteitem" title="Really DELETE this item?">
<p>Gee golly, are you s-s-s-sure you want to do that?!</p>
</div>
2) Set up the dialog box behavior
$('#cofirmdeleteitem').dialog({
//other options - not relevant here
buttons: {
"Nevermind": function() {
//do nothing
},
"Alright! Woo!": function(){
//do something
}
}
});
3) Set the click event that will open the dialog
$('button.delete').click(function(){
$('#confirmdeleteitem').dialog('open');
});
In this last step, I'd like to be able to pass some information to the dialog - which delete button was clicked, for example. But I don't see a way to do that.
I could insert a hidden dialog div.dialog into each item row up front, or insert one into a particular row after its button is clicked. Then the $(this).parent() references would grab the correct row...
Is there an easier way to do this?

i do something like this:
function ConfirmationDialog(title, question, options) {
var d = $('<div title="' + title + '"><p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>' + question + '</p></div>');
d.dialog({
bgiframe: true,
resizable: false,
height: 190,
width: 350,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: options
});
}
and then call my function from the click event.

It ended up being most straightforward to set up the dialog behavior inside the click function itself. Actually, it's not much different than my original example.
$('button.delete').click(function(){
thisRow = $(this).parent().parent();
thisRow.css("background-color","red");
skuid = $(this).parent().parent('tr').attr('id').substr(5);
$('#dialogbox').dialog({
autoOpen: false,
modal: true,
draggable: true,
width: 600,
buttons: {
"Actually, I can just mark it inactive": function() {
thisRow.css("background-color","inherit");
$(this).dialog("close");
},
"This SKU needs to be deleted": function() {
$.post('/intranet/backstage/modify_sku_info.php', {"action":"delete", "skuid":skuid}, function(result){
thisRow.hide("slow").remove();
});
$(this).dialog("close");
}
}
});
$('#dialogbox').dialog('open');
return false;
});
Since div#dialogbox doesn't get hidden until $('#dialogbox').dialog() is called, I just gave it an inline style of display:none.
If I end up needing something that can be generalized, as hyun suggested, I'll revisit the issue.

You could store the row in a global variable, like this:
var deletingId;
$('button.delete').click(function() {
deletingId = $(this).parent().attr('id');
$('#confirmdeleteitem').dialog('open');
});
$('#confirmdeleteitem').dialog({
//other options - not relevant here
buttons: {
"Never mind": function() { },
"Alright! Woo!": function(){
$.post(
'/manage_items.php',
{ action: "delete", itemid: deletingId },
function() {
$('#' + deletingId).hide("slow").remove();
}
);
}
}
});
This will only work if the dialog is modal; otherwise, the user could click two different delete links, and you'd need multiple dialogs.

Why can't you just call a setup method to build the dialog as you see fit?
setupMyDialog( '#confirmdeleteitem', info1, info2 );
$('#confirmdeleteitem').dialog...
Alternatively, just store the information in global space before you show the dialog. Remember that your javascript variables can have global scope, or you can store information arbitrarily on objects/functions (which are just objects).
myDataStore = {};
myDataStore.row = foo;
myDataStore.col = bar;

You could add the "rel" attribute to the dialog and store it there, instead. That way you don't need to worry about global variables, and it's semantically not-too-bad, since you are defining a relationship between the dialog and a row. So it'd just be $('#confirmdeleteitem').attr('rel', $(this).parent().attr('id').dialog('open');