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.
Related
I have a table on my site, whenever you click on the first checkbox, all others are selected and are also performed other actions that does not matter.
Once the site opens, these data are loaded directly on the page with PHP.
http://i.imgur.com/GRIFbzN.png
Just above, I have a 'select' field with some options, whenever you change the option, you made an ajax request that returns other data, but with the same structure in HTML with the same checkbox and others like elements.
This data is loaded into the table, but after loading the javascript events does not work anymore. How to solve this?
HTML: http://pastebin.com/jU5nZURs
Javascript: http://pastebin.com/XT1ty019
Thanks!
Events are bound to existing DOM nodes.
When you replace / remove the nodes, the events bound to them go away, too.
You need to run this again after you load new content:
$(".checkData").on( "click", countChecked );
$("#checkAll").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
countChecked();
});
p.s.
Put it in a function so you don't duplicate code.
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 have fields where multiple extra fields can be added after the page loads (think education & work experience fields on job resumes). I am using this.
I can add a datepicker on the first field, but subsequent added fields do not access the datepicker, despite being cloned/essential duplicates of the original. I'm guessing that the datepicker only intializes on page load or for only one class on the page.
So on a page I initialize the datepicker:
$('.input-append.date').datepicker();
for a block of form code encapsulated by this class. OK for initial page load; and also OK if there is an error and the page reloads multiple fields previously input(there is a datepicker for all fields returned with any error). However, with another js function that adds new fields to the form, additional new fields do not have access to the datepicker. I do not see how to do this now, perhaps someone with more experience/wisdom can provide me a hint.
EDIT:
Simple enough: I simply added:
$('.input-append.date').datepicker();
to the code calling the new field. As to being the optimal solution I do not know, anyone who specializes in js can comment on that, and there are many other similar questions here I found once I expanded my search terms. However, good enough for me now in what I'm doing.
For elements which are being added on fly use data-provide="datepicker" attribute. It will be initialized lazily. For example if an input field is coming up in an ajax response and loaded in a container div. So in this case:
<input type="text" data-provide="datepicker" />
so when when you will load this ajax response it in cotainer div like
$('#container-div').html(ajax_response);
this will work.
In the same way if you are creating an element through jquery and appending it to some container (I think this is happening in your case), for example you have a function that creates textbox and append it to some container div and this function is called on click event of some element let's say it's button. Again data-provide attribute is the solution to this problem. For example
function createTextBox(){
var t = $('<input>').attr('data-provide','datepicker');
$('#container-div').append(t);
}
And this function is called on click event of some button like in this way:
$(document).ready(function(){
$('#someBtn).click(createTextBox);
});
In short whether that dynamic element is coming in ajax response as a string or being created through jquery, just use data-provide attribute to set bootstrap datepicker. Because in this case datepicker is initialized lazily in Bootstrap fashion.
Hopefully a quick one...
I need to fire the uncheckAll event in the click event of a separate button on my page, I have tried the following:
$('.masterProviderOrgsListBox').multiselect().uncheckAll();
but this isnt a recognised method. I basically want to fire the same method that is fired when you click the "Uncheck All" box in the header.
I was previously doing this:
$('.masterProviderOrgsListBox option:selected').removeAttr("selected");
but this removes the selections on the actual multiselect rather than the jQuery UI widget.
Couldnt find anything in the documentation, any ideas?
Methods
After an instance has been initialized, interact with it by calling
any of these methods:
// example: $("#multiselect").multiselect("method_name");
...which can be found in the widgets documentation under Methods
$("#multiselect").multiselect("uncheckAll");
1) first, you need to set default value of the control.
jQuery('#multiselect').val("");
2) Then, execute below code to reset the control.
jQuery('#multiselect').multiselect("refresh");
$("#multiselectoption:selected").removeAttr("selected");
$("#multiselect").multiselect('refresh');
refresh should be call after clearing the drop down.
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..