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
Related
Sorry if I'm unclear or the title is unclear, my main language isn't english. I was wondering if it's possible to send out a tweet without having to 'confirm' , i have a code that, when you press a button it tweets something, but a pop up opens, so i was really looking for something that can help me but I couldn't find anything related to this topic.
document.querySelector('#postInfo').addEventListener('click' , function(){
this.href = 'https://twitter.com/intent/tweet/?text=HEY';
});
The hey text is temporary, it'll come as some data from the DB.
You may be aware of this, but you actually are able to "programatically" click objects through your code. You will have to use a querySelector to first select the button you are trying to "click" and then you will need to use the .click() method on the object. If you are trying to remove the object or button altogether, you will first need to get the element then use element.parentNode.removeChild(element); to remove the element itself.
I'm using JQuery UI buttons and used ThemeRoller to do all the fancy color stuff. I'm currently looking for a way to present a button that does nothing except appear pressed.
I assume that there is a style attribute that I can use to just change the colors from default state to pressed state, but I am really struggling to find it. I also searched for a way to set the button to a "selected" state, without much luck. Either method works equally well.
Thanks!
Try justt adding the active class.
$("#buttonName").addClass("ui-state-active");
Thanks to some comments, I've discovered a method that that results in the desired behavior. It seems like far from the best method though.
$("#button-id").button().addClass("ui-state-active");
$(document).mousemove(
function(event){
$("#button-id").button().addClass("ui-state-active");
});
I guess continually resetting the class isn't the worst.
Note that any event I tried to bind to the button resulted in a reversion to original colors.
Looks like you are need to disable the button, and set the css style to active, so:
$('#buttonName').attr('disabled','disabled').addClass("ui-state-active");
should do the trick
EDIT
Since you don't want to disable the field:
$('#buttonName').addClass("ui-state-active").click(function(e) {
e.preventDefault();
return false;
});
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!
Hi is there any way to upadte cell value with no events (i dont want to use 'onClick' or others)?
The scheme is: user is filling form value, then clicks 'ok', and then value should be showed in cell in html table ?
thx in advance for all help
Well, you can use a link with href="javascript:myFunction()" instead of an onclick, but I'm not sure if that counts as an event :)
No, you need to hook up on an even to trigger it.
Since the user is going to click the Ok link anyways that seems to be the most relevant place to invoke your javascript from.
Create a div with an id around the content you would like to change.
Create a javascript function that sets the innerHTML of the above div.
Call the javascript function when the user hits the Ok link.
I want a checkbox on a web page. When I click it, it sends an ajax request to the server. When the server replies, I want the checkbox to change. I can fix everything except the fact that the checkbox immediately changes state when clicked.
Are you sure you really want this? An Ajax-Request can take its time. When the user gets no feedback, they may be inclined to click again and again, until something happens. When this deactivates the button (again after some time) the user gets even more puzzled.
Rather think about providing immediate feedback (e.g. check the box) and display an indicator next to it, that signals communication with the server (e.g. the famous spinning wheel). When the result is back, hide the indicator and deactivate the checkbox if needed. You may also want to inhibit posting the form during the ajax request.
You could probably do something like this: when the checkbox is clicked, set the checkbox to "disabled" (this greys out the checkbox and makes it uneditable), make your ajax call, and once you get the ajax return remove the "disabled" from the checkbox. Something like this (using jQuery, untested):
$('#mycheckbox').click( function() {
var checkbox = this;
$(checkbox).attr('disabled','1');
$.post( url, data, function() {
// if successful
$(checkbox).removeAttr('disabled');
}
}
Add to your onclick "return false;" and it should not change.
<input id="theChkbox" type="checkbox" onclick="this.checked=!this.checked;sendAjaxRequest(this);">
this.checked=!this.checked will reset the state of the checkbox to what it was before it was clicked. This should work in all browsers without the state flickering (too much).
sendAjaxRequest() will do your magic and when the request comes back set the appropriate checked state of the checkbox. Passing this to sendAjaxRequest() should give you a reference to the checkbox so you can adjust its state. Failing that, just use document.getElementById("theChkbox") to retrieve a reference to it to set its state.
You could start your onchange method with checkbox.checked=NOT checkbox.checked (you may have to modify this for your language of choice), you'll probably get a flicker but it should put it back quickly enough.
I think you should use other approach indeed. Maybe a button/image button because you want to fire some actions for a click to represent a specific command (desire) from the user. I will try to explain better: i think you have some info in the page and some gadgets where the user can click and do something (add an item to a cart) and i think it is more usable if the gadget has more visual appeal to the user than a checkbox (i.e. a "add it" for instance).
Hope this help.