Develop Reference

Timing issue with file input/read [duplicate]

I have a file input element
<input type="file" id="fileid">
How do I call a JavaScript function after selecting a file from the dialog window and closing it?

jQuery("input#fileid").change(function () {
alert(jQuery(this).val())
});

<script>
function example(){
alert('success');
}
</script>
<input type="file" id="field" onchange="example()" >

<input type="file" id="fileid" >
the change will function when you put script below the input
<script type="text/javascript">
$(document).ready(function(){
$("#fileid").on('change',function(){
//do whatever you want
});
});
</script>

This tested code helps you:
$("body").on('change', 'input#fileid',function(){
alert($(this).val());});

Try declaring on the top of your file:
<script type="text/javascript">
// this allows jquery to be called along with scriptaculous and YUI without any conflicts
// the only difference is all jquery functions should be called with $jQ instead of $
// e.g. $jQ('#div_id').stuff instead of $('#div_id').stuff
$jQ = jQuery.noConflict();
</script>
then:
<script language="javascript">
$jQ(document).ready(function (){
jQuery("input#fileid").change(function () {
alert(jQuery(this).val());
});
});
(you can put both in the same <script> tag, but you could just declare the first part in you parent layout for example, and use $jQ whenever you use jQuery in you child layouts, very useful when working with RoR for example)
as mentioned in the comments in another answer, this will fire only AFTER you select a file and click open. If you just click "Choose file" and don't select anything it won't work

I think your purpose is achievable, but AFAIK no such event like that.
But to achieve that you need cooperate with 3 event,
i assume you just need to know about the file name.
I created walk around here
Firstly the change event just fired when actual change happen, selecting same file won't trigger change event so do opening dialog and cancel it.
Then clicking choose file the input element will gain focus, when pop up file dialog opened input element losing the focus.
When pop up file dialog closed, input element will regaining it focus.
So you might run client side validation on client side when the input element losing it focus 'again'.

jQuery click event not firing for div

I don't understand why this isn't working. I have a table that includes a div and an image in the header. When I click on this, I want to fire the click event via a jQuery function. Here is a screenshot of the HTML:
And here is the jQuery function:
$(document).ready(function () {
console.log('ready');
$('#add_external_link').on('click',function(){
alert('clicked');
});
});
I believe that the element is in the DOM before the event is bound. The tail of the HTML looks like this (it's the 'external_link_dialog.js' file that contains the jQuery language from above):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/jquery.dlmenu.js"></script>
<script src="js/external_link_dialog.js"></script>
</body>
</html>
My console output shows ready as soon as the page is loaded. However, when I click that <div>, nothing happens. I see no errors, no console output, and of course no alert. Can anyone see what I am doing wrong? I've been at this for hours, and am out of ideas. Thank you!

I guess that you are appending the div after the document.ready .
If you are adding that add_external_link div dynamically, you should attach the .on("click function after appending that div.
If the div is not added dynamically, then try adding a timeout
$(document).ready(function () {
console.log('ready');
setTimeout(function(){
$(document).on('click','#add_external_link',function(){
alert('clicked');
});
},1000);
});

Depending on your CSS, the div may actually be smaller than the image you're trying to click on.
Try setting your target to the following:
$('#add_external_link img').on('click', function(){
alert('clicked');
});

Try delegating to document or the closest static element.
$(document).on('click','#add_external_link',function(){
alert('clicked');
});

How to trigger a anchor tag click event dynamically using javascript?

I'm trying to trigger a already written click event for an anchor tag using JavaScript but it is not working. can any one please help me to do this
I have a anchor tag
<a id="memberid">Data Member</a>
<script>
$("#memberid").click(function() {
changebreadcrumb("Data Management");
});
</script>
i want to trigger above click event on load
i tried
$("#memberid").click();
and
$("#memberid").trigger("click");
but did not work.

Place this at the end of your HTML before the closing body tag
<script>
$(document).ready(function(){
$('#memberid').trigger('click');
});
</script>

DEMO
Use jquery and check whether your dom is ready. It works fine.
See the properties in the fiddle on its left side panel
$("#memberid").click(function() {
alert('clicked');
});
$("#memberid").trigger("click");
EDIT:
FINAL DEMO
If you want to triger click on pageload, use window.onload in javascript or jquery load method as i mentioned.
$(window).load(function()
{
$("#memberid").trigger("click");
});

If your click is not working then in that case....try on() function to trigger event
$(document).ready(function(){
$("#anchor_id").on( "click", function() {
//your work
});
});

Replace a title with an input and update the title on the database

Hi I'm trying to replace a title when clicking on it by a text input in order to modify the title and then submit the modification to the database, I'm using this code :
<div style="font-size: 70%;"><h2 class="outer"><?php echo $designation; ?> </h2></div>
this div is loaded using another script and therefore is not on the original page, so I think we must use the delegate method.
Here is the jquery script I'm using to turn its background color to pink:
<script src="jquery-1.10.2.min.js">
$(document).ready(function(){
$("#right").delegate("h2","click",function(){
$("h2").css("background-color","pink");
});
});
</script>
Any idea how to replace the title in this div by a text input tag ? and any idea how to submit the modification to the database once I click outside the input field ?
thank you

There is no click handler in you code, you can use .on() method
You should use another script tag for loading .js files, your markup is invalid
input element doesn't have closing tag, you should remove the </input>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){ // When the DOM is ready
$(".outer").on('click', function() {
if ( this.children.length ) return;
var text = $.trim(this.innerHTML);
$("<input>").val(text)
.appendTo($(this).empty())
.focus();
}).on('blur', 'input', function() {
// Listening to blur event
// for replacing the element with it's value
$(this).replaceWith( $.trim(this.value) );
})
})
</script>
http://jsfiddle.net/3FKzH/

