I have a combo box and grid from easyui and I need to make the grid data change to display detail data when the current selected item in the combo box change.
Here is the code of the combo box:
<input class="easyui-combobox" name="wg_id" id="wg_id" value="1"
data-options="
url:'pages/get_work_groups.php',
method:'get',
valueField:'work_group_id',
textField:'work_group',
panelHeight:'auto',
onSelect: function(rec){
$.post('pages/get_locations.php', {wg_id: '2'});
}
">
And the get_locations.php code:
include '../conn.php';
$wg_id = 1;
if (isset($_REQUEST['wg_id'])) {
$wg_id = $_REQUEST['wg_id'];
}
$q = $conn->prepare("select * from locations where work_group_id = :wg_id");
$q->bindValue(':wg_id', $wg_id);
$q->execute();
$result = $q->fetchAll();
echo json_encode($result);
The json data returned from get_locations.php is correct but how I can make the grid reload to display these data ?
Use the below code,
<input class="easyui-combobox" name="wg_id" id="wg_id" value="1"
data-options="url:'pages/get_work_groups.php',
method:'get',
valueField:'work_group_id',
textField:'work_group',
panelHeight:'auto',
onSelect: function(rec){
$('#dg').datagrid({url:'pages/get_locations.php'});
}
">
Related
So i have code like these
<select style="width: 300px" id="vendor" name="vendor" multiple="multiple">
</select>
<input type="checkbox" id="checkbox" >Select All
And on jquery like these
$("#vendor").select2();
var ceked = new Option("ALL", "id");
ceked.selected = true;
$("#checkbox").click(function(){
if($("#checkbox").is(':checked') ){
$("#vendor").append(ceked);
$("#vendor").trigger("change");
$("#vendor").prop('disabled', true);
}else{
$('#select2-vendor-container').empty();
$("#vendor").prop('disabled', false);
}
});
Well is kinda work for me but my problem is when i'm trying uncheked, the tags "ALL" still showing. I was tried change $('#select2-vendor-container').empty(); into $('#vendor').val(); but still not working. How to remove that new tags "ALL"??
You can clear all selected by this code,
$("#vendor").empty().trigger("change");
and to remove an option with value id and display text ALL you can use following code,
$("#vendor option[value='id']").remove();
I have a HAML file in which there is a line like follows:
%td
= hidden_field_tag "item1"
I am setting its value in jquery as follows:
$("#item1").val(1)
But it is not working, so I have done as follows:
$("#item1").attr("value",1)
Even it is not working also. Actually the item tag is associated with a form so while I am posting it, in handler page when I am printing parameters, it is printing as :item =>""
Edit: Its HTML source is as follows:
<input id="item1" name="item1" type="hidden">
No value field is coming.
Generally, what you have looks fine. I created a sample for you to show reading and setting the value in jQuery here: http://jsfiddle.net/T2v8K/2 . This should help you with debugging.
HTML:
<div>
<form id="myForm">
<table>
<tr>
<td>normal input: <input id="newValue" name="newValue" value="1" /></td>
<td>hidden input: <input id="item1" name="item1" type="hidden" value="someDefaultValue"/></td>
</tr>
</table>
</form>
<button id="showVal" type="button">Show Hidden Input Value</button>
<button id="setVal" type="button">Set Hidden Input Value</button>
</div>
JavaScript / jQuery:
$( document ).ready(function() {
var beforeValue = $( "#item1" ).val();
//alert( "Before = " + beforeValue );
var afterValue = $( "#item1" ).val();
//alert( "After = " + afterValue );
$( "#showVal" ).click( function() {
ShowHiddenInputValue();
})
$( "#setVal" ).click( function() {
SetHiddenInputValue();
})
});
function ShowHiddenInputValue() {
//Show the current value of the hidden input
var hiddenInputValue = $( "#item1" ).val();
alert( "Hidden Input Value = " + hiddenInputValue );
}
function SetHiddenInputValue(){
//Get the value from the input
var newHiddenInputValue = $( "#newValue" ).val();
//Set the hidden input
$( "#item1" ).val(newHiddenInputValue);
ShowHiddenInputValue();
}
Try setting a default value like this and see if you properly read out the value in your form post.
Also, if you aren't sure that jQuery is working (perhaps not referenced properly), you can test that by checking for the version number in an alert like this in your JavaScript:
alert($().jquery);
Is there a possibility to have a number input with minus-button on the left and plus-button on the right? Or maybe also -- ++ to change value in bigger steps.
I know that I'm not the first one asking this but:
This solution is not displaying correctly in the first turn and jQuery-Mobile-Stepper-Widget from Github (can't post another link because I'm new) does not work with current version of jQuery Mobile.
The result should look like the screenshot in this question: Has anyone implemented jQuery Mobile Add (+/-) Button Number Incrementers? respectively horizontal grouped buttons in jQuery Mobile
Any ideas or new snippets, working with current version of jQuery mobile?
Here is a hint, the rest is purely CSS job and extra JS codes to control the value, e.g. maximum, minimum...etc.
HTML
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
<button id="plus" data-inline="true">+</button>
<input type="text" id="number" value="0" disabled="disabled" />
<button id="minus" data-inline="true">-</button>
</div>
Code
$('#plus').unbind('click').bind('click', function () {
var value = $('#number').val();
value++;
$('#number').val(value);
});
$('#minus').unbind('click').bind('click', function () {
var value = $('#number').val();
value--;
$('#number').val(value);
});
JSFiddle
In jQM the input type number does the most of the magic you want
<input type="number" name="number" value="0"/>
If you require more fancy styling you have to follow Omar's code
<i onclick="qty('plus');" class="fa fa-plus c_pointer"></i>
<input type="text" id="prdqty" name="qty" value="1" placeholder="1">
<i onclick="qty('minus');" class="fa fa-minus c_pointer"></i>
function qty(val){
pqty = $('#prdqty').val();
if (val == "plus") {
var newVal = parseFloat(pqty) + 1;
} else {
if (pqty > 1) {
var newVal = parseFloat(pqty) - 1;
} else {
newVal = 1;
}
}
$('#prdqty').val(newVal);
}
I am new to jquery mobile. In my UI, one text box and one select menu are there. Initially select menu is empty.If the textbox value is more than 1 then some data is added to the select menu otherwise select menu is empty. For this, i am calling the function at the onchange of select menu but it is not working. Please can anybody help me.
Edit:
Ex:
$('#Goal_Time').bind( "focus", function(event, ui)
{
if(Goal_WeightVar.val() > 0)
{
Goal_WtVar = Math.abs(weightVar.val() - Goal_WeightVar.val());
Min_DurationVar = Math.round(Goal_WtVar * 2.2);
for(var i=0;i<10;i++)
{
$('#Goal_Time').append('<option value=Min_DurationVar>Min_DurationVar</option>');
}
}
});
thanks
Well Kinda working example:
http://jsfiddle.net/v5DC3/5/
JS
$('#Goal_WeightVar').live('change', function() {
var weightVar = 0; // for testing only
var goalWeightVar = $('#Goal_WeightVar').val();
if(goalWeightVar > 0)
{
Goal_WtVar = Math.abs(weightVar - goalWeightVar);
Min_DurationVar = Math.round(Goal_WtVar * 2.2);
for(var i=0;i<10;i++)
{
$('#Goal_Time').append('<option value='+Min_DurationVar+'>'+Min_DurationVar+'</option>');
}
$('#Goal_Time').listview('refresh');
}
});
HTML
<div data-role="page" id="Goal_Time_Page">
<div data-role="content">
<label for="Goal_WeightVar">Goal Weight:</label>
<input type="text" name="Goal_WeightVar" id="Goal_WeightVar" value="" />
<label for="Goal_Time" class="select">Goal Time:</label>
<select name="Goal_Time" id="Goal_Time">
<!-- Add options here -->
</select>
</div>
</div>
You will need to tweak it
As it says in the docs of jQuery Mobile, you have to tell the select menu to update it's contents by calling $('select').selectmenu();
If it still doesn't work you'll have to post a little sample code so I can have a look at it.
Edit:
Actually, that's not even necessary. If you have an empty <select id="to-append"></select>, you can just add options via $('#to-append').append('<option value="a">A</option>')!
The onchange event of the select is probably not the right event to do this though. The select will not change as long as it's empty, thus your event will never get triggered. Try the blur event of the text box.
jQuery Mobile Docs - Select
I am working on Asp.net MVC.
i am using regular html
<label for="txtbox1" > User Name</label>
<input type="text" id="txtbox1" name="text" class="water"/>
I want to display Cursor before text and Text both when page load. When user start writting in text box at that time "User Name" removed.
You need to use javascript for this. If you are using jquery you could:
$(function() {
$('#txtbox1').focus();
});
And if you want to do this with plain javascript:
window.onload = function() {
var textbox = document.getElementById('txtbox1');
if (textbox != null) {
textbox.focus();
}
};
UPDATE:
If you want the text to disappear when the user starts typing you may try the following:
$('#txtbox1').keypress(function() {
if (!$(this).data('dirty')) {
$(this).val('').data('dirty', true);
}
});
Live demo.