From 3dd77406051bdb5846681ea05891a3c3df76558e Mon Sep 17 00:00:00 2001 From: deed02392 Date: Fri, 30 May 2014 14:39:36 +0100 Subject: [PATCH 1/4] Bug fix for checkboxes in form dialogues This commit fixes a bug in form dialogues where the checkbox property is not actually toggled back a second time when using the label text. The issue is caused by the use of the `checked` attribute (`.attr('checked'`) because changing this attribute is not guarenteed to update the element `checked` property. Attached is an image proving how this can arise in an updated version of Chrome. See how the attribute is present but the property does not match. This was after clicking the `span` element a second time. Using the `.prop` method of the jQuery we use fixes this issue totally. It is suggested other usage of `attr` on checkboxes is revised. Proof: http://i.imgur.com/KGM9LUd.png --- lib/jquery.jtable.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/lib/jquery.jtable.js b/lib/jquery.jtable.js index 869af246..febb8bc1 100644 --- a/lib/jquery.jtable.js +++ b/lib/jquery.jtable.js @@ -1631,7 +1631,7 @@ THE SOFTWARE. .append($input); }, - /* Creates a checkboxfor a field. + /* Creates a checkbox for a field. *************************************************************************/ _createCheckboxForField: function (field, fieldName, value) { var self = this; @@ -1658,7 +1658,7 @@ THE SOFTWARE. //Check the checkbox if it's value is checked-value if (self._getIsCheckBoxSelectedForFieldByValue(fieldName, value)) { - $checkBox.attr('checked', 'checked'); + $checkBox.prop('checked', true); } //This method sets checkbox's value and text according to state of the checkbox @@ -1679,9 +1679,9 @@ THE SOFTWARE. .addClass('jtable-option-text-clickable') .click(function () { if ($checkBox.is(':checked')) { - $checkBox.attr('checked', false); + $checkBox.prop('checked', false); } else { - $checkBox.attr('checked', true); + $checkBox.prop('checked', true); } refreshCheckBoxValueAndText(); @@ -1691,6 +1691,7 @@ THE SOFTWARE. return $containerDiv; }, + /* Creates a drop down list (combobox) input element for a field. *************************************************************************/ _createDropDownListForField: function (field, fieldName, value, record, source, form) { From 2d0b73faaa54e0f9cb8791e472b00a18d94f2489 Mon Sep 17 00:00:00 2001 From: deed02392 Date: Fri, 30 May 2014 14:43:47 +0100 Subject: [PATCH 2/4] Update jquery.jtable.js Remove extra line space --- lib/jquery.jtable.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/jquery.jtable.js b/lib/jquery.jtable.js index febb8bc1..8ae9eb5c 100644 --- a/lib/jquery.jtable.js +++ b/lib/jquery.jtable.js @@ -1691,7 +1691,6 @@ THE SOFTWARE. return $containerDiv; }, - /* Creates a drop down list (combobox) input element for a field. *************************************************************************/ _createDropDownListForField: function (field, fieldName, value, record, source, form) { From 4ff79b6076735c749a21efcf915a0c83834806fa Mon Sep 17 00:00:00 2001 From: George Hafiz Date: Sat, 31 May 2014 16:28:12 +0100 Subject: [PATCH 3/4] Update the forms extension file Now the new complete file can be built --- dev/jquery.jtable.forms.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/dev/jquery.jtable.forms.js b/dev/jquery.jtable.forms.js index b497a7e5..abef285f 100644 --- a/dev/jquery.jtable.forms.js +++ b/dev/jquery.jtable.forms.js @@ -152,7 +152,7 @@ .append($input); }, - /* Creates a checkboxfor a field. + /* Creates a checkbox for a field. *************************************************************************/ _createCheckboxForField: function (field, fieldName, value) { var self = this; @@ -179,7 +179,7 @@ //Check the checkbox if it's value is checked-value if (self._getIsCheckBoxSelectedForFieldByValue(fieldName, value)) { - $checkBox.attr('checked', 'checked'); + $checkBox.prop('checked', 'checked'); } //This method sets checkbox's value and text according to state of the checkbox @@ -200,9 +200,9 @@ .addClass('jtable-option-text-clickable') .click(function () { if ($checkBox.is(':checked')) { - $checkBox.attr('checked', false); + $checkBox.prop('checked', false); } else { - $checkBox.attr('checked', true); + $checkBox.prop('checked', true); } refreshCheckBoxValueAndText(); From fee68820e56d0782acbebf90b4c9debc28b7c7ca Mon Sep 17 00:00:00 2001 From: George Hafiz Date: Sat, 31 May 2014 18:09:03 +0100 Subject: [PATCH 4/4] Implement placeholder field property TODO: Minify and update documentation. Added field placeholder property, eg ```javascript username: { title: 'Username', width: '20%', create: true, placeholder: "Optional", key: true, sorting: false }, ``` Tested safe back to IE6 (placeholder attribute not supported but is simply ignored). Works on IE10+. Also tested on Chrome and several mobile browsers. --- dev/jquery.jtable.core.js | 7 +++++-- dev/jquery.jtable.forms.js | 10 +++++----- lib/jquery.jtable.js | 15 +++++++++------ 3 files changed, 19 insertions(+), 13 deletions(-) diff --git a/dev/jquery.jtable.core.js b/dev/jquery.jtable.core.js index a859986b..d9adbe01 100644 --- a/dev/jquery.jtable.core.js +++ b/dev/jquery.jtable.core.js @@ -99,7 +99,7 @@ * CONSTRUCTOR AND INITIALIZATION METHODS * *************************************************************************/ - /* Contructor. + /* Constructor. *************************************************************************/ _create: function () { @@ -138,8 +138,11 @@ if (props.inputClass == undefined) { props.inputClass = ''; } + if (props.placeholder == undefined) { + props.placeholder = ''; + } - //Convert dependsOn to array if it's a comma seperated lists + //Convert dependsOn to array if it's a comma separated lists if (props.dependsOn && $.type(props.dependsOn) === 'string') { var dependsOnArray = props.dependsOn.split(','); props.dependsOn = []; diff --git a/dev/jquery.jtable.forms.js b/dev/jquery.jtable.forms.js index abef285f..34ea15bb 100644 --- a/dev/jquery.jtable.forms.js +++ b/dev/jquery.jtable.forms.js @@ -10,7 +10,7 @@ *************************************************************************/ /* Submits a form asynchronously using AJAX. - * This method is needed, since form submitting logic can be overrided + * This method is needed, since form submitting logic can be overridden * by extensions. *************************************************************************/ _submitFormUsingAjax: function (url, formData, success, error) { @@ -126,10 +126,10 @@ .append($textArea); }, - /* Creates a standart textbox for a field. + /* Creates a standard text input for a field. *************************************************************************/ _createTextInputForField: function (field, fieldName, value) { - var $input = $(''); + var $input = $(''); if (value != undefined) { $input.val(value); } @@ -142,7 +142,7 @@ /* Creates a password input for a field. *************************************************************************/ _createPasswordInputForField: function (field, fieldName, value) { - var $input = $(''); + var $input = $(''); if (value != undefined) { $input.val(value); } @@ -179,7 +179,7 @@ //Check the checkbox if it's value is checked-value if (self._getIsCheckBoxSelectedForFieldByValue(fieldName, value)) { - $checkBox.prop('checked', 'checked'); + $checkBox.prop('checked', true); } //This method sets checkbox's value and text according to state of the checkbox diff --git a/lib/jquery.jtable.js b/lib/jquery.jtable.js index 8ae9eb5c..c8424eab 100644 --- a/lib/jquery.jtable.js +++ b/lib/jquery.jtable.js @@ -128,7 +128,7 @@ THE SOFTWARE. * CONSTRUCTOR AND INITIALIZATION METHODS * *************************************************************************/ - /* Contructor. + /* Constructor. *************************************************************************/ _create: function () { @@ -167,8 +167,11 @@ THE SOFTWARE. if (props.inputClass == undefined) { props.inputClass = ''; } + if (props.placeholder == undefined) { + props.placeholder = ''; + } - //Convert dependsOn to array if it's a comma seperated lists + //Convert dependsOn to array if it's a comma separated lists if (props.dependsOn && $.type(props.dependsOn) === 'string') { var dependsOnArray = props.dependsOn.split(','); props.dependsOn = []; @@ -1489,7 +1492,7 @@ THE SOFTWARE. *************************************************************************/ /* Submits a form asynchronously using AJAX. - * This method is needed, since form submitting logic can be overrided + * This method is needed, since form submitting logic can be overridden * by extensions. *************************************************************************/ _submitFormUsingAjax: function (url, formData, success, error) { @@ -1605,10 +1608,10 @@ THE SOFTWARE. .append($textArea); }, - /* Creates a standart textbox for a field. + /* Creates a standard text input for a field. *************************************************************************/ _createTextInputForField: function (field, fieldName, value) { - var $input = $(''); + var $input = $(''); if (value != undefined) { $input.val(value); } @@ -1621,7 +1624,7 @@ THE SOFTWARE. /* Creates a password input for a field. *************************************************************************/ _createPasswordInputForField: function (field, fieldName, value) { - var $input = $(''); + var $input = $(''); if (value != undefined) { $input.val(value); }