ColorBox onClick run JS Function

I am using ColorBox inline functionality and I have created a button which I've set to close the window when clicked:
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
});
I have another function which I want to run when the button is clicked, so I've used:
<button class="closebutton" onclick="myFunction();">Close</button>
Problem is the myFunction is not working above.
Any ideas please?
UPDATE:
Here is where the code is:
<script type="text/javascript">
jQuery(document).ready(function() {
$(".inline").colorbox({inline:true, width:"50%"}); //for colorbox inline
$('#cboxClose').remove(); //remove popup window close button
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
myFunction();
});
Adding myFunction(); before or after $.fn.colorbox.close(); is not working
myFunction code: (This goes after the code above on the page)
<script type="text/javascript">
function myFunction() {
$("#ajax-form").submit(function(){
$.post("update.php",
$("#ajax-form").serialize(),
function(data){
$('#jqm').attr('src',
$('#jqm').attr('src'));
}
);
return false;
});
}
</script>
UPDATE 2:
I'll try to explain better: I have a form and input on the main page that works find, so when you add some text to the input box and submit then form then the value of the input is submitted.
Now, when I put that same input in the inline area of colorBox so that it appears inside the popup window the value is not submitted. I've tried grabbing JS errors on firebag but cannot see anything there.
Hope this helps.

Why not just add myFunction() before $.fn.colorbox.close();? That way you can be sure what order things are handled in.

Instead of using inline javascript, you could simply do something like this :
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
myFunction();
});

I believe the problem is that myFunction() (the onClick attribute) is being overridden by jQuery. If you want your function to execute whenever a .closebutton is clicked just use:
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
myFunction();
});
If its only for that button, try adding an id to that button and:
$('.closebutton').live('click', function(){
$.fn.colorbox.close();
if($(this).attr('id') == 'exampleID')){
myFunction();
}
});

Ok so, after reading your update #2, I understand that actually your problem is not that the myFunction code doesn't execute right.
The problem is that you moved your input inside the colorbox, so its value doesn't submit with the form, wich is normal because the input is now outside the form.
You could either simply move your whole form inside the colorbox, or use javascript to copy the value of the input you moved outside of your form in a hidden input.