Develop Reference

Update some fields on change and on load

We have the following script which runs on a change to a drop-down - updates the price based on the currency code chosen. This basically gets the value of the drop-down and updates the priceamm and preicecurr fields within the text on the page.
<script>
function run() {
var f = document.getElementById("dropPrice");
priceamm.innerHTML = f.options[f.selectedIndex].value;
var e = document.getElementById("dropPrice");
pricecurr.innerHTML = e.options[e.selectedIndex].text;
}
HTML
<select id="dropPrice" onchange="run()" class="fa-select">
<option value = "a">aaa</option>
<option value = "b">bbb</option>
Question
Now, we would also like to load the drop-down to one of the options (selected) when loading the page (onload). We are able to populate the variables in the text but not the drop-down to show option bbb. In php this is quite easy but we are a bit lost with javascript. We tried something on these lines onload but does not work:
document.getElementById("dropPrice").value = "<?php echo $geo_price ;?>";
With jQuery this is probably easier but once again no luck:
window.onload = function() {
jQuery(document).ready(function($){
document.getElementById('dropPrice').find('option[value=<?php echo $geo_price ;?>]').attr('selected','selected');
});
}
Any help is appreciated. Thanks

The jQuery selector part is incorrect. You are mixing plain JS with jQuery. When you call document.getElementById('dropPrice') a regular DOM element is returned, but then you call find which is a jQuery method to be used on a jQuery element. So, you either need to wrap the first part to return a jQuery element like so:
$(document.getElementById('dropPrice'))
.find('option[value="b"]').attr('selected', true);
Or, select it via jQuery in the first place like:
$('#dropPrice [value="b"]');
However, your first example:
document.getElementById("dropPrice").value = "b";
should work. That makes me wonder if the value that is being echoed by PHP is correct and/or if there are other JS errors being thrown that would cause that code not to run.

having an issue to call Javascript function from jquery

I have a Datepicker for Bootstrap and I am having an issue to run a function called "listCampaignsFiltered(search, type, from, 'dataTable')" that filters the results once I click on any date from the calendar. Here is the code:
Html
<div id="showfrom">
<label for="from" class="filter">From:
<input type="text" class="filter" value="01/01/2014" id="from"/>
</label>
</div>
Js
$(document).ready(function(){
$('#showbrand input').val(01/01/2014).click(listCampaignsFiltered);
});

The proper form would be:
$('#showbrand input').val('01/01/2014').on('click', function() {
listCampaignsFiltered(...params....)
});

The call val(01/01/2014) would set the value to 1 divided by 1 divided by 2014. You are missing quotes.
Are you sure you always want to set the date back to 01/01/2014? If so use the commented out line instead of the line bellow it.
Next listCampaignsFiltered has be be defined and without error. I am assuming it works and you've tested it independently of the listner.
Next, to pass the values into it, you need wrap the function in an lambda/anonymous function.
I am also assuming that the values for function are all in inputs with the ids matching the parameters you gave in your post.
Here is what you end up with, with those changes:
$(document).ready(function()
{
/*$('#showbrand input').val('01/01/2014').click(function()*/
$('#showbrand input').click(function()
{
listCampaignsFiltered
(
$('#search').val(),
$('#type').val(),
$('#from').val(),
'dateTable'
);
});
});

may be this is what you intended
$(document).ready(function(){
$('#showbrand input').val('01/01/2014').on('click', function()
listCampaignsFiltered(param1,param2,param3,param4);
});
});

jsfiddle.net/JixunMoe/29wBy/
Not sure if that's what you want, but the callback works as expected (for me).

Weird behaviour with change event in HTML

I have a struts tag like this
<s:select label="Select Item" name="select3ph3meter1" id="select3ph3meter1"
headerKey="0" headerValue="-- Please Select --" list="meterHeaderList"
required="true" onchange="show_3ph3meter1(this.value)" />
The problem is it is not calling the above function on change event. It works when I change the code to this:
... onchange="alert('calling')"
I can't understand what's happening here.
Here is the JavaScript function:
function show_3ph3meter1(select3ph3meter1) {
$("#3ph3meter1").load("meterFiller3p31.action",{select3ph3meter1:select3ph3meter1});
}
function show_depotReceipts(selectrecitem) {
$("#recQuantity").load("depotRecQ.action",{selectrecitem:selectrecitem});
$("#recRange").load("depotRecRange.action",{selectrecitem:selectrecitem});
}
The adjacent function is working perfectly so I assume there is no JavaScript error.
Also, when I put in another function (for instance the adjacent function name in onchange), it is also working. The problem may be with this particular function name show_3ph3meter1().

Hi if you have some other java script written over there contains errors , this code wont work.
So better have like this
<select class="style" onchange="//do something like this
//var e = document.getElementById('selectelement'); //if (e) e.value=100;" />
please check in IE browsers to get the java script errors. write entire code in that change event

