Find all divs of class number_field inside a container with id finance_container
|
1 |
jQuery('div#finance_container div.number_field') |
to be continued …
Category Archives: JQuery
FollowChange dropdown values dynamically
We have 2 drop down boxes.
When we select one, we want that second one to be auto-populated with corresponding values to our selection.
This snippet is part of a php code invoked by ajax. It’s purpose is to respond to ajax call in form {“values”:[{“value”:”txt”},{…}]}
Ex: {"values":[{"value":"10","txt":"Aged care service"},{"value":"11","txt":"Social housing"}]}
|
1 2 3 4 5 6 7 8 |
$response = '{"values":['; foreach($ret_array as $key=>$value) { $response .= '{"value":"' . $value['value_tx'] .'","txt":"' . $value['long_val_tx'] . '"},'; } $response = substr_replace($response ,"",-1); $response .= ']}'; echo $response; |
Ajax call:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
function populateEntityTypes() { var categorySelect = jQuery('#category_cd').val(); //this is our select combobox var entityTypeDropdown = jQuery('#serv_class_cd'); //this is the dropdown to be populated dynamically jQuery.ajax( { type:"POST", url:"ajax/getEntityTypes.php", data:"categorySelectId=" + categorySelect, //we send categoryId to execute a sql findById success:function (data) { entityTypeDropdown.empty(); //delete previous options in dropdown var myObject = jQuery.parseJSON(data); //convert json to object jQuery.each(myObject.values, function(index, obj) { //parse the 'values' var option = jQuery('<option></option>'); //prepare options in dropdown option.attr('value', obj.value).text(obj.txt); //inject values entityTypeDropdown.append(option); //add our values }); } } ); } |
Trigger can be:
|
1 2 3 4 5 6 |
jQuery(document).ready(function ($) { jQuery('#category_cd').change(function(event){ populateEntityTypes(); }); }); |
or using “onChange” event in combobox.
Detect changes in input boxes and persist them via ajax
I have a page dynamically created with many input boxes to serve as comments. They are placed side by side with other elements. See photo.
Basic idea is that on blur event (lose focus) or key press enter to update the input box automatically via ajax (no form submit is necessary).
HTML CODE:
|
1 2 3 |
<input id="input_${error.id}" type="text" value="${error.comment}" onblur="updateComment('${error.id}', '${error.comment}');" onkeydown="processKeyPress(this, event);"/> |
In my case this is a JSP page and ${error.id} = 32, ${error.comment} =”123″;
JavaScript for enter key:
|
1 2 3 4 5 6 |
function processKeyPress(e, event) { var fnc = $(e).attr('onblur'); if (event.keyCode == 13) { eval(fnc); } } |
JavaScript for persist on blur (inputs are id=32 and oldvalue=”123″):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
function updateComment(id, oldvalue) { var contextPath = "<%=request.getContextPath()%>"; //obtain context path from JSP var input = $('#input_' + id); //my id is "input_32" var value = input.val(); //get the new value if (oldvalue != value) { //compares to detect a change in comment if (value != '') { //don't persist empty strings $.ajax( { type:"POST", url:contextPath + "/admin/error/update.json", data:"id=" + id + "&comment=" + value, success:function (data) { if (data == true) { var blur = input.attr('onblur'); //obtain blur element to update values var n = blur.replace(blur, 'updateComment('' + id + '', '' + value + '');'); //replace blur attr with new value input.attr("onblur", n); //update blur input.val(value); //update value } } } ); } } } |
There is room for improvement, but this functionality serves my purpose