I have html:
<form id="fileuploadform">
<input type="file" id="fileupload" name="fileupload" />
</form>
and jquery:
$(':file').change(function(){
var file = this.files[0];
...
});
The problem is: the change function fires only when the file selection is different than the selection made previously. That is of course the meaning of the 'change' event.
I want my function to be called with the file dialog closes, no matter what.
I tried using 'select' event -- it never gets called
I also tried:
$(':file').bind('dialogclose', function(event) {
alert('closed');
});
and:
$(':file').live("dialogclose", function(){
alert('closed1');
});
They didn't work either.
I have faced the same issues when I used to work with jQuery dynamic appended HTML.
I would suggest you to use the below solution
$(document).on('input','#fileupload', function () {
console.log('Your Code')
});
try to use this code.
$('#fileupload').on('change', function () {
alert('Hi');
//do your function.
});
this function will call only you select different files otherwise not.
I know this is an old post, but try using 'input' instead of 'change'. Worked for me. :)
$('#fileupload').on('input', function () {
alert('Hi');
});
Related
hey all i am appending a form to a page on click the form has some text boxes and i need to add event listner like on keypress but the function dosent works dont know where is the problem the function works well everywhere but not for this form here is the code.
appending the form
function activityCHART(thisobj){
var theidis=$(thisobj).attr("id");
$("#FULL_FADE").fadeIn();
$.ajax({
type: 'post',
url: 'newpage.php',
data:{'actde':theidis},
success: function(dataa){
$("#the_APPEDEDr5").empty().append(dataa);
}});}
newpage this textbox is present and some more text areas
<input type="text" name="deptname" placeholder="department name" id="detp_names09o" class="TEXTNAME_o909ioi"/>
add this event listner
$('#detp_names09o').keypress(function (e) {
alert('ok');});
these are some script links
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
i think there are some script link problem
alert comes when i does it like this onkeyup="thisisfun();" function thisisfun(){ alert('ok'); }
You should use live(), delegate() or on() to attach event listeners to dynamically added DOM elements. bind() and keypress() doesn't work for elements that are dynamically added to DOM[see this]
$('#detp_names09o').live("keypress",function (e) {
//do some stuff
});
.on() is mostly syntax sugar that can mimic .live(), or .delegate() depending on how you call it.
$('#detp_names09o').on("keypress",function (e) {
//do some stuff
});
Also, you have specified two different versions of jQuery. Though CDN's do have some advantages over locally referenced libraries, they might break your code at-times.
If thats the reason you've referenced to local jQuery file(along with CDN version), you might consider looking at CDN fallbacks. In either case, you should be careful about the version you are using.
Cheers!
To attach event to dynamically added elements,
Try binding the event using 'bind'
$('#detp_names09o').bind("keypress",function (e) {
alert('ok');
});
or use 'on'
$('#detp_names09o').on("keypress",function (e) {
alert('ok');
});
Also you dont require two versions of jquery in your page, also make sure this id is not duplicated
use onkeyup,.. attribute inside the element and call the function like this
<input type="text" name="deptname" placeholder="department name" id="detp_names09o" class="TEXTNAME_o909ioi" onkeyup="functionName()"/>
in javascript
function functionName(){
//your code
}
First of all you should decide what do u want to use, keyup or keypress ? For example if you want to use keyup and you are using jquery version greater than 1.7 then use
$(document).ready(function () {
$('#element').on("keyup",function () {
alert('result ok');
});
});
else u can use
$(document).ready(function () {
$('#element').live('keyup', function() {
alert('result ok');
});
});
Make sure that you are calling working script (check your script link), try not to make duplicate ids of elements instead use class and avoid using inline use of javascript. Happy Coding !
<input type="text" />
<input type="file" />
$('input[type=text]').click(function() {
$('input[type=file]').trigger('click');
});
I can get browse option (open dialog box) when I click the test box. But I cannot get browse option when I trigger text box's click using jquery trigger method.
$('input[type=file]').trigger('click');
How do i solve this?
What helped for me is to set the event-listener inside:
$(document).ready(function(){
$('input[type=text]').click(function() {
$('input[type=file]').trigger('click');
});
}};
That used to do the trick for me. You might try it as well.
You can wrap your code inside DOM ready handler $(function() {...}); to make sure your DOM elements are loaded properly before executing your jQuery code.
$(function(
$('input[type=text]').click(function() {
$('input[type=file]').trigger('click');
});
)};
My belief is your selector $('input[type=text]') is not selecting , give it some id and use it like
$("#text").click(function(){
$("#file").trigger("click");
});
I have a small piece of script in an external .js file that will not run. Here is the script:
$(document).ready(function () {
$('#chkAllTracts').change(function () {
alert("fired");
})
});
I have a number of other functions in the same .js file that use some jQuery and they all work fine but this is the first jQuery I have attempted to use inside this syntax:
$(document).ready(function (){ }
All I am trying to do is make an alert open when a checkbox is changed (checked or unchecked). The checkbox element "chkAllTracts" is added dynamically using jQuery before this function is called.
$('#checkbox1').mousedown(function() {
if (!$(this).is(':checked')) {
alert("test")
}
});
something like that? (edited)
This worked for me:
$(document).ready(function(){
$("body").append(
$("<input>")
.attr("type", "checkbox")
.change(function(){ alert("It works!"); }))
});
When the document is ready it includes in the body the checkbox input with the change event set to fire the alert message.
It is because your element is dynamically added to the DOM. jQuery selectors would not get hold of it when jQuery first initialise. What you need to do is
$('body').find('#chkAllTracts').change(function () {
alert("fired");
});
I think that should solve your problem.
I use this for click event of button
$(document).on("click", "#feed_show_more_button", function() {
var a = $("#feed_show_more_button").attr("name");
show_more(a);
});
Then after button dynamically created i want to use this as a fake click
$("#feed_show_more_button").click();
but it doesnt work.
EDIT: I realized that show_more function doesnt fired unless it is included the ajax result. How can i make this function sth like global ?
Instead of fake call:
$("#feed_show_more_button").click();
you could simply write:
show_more( $("#feed_show_more_button").attr("name") );
If show_more is accessible(visible on scope) of course.
I am suspecting the diagnosis because the console logs "foo my button" when I paste this code into the javascript console (firebug)
$(document).on("click", "#feed_show_more_button", function() {
var a = $("#feed_show_more_button").attr("name");
console.log("foo",a)
//show_more(a);
});
$("body").html("<div name='my button' id='feed_show_more_button' style='border:1px solid red;height:100px;width:100px'></div>");
$("#feed_show_more_button").click()
Neat trick btw.
I have a bit of a problem with a jQuery dialog and the way scripts are handled.
In the dialog html, I have
<input id="test">
If I do
<script type="text/javascript>
$('#test').val("haha")
</script>
after the input, it shows up. If I put it before, it doesn't work.
Now the problem is I'm trying to change the value of $('#test') using a click trigger, and I can't!
$('.testbutton').click(function() {
alert();
$('#test').val("haha");
});
The alert works, and the initial val replacement works, which means there aren't any duplicate or missing input areas.
The total script as it is now, not working:
<input type="button" class="testbutton" />
<input type="text" size="10" id="test" name="test" value="">
$('#test').val("currentvalue"); // This works
$('.testbutton').click(function() {
alert();
$('#test').val("haha");
});
Update
The dialog shows the correct value in #test once the dialog is closed and then reopened. Could this be something I'm missing?
Put your jQuery code into $(document).ready(function () {...your code...}). This will make it executed after browser creates DOM tree for your page. Otherwise javascript is not able to search/manipulate DOM elements correctly. It will look as following:
$(document).ready(function () {
$('.testbutton').click(function() {
$('#test').val("haha");
});
});
Update:
If your HTML code is loaded dynamically, then use live to bind event handler:
$(document).ready(function () {
$('.testbutton').live("click", function() {
$('#test').val("haha");
});
});
I guess you should wrap your code inside of a $(function() { //code here }); to make sure your code is run only when your DOM is ready.
The problem ended up being the # in test. For some reason the replacement works with a class identifier instead of a id identifier. I suppose it's because the # will replace only one instance, and for some reason that I have yet to discover, there is more than one instance of the dialog (or a hidden one).
Thanks for all your suggestions!