First check your calling function name
if this is correct then just write
onchange="javascript : show_3ph3meter1(this)"
and get value on the function
3 else try the access value in function with selector
var elem = document.getElementById("short_code"),
selectedNode = elem.options[elem.selectedIndex];
var valu = selectedNode.value;

jQuery: children count = 0 and ajax

I'm working on a jQuery that gets a list of elements from a server, appends it to an element, and then loops in the newly appended elements to transform them (make them jEditable).
I'm having trouble with the loop. The appending works alright, so I have a list of elements like :
<div id="innerModal">
<label id="exampleTitle">Title :</label>
<label id="exampleField" class="ftext">Value</label>
</div>
Then I try to loop in:
function makeListEditable(element, type){
//I checked here that the element sent is well '#innerModal'
alert($(element).children().length);
$(element).children().each(function() {
if( $( this ).is( 'ftext' ) ){
makeEditable( $( this ), type, '', '' );
}
});
}
The alert prints "0".
Where does that issue come from? How can I fix it?
Edit : Here's the call of makeListEditable :
getFormOnElement(//Gets the form and appends it
"getorganisationeditable/"+curOId,
"#innerModal"
);
makeListEditable('#innerModal');
Thanks in advance!

Since ajax is asynchronous, it will not wait till elements are appended and execute makeEditable. Since ajax might not necessarily have completed, the element has no children. Move makeEditable to ajax call's success callback

ftext is a class and needs 'dot' .is(".ftext")

Add an other allert like:
alert($(element).text());
or
alert($(element).html());
so you can know if your selector work fine.

Problem with dropdown and codeigniter

i'm using 2 dropdowns where the second gets populated from the first choice.
My problem is that i'm not getting the value from the first dropdown.
What i get is [object Object].
Here's the javascript and php code:
Thanks.
Javascript:
function getState(){
$("#selectestate").bind("change",function(){
$("#selectcity").load("results/ajaxcity", {stat: $(this).val()} ); //This is where the problem is
alert({stat: $(this).val()});//Shows [object Object]
});
return false;
}
PHP:
$curstat=$this -> input -> post('state'); //current selected state in first dropdown
<tr>
<?php $js = 'id="selectstate" onChange="getState();"';?>
<td><h3> State: </h3></td>
<td id="selectestate"><?php echo form_dropdown('state', $stat, $curstat, $js);?></td>
</tr>
<tr>
<td><h3> City: </h3></td>
<td id="selectcity"><?php echo form_dropdown('city', $cit);?></td>
</tr>

You need to alter this code:
$("#selectestate").bind("change",function(){
to this:
$("#selectestate select").bind("change",function(){
You are asking for the value of the <td id="selectstate"> ... which is of course null. #selectstate select loads the actual <select> element that you are looking for, which will then enable you to get its value.
You will also want to change $("#selectcity") to $("#selectcity select") to avoid the same problem in your anonymous function.
Finally, your alert is behaving as expected. {} defines an object in Javascript. So you are alerting an object containing a single attribute. Just alert($(this).val());// Should show the value
If it still fails it's because either:
A) Your URL is wrong
or
B) There is something wrong with the php function called by results/ajaxcity
EDIT:
Smacks head: I should have caught this. In your code you have this function:
1. function getState(){
2. $("#selectestate select").bind("change",function(){
3.
4. $("#selectcity select").load("results/ajaxcity", {stat: $(this).val()} );
5. alert($(this).val());
6. });
7. return false;
8. }
Your generated HTML looks something like this:
<select name="state" id="selectstate" onChange="getState();">
THE PROBLEM: When you use the <select> for the first time your function is called and jQuery binds an anonymous function to the change event for select (line #2) that will be executed every time the change event fires from this select from now on. Every time you select the dropdown a new anonymous function is bound by line #2 and all of the functions that are currently bound to the dropdown are executed. (So if you use the dropdown N times the "change" function will fire N-1 times.)
THE SOLUTION: Use $(document).ready() to bind your function. Your restructured code will look like this:
<script type="text/javascript">
function getState(element){
$("#selectcity select").load("results/ajaxcity", {stat: $(element).val()} );
alert($(element).val());
return false;
}
</script>
//... snip ...
<?php $js = 'id="selectstate"';?>
//... snip ...
<script type="text/javascript">
$(document).ready(function() {
$("#selectestate select").bind("change", getState);
});
</script>

There is no value for td element, which you are accessing in "#selectestate" selector. Instead of {stat: $(this).val()} you should find inner select element {stat: $(this).find("select").val()}

You're loading the .val() of a <td> element ($(this), inside your handler for a TD). You need to get the id of the <select> tag.
If you really can't find the ID (or codeigniter doesn't set it.. impossible to tell from your example since form_dropdown() is creating it), then instead of $(this).val() you could try $('select',this).val() which will find the value of the first <select> tag within the TD.
Also in your debugging, {stat: $(this).val()} is an object, so of course that's what alert() shows you. Try using firebug, and then change alert() to console.log() -- the firebug console will show you the full object. You could also simply do alert($(this).val()) -- though realize of course that it will be wrong due to the first paragraph above.