In my site I have some code as follows: -
$(function() {
$(document).on('change', 'select', function() {
var formID = $(this).attr("id");
if((formID.indexOf("forms[")>-1)){
var newFormID= $(this).val();
var scenarioID = ${testScenarioInstance?.id}
getFormInformation(newFormID, "forms", $(this), scenarioID);
}
});
});
In another part of the page the user can add additional selects via a simple little post and append. The trouble is for any newly added selects this piece of code doesn't trigger, but it works fine for any select that is there when the page loads. Any ideas why this is?
It should work well as you have it now, here I made little example with your same code for the event:
http://jsfiddle.net/2KCY9/
$(document).on('change', 'select', function () {
alert("Works well");
});
Related
var replinks = {'a.repopts_link': function(e) {
e.onclick = function() {
save_focus(this);
set_options(this);
JsHttpRequest.request(this, null);
performCustomization();
return false;
}
},}
Behaviour.register(replinks);
function performCustomization(){
selectbox_selector.onchange = function(){
alert(this.value);
}
}
I am using frontaccounting PHP based application. And I want to perform some task onchange value of select box. But form is being loaded by ajax.
I have tried above code but code in onchange section not working. If I put alert above onchange section so it is working. And I am getting the selectbox selector.
Small help will be very appreciated.
Hi I am developing one jquery application. I ghave one dropdownbox with jquery choosen.
$(function () {
$(".limitedNumbSelect").chosen();
});
This is my dropdown and binding values from database.
<b>Awarded To:</b> <asp:ListBox ID="ddlvendorss" runat="server" SelectionMode="Multiple" class="limitedNumbSelect"></asp:ListBox>
I am trying to get click event for the above dropdown. As soon as i click on the dropodwn i want to fire a alert before loading any options.
$('#ddlvendorss').click(function (e) {
alert("I am going crazy");
});
In the below code checkedValues arrays contains some values(values present in dropdownlistbox). As soon as i click on the drodpown i ant to hide those values. But below code doesnt work.
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
$(".limitedNumbSelect option").each(function () {
var val = $(this).val();
var display = checkedValues.indexOf(val) === -1;
$(this).toggle(display);
$('.limitedNumbSelect option[value=' + display + ']').hide();
$(".limitedNumbSelect").find('option:contains(' + display + ')').remove().end().chosen();
});
});
Above code does not work. May I get some advise on this? Any help would be appreciated. Thank you.
Chosen hides the select element, thus you are not actually clicking the element. However you can use chosen:showing_dropdown event
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
alert('No need to go crazy');;
});
Fiddle
If you want to hide options, You can use
$(".chzn-select").chosen().on('chosen:showing_dropdown', function() {
//Find options and hide
$(this).find('option:lt(3)').hide();
//Update chosen
$(this).chosen().trigger("chosen:updated");
});
Fiddle
As per OP's code
$(".chzn-select").chosen().on('chosen:showing_dropdown', function () {
//Get all options
var options = $(this).find('option');
//Show all
options.show();
//Hide based on condtion
options.filter(function () {
return checkedValues.indexOf($(this).val()) === -1;
});
//Update chosen
$(this).chosen().trigger("chosen:updated");
});
instead on using on click, use on change e.g.:
jQuery('#element select').on('change', (function() {
//your code here
}));
I am using pjax. It's working completely fine for previous and next link. In the same page I have select2 dropdown which should act same as previous and next link. I tried adding url of selected dropdown to a tag and then trigger the pjax but to no avail.
Any help/suggestions are welcome. I have tried the following.
This is for the previous and next button and it's working perfectly fine.
new Pjax({
elements: "div.js-Pjax a",
selectors: [".nogallery img", ".bannerBottom", ".dropdownSearch", "article.kinaguidenContent"]
})
For the change in simple dropdown I used the following but to no avail.
jQuery(document).on("change", "select#kinaguidenCategoryValues", function() {
var val = jQuery(this).find("option:selected").val();
jQuery("a.js-Pjax").attr("href", val);
new Pjax({
elements: "a.js-Pjax[href]", // default is "a[href], form[action]"
selectors: [".nogallery img", ".bannerBottom", ".dropdownSearch", "article.kinaguidenContent"]
})
alert(jQuery("a.js-Pjax").attr("href"));
})
I have changed the code as follow and it's working perfectly.
jQuery(document).on("change", "select#kinaguidenCategoryValues", function() {
var val = jQuery(this).find("option:selected").val();
jQuery("a.js-Pjax").attr("href", val).trigger("click");
})
jQuery(document).on("click", "a.js-Pjax", function(e) {
e.preventDefault();
var url = jQuery(this).attr("href");
var p = new Pjax({
elements: "a.js-Pjax",
selectors: [".nogallery img", ".bannerBottom", ".dropdownSearch", "article.kinaguidenContent"],
})
p.loadUrl(url, p.options);
});
I can't manage to find out how to initiate a click event by a user clicking on a dropdown. I want to populate the dropdown ONLY if the user clicks the dropdown which will be rare. In addition, it depends on several other values selected on the page. So basically, how do I fire off an event if a user just simply clicks on the dropdown to see the options.
I've tried, $('select').click but to no avail.
It works if you don't have any options. But if there are current options, no luck.
Try using the focus event instead, that way the select will be populated even when targeted using the keyboard.
$('select').on('focus', function() {
var $this = $(this);
if ($this.children().length == 1) {
$this.append('<option value="1">1</option><option value="2">2</option>');
}
});
View simple demo.
UPDATE
Here is a new version that uses unbind to only fire the event handler once. This way you are able to use your alert without adding any option elements to change the outcome of the condition as the previous solution required.
$('select').on('focus', function() {
var $this = $(this);
// run your alert here if it´s necessary
alert('Focused for the first time :)');
// add the new option elements
$this.append('<option value="1">1</option><option value="2">2</option>');
// unbind the event to prevent it from being triggered again
$this.unbind('focus');
});
Hope that is what you are looking for.
It should work. Here I've done it and its working.
$("select").on("click", function() {
$(this).append("<option>1</option><option>2</option>");
});
Updated: http://jsfiddle.net/paska/bGTug/2/
New code:
var loaded = false;
$("select").on("click", function() {
if (loaded)
return;
$(this).append("<option>1</option><option>2</option>");
loaded = true;
});
Getting the dropdown to automatically open after the click is trickier:
// Mousedown is used so IE works
$('#select_id').on('focus mousedown', function (e) {
var data;
$(this).off('focus mousedown');
$.ajax({async: false,
type: 'GET',
url: 'url that returns the options',
success: function (d) { data = d; }
});
$(this).find('option').remove().end().append(data);
// Prevent IE hang by waiting awhile
var t = new Date().getTime(); while(new Date().getTime() < t + 200) {}
return true;
});
Basically I'm trying to make a button be able to handle editing of an element. I want it so that when I click on the Edit button, it changes the text to Save Changes and adds a class which will then bind the button to another click event so that when they click Save Changes, it'll alert "Saved!" and change the text back to Edit. It does this perfectly once. If you continue to try to do it, it simply won't add the class or change the text anymore.
Here is a demo on jsfiddle
The code:
$(function() {
$button = $('button[name="edit"]');
$button.on('click', $button, function() {
var $that = $(this);
$that.text('Save Changes');
$that.addClass('js-editing');
if ($that.hasClass('js-editing')) {
$that.off('click').on('click', $that, function() {
alert('Saved!');
$that.text('Edit');
$that.removeClass('js-editing');
});
}
});
});
Try this http://jsfiddle.net/bpD8B/4/
$(function() {
$button = $('button[name="edit"]');
$button.on('click', $button, function() {
var $that = $(this);
if($that.text()=='Edit'){
$that.text('Save Changes');
$that.addClass('js-editing');
}
else{
alert('Saved!');
$that.text('Edit');
$that.removeClass('js-editing');
}
});
});
You never add back the original handler after calling off(), which removes it.
That being said, it might be easier to have two buttons, with appropriate click handlers, and then use hide() and show() to alternate which one is available. To the end user it should look and act exactly the same, and to you it will be a lot less of a headache to code.
Example: http://jsfiddle.net/VgsLA/
I think in the end, this code is more robust and manageable.
This is just a logic problem. And with $that.off('click').on('click', $that, function() { you are delegating to itself, which is not how you should do it.
Here is a solution using your code:
$(function() {
$button = $('button[name="edit"]');
$button.on('click', $button, function() {
var $that = $(this);
if ($that.hasClass('js-editing')) {
alert('Saved!');
$that.text('Edit');
$that.removeClass('js-editing');
} else {
$that.text('Save Changes');
$that.addClass('js-editing');
}
});
});
Demo