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.
Related
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'.
I'm currently using lightbox2 to display a group of images, and what I want is to add a custom button in the data-title attribute, after I add it and the button shows, but I can't catch the click event of that button, when I click it and none of my code executed. Why is this happening? and how am I supposed to make it work?
data-title='button'
I'm guessing that you have myfunction() wrapped in a:
$(document).ready(function(){
or a
$(window).load(function(){
which is defining the function out of scope. If you can pull it out of the .ready() or .load() function it should work for you.
Working Example
So to sum up, this works:
function myfunction() {
alert('it works!');
}
$(document).ready(function(){
//other stuff
});
But this won't work:
$(document).ready(function(){
function myfunction() {
alert('it works!');
}
});
I have a simple script that alerts the user what he or she typed in a search box. Im using Jquery to get the value of the input field when the user clicks the search button. Nothing is appearing though when I click the search button.
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$('#searchButton').click(function() {
alert($('#youtubeSearch').val());
});
</script>
I just need an alert box to appear with the value, how do I do this?
Wrap your code inside the .ready handler. You cannot manipulate dom elements before it got ready.
Try this,
<script src="Scripts/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
$('#searchButton').click(function() {
alert($('#youtubeSearch').val());
});
});
</script>
DEMO
well.. you need to make sure the element is loaded , before you attach any events to it (click in your case) .. so for that you either have to enclose you code inside document.ready function
<script>
$(function(){
$('#searchButton').click(function() {
alert($('#youtubeSearch').val());
});
});
</script>
or add your script at the end of your HTML just to make user you DOM is ready..
I am trying to disable a link that submits my form after it has been clicked. This is needed to stop duplicate requests from the same user. Here is my code, but unfortunately it is not working.
<a id="submit-form-link" onclick="document.forms[0].submit()" class="next">Next <span>Step</span></a>
<script type="text/javascript">
$('#submit-form-link').click(function(){
$('submit-form-link', this).attr('style', 'pointer-events: none;');
});
</script>
I feel like I am close but it just is not working.
You're going about this wrong. Get rid of the inline onclick event handler and use this inside a document ready call:
$('#submit-form-link').one('click', function(){
$('form').submit();
});
This binds the click event to your link, but unbinds it after the first click.
You can see this in the console in this jsFiddle example. The first time you click the link it attempts to submit the form, but doesn't try on subsequent clicks.
Try this:
...
$('submit-form-link').off().click(function() { return false; });
...
<a id="submit-form-link" onclick="document.forms[0].submit()" class="next">Next <span>Step</span></a>
<script type="text/javascript">
$('#submit-form-link').click(function(){
if (!$(this).hasClass('disabled')) {
$('submit-form-link', this).attr('class', 'next disabled');
return true;
}
return false;
});
</script>
Here, you can create a class disabled and style it as you want. Just add this class after clicking the button so you will know that it is disabled. Then you return false to stop the event if the button was already clicked.
bind the click event again in the first click event callback function
$('#submit-form-link').click(function(){
$('submit-form-link', this).attr('style', 'pointer-events: none;');
$(this).click(function(e){e.preventDefault})
});
You have to remove the onclick attribute.
$('#submit-form-link').click(function(){
$(this).removeAttr('onclick');
});
Also, $('submit-form-link', this) is totally wrong. You are selecting nodes of type submit-form-link that are children of this. First of all you'd need #submit-form-link and second this is already a reference to the link node you just clicked.
This is a button to close the click but it fail and not work. I would like to know what is the tab ID since i did not think i assign one when i create a tab.
Thank you.
This is my attempt
js
$("#closeTab").click(function() {
window.parent.$('#tt').tabs('close','Create List');
});
html
<input type="button" id="closeTab" value="Cancel" class="submit"/>
I found my js code is working but the button can not trigger it? Why? thank you
latest try:
<script>
$(document).ready(function(){
$("#addlist").validate();
});
$(function(){
$("#closeTab").click(function() {
window.parent.$('#tt').tabs('close','Create List');
});
});
</script>
It still doesn't work so i think it is because the upper function ? How to fix this?
================================================================================
Also, are there any ways to clear my session in using this jquery function (what should i add for instance)?**Thanks
With javascript, you have to delay the execution of certain functions (like event handlers) until the page loads fully. Otherwise, it is attempting to bind a function to an element that doesn't yet exist. With jQuery, you can pass a function to jQuery to be executed on page load very easily like this:
$(function(){ /* code goes here */ });
So to use this with your code, you would do this:
$(function(){
$("#closeTab").click(function() {
window.parent.$('#tt').tabs('close','Create List');
});
});
This way, when the jQuery attempts to bind the function to #closeTab, it happens after the page has loaded (and after #closeTab exists).
Do you have any errors in the console?
Do you include jQuery before that click binding?
Try changing the window.parent.... to alert('clicked!'); and make sure you're actually getting there.
Also, make sure the click binding is inside of a:
$(document).ready(function(){
// here
});
A script can close only the windows it creates. It cannot close the tab which it didn't create.
To rephrase, cannot close tab only if unless but when created tab by script which is same that close window.
I hope this makes sense.
Maybe the form is submitted and the browser navigates to another URL before the code could run? Try replacing function() with function(e) and adding e.preventDefault(); to the beginning of the event handler.