I have a form with three select fields. I want the second select to populate based off of the first selection and then the third to populate based on the second selection.
So property type -> County -> City. A basic idea of my js is as follows.
$('.property_type').change(function(){
if(this.value == 'com'){
$('.property_detail_county').html('MY HTML');
}else if((this.value == 'res')){
$('.property_detail_county').html('MORE HTML');
}
All of this is in the .ready(). And this is working fine. My problem is, when you try to write the second function that is made to populate the second select(the cities), it doesn't fire anything. Here is my second function, also inside of the ready.
$('.property_detail_county').change(function(){
console.log('Changed');
});
My theory is that the second function is never getting read or loaded because of the condition. Do you guys know of another way to do this?
Thanks in advance.
P.s. If this has already been answered, feel free to just point me in the right direction, I couldn't find the subject anywhere.
It depends on the HTML that you put in the 2nd dropdown. For example, if the HTML is like:
<div id="a"><select>...</select></div>
<div id="b">...</div>
And your javascript does this:
if(this.value == 'com'){
$('.property_detail_county').html('<select>...</select>');
}
You have replaced the 2nd select statement completely and there is no change even tied to it. The change even is tied to the old <select> that you replaced.
You can just reinstate the change code:
if(this.value == 'com'){
$('#b').html('<select id="sel_b">...</select>');
$("#sel_b").click(function() {
... the stuff to do when 2nd one is clicked ...
}
}
It really works better if you define a function to handle that second set of stuff.
Note There are other ways to do this where you detect the change event as it bubbles up to a <div> or some element higher up the DOM tree. You can read about that in the jQuery docs. It's called "event delegation".
Related
long-time lurker here asking my first public questions because I am truly stuck.
I'm working on a hosted shopping cart platform so I only have access to add code in certain designated divs. I have a javascript code that I'm calling externally (because inline is bad unless you have to, right?)
So my issue is, There is a <select> dropdown that I do NOT have direct access to change HTML and the silly shopping cart platform didn't give it an id, only the name attribute is set.
I need to clear the <div id="result_div"> when the <select name="ShippingSpeedChoice"> drop-down is clicked so I have:
$("[name=ShippingSpeedChoice]").change(function(e) {
$("#result_div").empty();
});
It fires once, but that's it. My question is, how do I make it fire EVERY TIME the <select name="ShippingSpeedChoice"> is clicked?
Here's all the relevant javascript (in case it's preventing #result_div from clearing somewhere):
$("[name=ShippingSpeedChoice]").change(function(e) {
$("#result_div").empty();
});
$("#btn_calc").click(function(e) { /// onclick on Calculate Delivery Date button
Thanks in advance, any help is appreciated!
If you want something to happen every time the element is clicked, use .click() rather than .change(). The latter only fires if they select a different value from the menu than it had before.
$("[name=ShippingSpeedChoice]").click(function(e) { $("#result_div").empty(); });
First of all, I'd probably try and setup the shopping cart select to have an id.
$("[name=ShippingSpeedChoice]").id = 'shopping_cart_select';
then try binding the "change" function to the element via it's id.
$('#shopping_cart_select').bind('change', function(){
//rest of code goes here
}
I still wasn't able to use the name attribute to call the function, so I found a way around it by using the id of the td the ShippingSpeedChoice dropdown was in:
$("#DisplayShippingSpeedChoicesTD").change(function(e) {
$("#result_div").empty();
And it fires every time now. Thank you so much for all your feedback & assistance - I still wish I could figure out how to use the name attribute rather than the id, but that will be a puzzle for another day!
On my page, I have a form with three <select> drop down lists. All these lists use DropKick to make them look nice.
With DropKick added, the DDLs are no longer conventional lists and so cannot be accessed as such.
From what I've found, you can only call onchange by setting a class on the <form> tag and then using the following script:
function submitIt(){
alert('test');
}
$('.deviceChosen').dropkick({
change: submitIt
});
This works, and alert shows. But also doesn't work for a couple of big reasons.
The first <select> field is the only field that gets shown as a result. And everything else on the web page after that element gets removed from the page.
So what I have is three DDLs and I want to be able to set up a function that gets called when the deviceChosen id DDL gets changed. I don't want an onchange event for the other two lists.
Is this something that is doable?
I've tried things like the below, but it just will not work.
$('#deviceChosen').on('change', function() {
alert('dsf');
});
I couldn't get this working, so I ended up using selectBox instead
http://labs.abeautifulsite.net/jquery-selectBox/
I am able to makeit work, you can use the below mentioned code for sample purpose.
$("#ID_OF_SELECT_TAG").dropkick({
change: function (value, label) {
//Logic that you want to apply onchange event.
}
});
Thanks
I am trying to append new returned data to my select tag when user selects a drop down menu
obj.prototype.getText=function(){
codes....
call ajax....
ajax.callback=function(data){
$('#option').append(data);
}
}
$('#dropdown').on('change', function(){
obj.getText()
})
My problem is that I only want to append data when the user clicks the dropdown menu the first time.
my code will keep append more same data to my #option as long as user keeps clicking the drop down menu...
Are there anyways to fix this? Thanks a lot.
Use .one() instead of .on(). It unbinds itself once you trigger the event once:
$('#dropdown').one('change', obj.getText);
You could simply remove the on change event, so it's no longer triggered.
$('#dropdown').off('change');
I would also look into the notion of a "run once" command. This isn't really what I would recommend here, but going forward, it's a cool thing to know. underscore.js does it well
You need to turn off the handler.
something like this.
$('#dropdown').on('change', function(){
obj.getText()
$('#dropdown').off('change');
})
That is probably the best way , turn of event handler , or you could always store a bool value in a hidden field , like
<input type="hidden" id="hidAleadyAppended" />
and then set it to true after it is appended once.
This way if you ever need to know if it has been appended already in other code, that is a quick reliable way to check
I'm putting together this basic script for a site: http://jsfiddle.net/mcgarriers/rVPnu/2/
It works great when I select the various numbers (it shows the relevant divs) but when I go back to click "Select" it still displays the <div>s. I'd like it if the user clicks "Select" that mySpecialElements is hidden again.
Can someone show me how to achieve this?
Many thanks for any pointers.
Fixed your script here: http://jsfiddle.net/rVPnu/6/.
if(!value) hideAll(elementsContainer);
You need to check that value is not empty in the doSelect method and hideAll if it is.
Just interchange hideAll(elementsContainer); and if (!targetDiv) { return;} in your doSelect function.
I have saved this in: http://jsfiddle.net/rVPnu/9/
Call hideAll(elementsContainer); before returning from doSelect method.
// do magic..
hideAll(elementsContainer);
if (!targetDiv) { return;} // didn't find the element, bail
Demo
Total N00b here, I have a long form wizard that needs one step to be dynamically shown/hidden dependant on a radio button. All is cool with the code thus far.
function checkRb () {
if($(this).is(":checked")){
//yes
$("#do_frick").val("step5");
//alert ("yeah");
}else {
//no
$("#do_frick").val("submit_step");
//alert ("no");
}
}
The issue is that the hidden field "#do_frick" is several steps further down the page. If I place it in the same div as the checkbox, values change no problem. Place "#do_frick" further down the form and it doesnt change.
I expect that $(this) is only looking inside the current div and not the entire document. I got this far with the help of a very good programmer and dont want to annoy him further with N00b questions, any help greatly appreciated :)
It appears that if I put the "#do_frick" inside a div that is further down the page the form wizard sets the to display:none and anything inside the div cannot be set... would this be correct ?
Please view source of your page to check what is ID of hidden field when it is several steps down. If ID is same then position should not be a problem.
this is not current div. In event handlers it means the object that raised the event. You should check jquery.com for more information on this.
PS:- try setting value of hidden field like this
$("#do_frick").attr("value","submit_step");
look for the id in generated html as suggested above.
Also look for any duplicate id shared by any other element, this will mess up things.
SO after much noodle scratching the answer is a little bug/hiccup in jQuery
Whenever the field is in a div that has the rule "dsiaply: none;" applied jQuery cant reach inside and change it. Checking with firebug, the field has an additional value "disabled=''". Using the command
$('#do_frick').get(0).disabled = false
Sorts it out.. finally:)
Final code:
function checkRb () {
if($(this).is(":checked")){
//yes
$('#do_frick').get(0).disabled = false //The important bit
$("#do_frick").val("step5");
//alert ("yeah");
}else {
//no
$("#do_frick").val("submit_step");
//alert ("no");
}
}