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
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!
I am using elSelect with mootools to change the look and fell of a select box. My problem is how can i call an ajax function when select box value changes?
<script type="text/javascript">
window.addEvent('domready', function() {
var mySelect = new elSelect( {container : 'someId'} );
});
</script>
Thanks in advance
Since elSelect changes the HTML structure to replace the dropdown, you can't use the change event set on the original dropdown. The documentation doesn't show any way to bind events to the replaced dropdown.
I'm not at all familiar with the way mootools works, but I notice in the source of the plugin that it has several event handlers defined, among which is onOptionClick. This gets triggered every time the user clicks an option in the dropdown. You can piggyback on top of it - change the code in that function to also trigger your ajax request.
Another option would be analyse the HTML structure of the injected elements - you can start from the id you give the constructor and look for .option elements inside it. You can them poll them for changes at fixed intervals (using setInterval) and send ajax requests when you see the value has changed. Or you can add click handlers to each option and take it from there.
I'd like to create a form where I have checkboxes, and when clicked, they open separate textareas for the user to enter more information in.
If I want to use Django's dynamically created form fields, is there a way that I can put a function call in for each checkbox.
You can dynamically add event handlers using JavaScript. You can add a script that, once the page is loaded, will find all checkboxes you want and add the handlers there. In jQuery, you can write something like this:
$(document).ready(function() {
$(".my_form input[type=checkbox]").change(function() {
//Some code here
});
});
Be careful, I have not tested the code above! But should be enough to get you started.
I'm working with jQuery and a plugin called jQuery.SelectBox
I have 3 selectboxes, selecting an option in the first selectbox will change the options in the second one.
My problem comes when I try to insert values in the second selectbox via append function in jQuery. Everything works fine but the new options are not clickable.
You can see the problem right here: http://incubadora.gelattina.com/impac/galeria.html (scroll down and to the right), there are the three selectboxes.
From what I understand, you put in a normal select, and this does a dynamic creation of a stylized 'select box' via jQuery.
The problem, I would guess, is that, since you're adding items after the select box's initialization, the new items don't have any sort of action listeners on them.
I can't seem to find any documentation on this SelectBox plugin, but you need to find a way to Bind the click and hover actions provided by SelectBox onto you're newly added items.
You can try calling the .selectbox(); function on the select elements after you've added the new options to see if that works.
Hey I wrote a select box plugin called Selectzor, just for this reason.
It should accomplish everything you need.
Will a javascript library like Prototype/Scriptaculous or jQuery help me create a dynamic form on a webpage where I can show a different set of checkboxes based on the value chosen in a combobox?
Yes. You can easily show/hide the desired checkbox-s in onChanged event of the combo box. You even don't need special JavaScript libraries to do that.
Yes, because all these libraries (frameworks) help make easy the cross-browser fiddling with the DOM..
Something along the lines of (in jQuery)
$(document).ready( //when the DOM is loaded invoke the following function
function(){
$('combobox_selector').change( // when someone changes the value of the combobox invoke the following function
function(){
$('some_checkbox_selector').hide(); // hide some checkboxes..
$('some_other_checkbox_selector').show(); // show some other checkboxes..
}
)
}
);
The selector parts of the code above should be replaced by the logic that determines which items gets hidden and which shown when the value of the combobox changes..