im trying to think of the best way to do this and im coming up short... I have a dropdown menu which pulls names from a database. Something like this -
<form class="option1">
<select name="users" onChange="showUser(this.value)">
<option value="0">NAMES:</option>
<option value="1">John</option>
<option value="2">Mark</option>
<option value="3">Luke</option>
<option value="4">Chris</option>
</select>
</form>
Then I have a javascript function that gets a php file which connects to a database and displays the records. The dropdown is fine, but id like to be able to have this happen when someone clicks an image. Can I just assign an option value to the image, then do something like -
$(document).ready(function () {
$('img').click(function(){
$('select').val($(this).attr('option'));
});
});
to make it fire when a certain tile is clicked? Any ideas? thanks all.
I could think of two possibilities:
1) use the alt-attribute to store the id in the image tag:
<img src="img.png" alt="1">
then you could use
$('select').val($(this).attr('alt'));
2) use the id of the image to store the id of the users in the DB:
<img id="img_1" src="img.png">
then you could use
$('select').val(this.id.substr(-1));
Related
I am using play framework for the first time.
I want to update the web page when a value is selected from drop down with out refreshing the web page.
Consider the following example:
<select>
<option value= "Apple"> Apple </option>
<option value = "Banana"> Banana </option>
</select>
When a value is selected from drop down it should be posted to server. Then server should return some information based on the value it got. Now we should display the content corresponding to the value selected from drop down with out page refresh.
I didn't find a way to implement this using play framework. Conventionally we can do this by hiding a div initially and when a value is selected from drop down we can add content (fetched from back end) to the div and show it. I didn't understand how to implement the server side part. In play framework, controller generally returns Result type. How to return a Json value on a request in play framework ?
Can anyone please suggest other ideas ??
Thanks
A solution using jQuery (see change() and load()):
<select id="select">
<option value="Apple">Apple</option>
<option value="Banana">Banana</option>
</select>
<div id="result"></div>
<script>
$('#select').change(function() {
$('#result').load('/foo/bar?fruit=' + $(this).val());
});
</script>
EDIT: To address the JSON/server-side part of the question have a look at ScalaJsonHttp (or JavaJsonActions).
I am making a small project with MVC4, C#, Razor Engine and jQuery. In my code I have a drop list, and every time an item is selected in that drop list I want to send an Ajax request with the information selected, plus the id of an order that is in the HTML:
<input type="hidden" id="materialRequestId" value=#myId />
To achieve this, when a user selects an item in my drop list, I try to get the closest/sibling/find HTML tag by using its id, but I am failing because $(this) seems to have only a class of select2-offscreen and thus everytime I use one of the previous jQuery functions, I get undefined.
$('#OfficeId').change(function () {
alert($(this).closest("div").siblings("#materialRequestId").value;);
});
This is my HTML:
<td>
<input type="hidden" id="materialRequestId" value=4 />
<div class="hide officeList">
<select id="OfficeId" name="OfficeId">
<option value="18">AMAALB</option>
<option value="19">AMABGR</option>
<option value="20">AMACRO</option>
</select>
</div>
</td>
What am I missing here? Why is this not working?
If you get the value direct
$("#materialRequestId").attr("value");
And make sure that only 1 element per page has that unique id it should work
im trying to extend a joomla 3 component's backend form, by adding a datatable which populates data from a table in the database, where the user can add, edit or delete a row. I have the data being displayed and can delete data, but when i come to edit the data im having some issues.
When the user pressed the edit button the data is to be pulled from the database and populated in a form so the user can make changes to it. im getting the data and im populating the form correctly, but i have a select element where i need to make one of the options selected, and i'm having trouble with this, as joomla for some reason alters the select element. below is my code which will make more sense.
// My JQuery code for populating the form
function populateForm(data) {
var dId = jsl('#ajax-discount #d_id');
var dState = jsl('#ajax-discount #d_state');
var dCode = jsl('#ajax-discount #d_code');
var dType = jsl('#ajax-discount #d_type');
var dValue = jsl('#ajax-discount #d_value');
var formStatus = jsl('#ajax-discount-msg');
dId.val(data.message.id);
dState.val(data.message.state);
dCode.val(data.message.discount_code);
//jsl('select[name="d_type"]').val(data.message.discount_type);
dType.val(data.message.discount_type).trigger( "listz:updated" );
//jsl("#ajax-discount #d_type_chzn > ul.chzn-results > li [value='2']").attr("selected", "selected");
//dType.val(data.message.discount_type);
//dType.change();
dValue.val(data.message.discount_value);
}
// my form which is located in my components tmpl/edit.php file
<div class="control-group">
<div class="control-label">Discount Type</div>
<div class="controls">
<select id="d_type" name="d_type">
<option value="0"></option>
<option value="1">$ AUD</option>
<option value="2">% Discount</option>
<option value="3">Free Shipping</option>
</select>
</div>
</div>
// the select element when its rendered in the browser
<div class="control-group">
<div class="control-label">Discount Type</div>
<div class="controls">
<select id="d_type" name="d_type" class="chzn-done" style="display: none;">
<option value="0"></option>
<option value="1">$ AUD</option>
<option value="2">% Discount</option>
<option value="3">Free Shipping</option>
</select><div class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 220px;" title="" id="d_type_chzn"><a class="chzn-single chzn-default" tabindex="-1"><span>Select an option</span><div><b></b></div></a><div class="chzn-drop"><div class="chzn-search"><input type="text" autocomplete="off" readonly=""></div><ul class="chzn-results"><li class="active-result" style="" data-option-array-index="1">$ AUD</li><li class="active-result" style="" data-option-array-index="2">% Discount</li><li class="active-result" style="" data-option-array-index="3">Free Shipping</li></ul></div></div>
</div>
</div>
I have tried many different ways, but im stuck at the moment can any please give me some advice or know what i should be doing.
I have solved my question, took me hours to see what i was doing wrong, sometimes stepping away from a problem helps you think about it differently. OK so we know that Joomla uses different plugins and libraries to get its backend to work. One of these Joomla plugins is something called chosen http://harvesthq.github.io/chosen/.
this plugin changes or manipulates a select element. this is why it was rendering differently in browser. so what i was missing really from my code is a way to refresh my change on the ui and below is how you do it.
dType.val(data.message.discount_type).trigger('liszt:updated');
I have an issue related to an HTML page. Hoping that someone could help resolve it -
I have an HTML page with a Country select and a Text Box. The value attribute of the Option tag contains the Country codes. When the User selects a country, its respective country code should get populated in the Text Box.
This will happen each time the User changes the country.
All of the data is present in the page itself, and no server calls are made to fetch the data.
Could this be done using the delegate method? Can I also use Ajax in this case?
Any help would be very much appreciated.
Many thanks in advance!!
By using Jquery
Try this
HTML
<select id="c_code">
<option value="IN">India</option>
<option value="US">USA</option>
</select>
<input id="code" type="text">
Script
$('#c_code').on('change',function(){
$('#code').val($(this).val());
});
DEMO
You simply need to bind the logic to the change event of select
Here is the html code
<select id="ddl">
<option value="001">India</option>
<option value="002">USA</option>
</select>
<input type="text" id="txt" />
Here is the jQuery
$('#ddl').change(function(){
$('#txt').val($('#ddl').val());
});
Here is the demo
So I am trying to use XMLHTTPRequest to get some information from another page. It will have several <option>s, a variable number of them.
My thoughts were that I could get all of these options, outputted as text, and insert them wholesale into the select menu. Would this be possible? An example of what I want to do:
<select name="culture[]" onSubmit="formValidation()" multiple="multiple" id="cultpicklist"></select>
is the select menu, and then I would do something like this (pseudo-code)
txtobjfromXMLHTTPRequest would be this:
<option value="41" name="culture[]">testculthy</option>
<option value="47" name="culture[]">ereeevvv</option>
<option value="49" name="culture[]">yep</option>
<option value="50" name="culture[]">addanother</option>
txtObj = txtobjfromXMLHTTPRequest //to shorten what I have to write/what you have to read
document.getElementById("cultpicklist").value(txtObj)
Would this work? Am I on the right path? How should I change this?
You should try using .innerHTML:
document.getElementById("cultpicklist").innerHTML = txtObj;
You should however thoroughly test this in all the browsers you support, as there are some cross browser issues with this.
...and here's the fiddle: http://jsfiddle.net/5PGF6/