Why i can not trigger the jquery function? - javascript

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.

Related

JQuery click() event listener not working

im trying to get a lil project going but im stuck on a very annoying thing.
$(document).ready(function() {
$("#search-button").click(console.log('hello'))
});
as you can see im targeting a search button with the id search-button and as soon as i click it something should happen. in this case i put a console.log in to test if it works but it doesn't. it always logs it as soon as i load the page , not when i click the button i target. ... what am i doing wrong
if you need more info on this pls tell me i tried to keep it as simple as i could
ty for your help
O.k
The click handler needs a function argument, not just the console.log by itself. Try this:
$(document).ready(function() {
$("#search-button").click(function() {
console.log('hello');
});
});
Inside of .click should be a handler .click(handler) and the handler should be a function. The browser is reading the code and when it hits console.log('hello'), it does it! It's seeing .click etc, but it doesn't matter; it next sees console.log and does it.
Try
$(document).ready(function() {
$("#search-button").click(function() {
console.log('hello');
});
});
As others have mentioned, the click function requires its own callback function. You can also use this, without requiring the use of document:
$("#search-button").on('click', function() {
console.log('hello')
})
I hope You're using jQuery version 3 or up. if you use 3 or up jquery version the good practice is you use Document binding Example:
jQuery(document).on('click', '#search-button', function(event) {
//your Code here...
console.log('hello');
});

Can't detect checkbox change when adding on document load

I'm a little stuck on this. I have a javascript function that, on page load, generates a form:
All the checkboxes have the class 'cls-select'. I am trying to then run another function (I've put a console.log in for now) when any of these checkbox states are changed but it's not detecting any changes.
$(function() {
FormGenerate();
$('.cls-select').change(console.log('Something changed...'));
// ...
});
When the page is first opened, the log message appears. But, no matter what is checked / unchecked, no additional log entries appears.
Can some one explain to me why this occurs? I'm guessing it's because when the .js file is loaded by the browser, there are no checkboxes with cls-select that exist on the page so there is nothing 'there' to fire the trigger.
Is there a way around this without having to start over? Any help / advice is greatly appreciated.
Your logic is assigning the result of console.log('Something changed...') execution as event handler and that's not what you are expecting to do.
Change your code by
$('.cls-select').change(function(){
console.log('Something changed...');
});
I think it happens because when you trying to set 'onchange' event for checkboxes, they didn't appear yet. So you should use jQuery 'on' like this:
$( 'body' ).on( 'change', '.cls-select', function() {
console.log('changes!');
});
There is a problem in your code you should do like this
$(function() {
FormGenerate();
$('.cls-select').change(function(){
console.log('Something changed...');
});
});

jQuery only possible to execute once per page load

My jQuery script is a popup window to my website when you click a button.
The buttons are in table, in a foreach loop. Things works just fine there.
The problem is, if i click product 1, the popup window works as it should, but when i close the window and try to popup it again, it not works. It will work again if refresh the page. It seems to work only once per button, then i need to refresh page..
The jQuery script is here:
;
(function ($) {
// DOM Ready
$(function () {
// Binding a click event
// From jQuery v.1.7.0 use .on() instead of .bind()
$('.wiki-button').bind('click', function(e){
var $tr = $(e.currentTarget).closest('tr'),
$content = $tr.find('#wiki-content');
$content.bPopup();
});
});
})(jQuery);
Thanks in advance :)
EDIT:
Thanks a lot for all answers. The rest of code can you look at this pastebin code!
Pastebin
use following
$(document).on('click','.wiki-button', function(e){
I think you are repeating the id wiki-content
Sorry to add as answer.

Javascript isn't firing in <script> but works in the phonegap function onBodyLoad(), why is this?

Earlier I asked a question about showing or hiding a div when a radio button is selected. The solution provided is here http://jsfiddle.net/MFJUv/1/
I'm using phonegap. When I place the javascript code to hide a div within the onBodyLoad() function necessary for phonegap, it works.
However when not using phonegap and placing the same code within a code tag it never fires and the div is never hidden. Do I need to include another function to fire this once the page has completely loaded?
$('#machinedropdown').hide()
$('input').change(
function(){
if ($(this).is(':checked') && $(this).attr('id') == 'radio-choice-h-6c') {
$('#machinedropdown').show()
}
else {
$('#machinedropdown').hide()
}
});
You need to put this code inside
$(document).ready(function(){
//...
});
similar to phoneGap's onBodyLoad() event.
Place your code in an appropriate ready handler, but if I had to guess without knowing much about phonegap or the context, all of your code should be handled inside of a
$(document).ready(function()
{
// here
});

jQuery Class selector not working

I'm struggling to make an alert come up when an anchor tag with a specific class is clicked inside of a div.
My html section in question looks like this...
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
The jQuery section is as follows..
$('.bar').click(function()
{
alert("CLICKED");
});
My problem is that I cannot get this alert to come up, I think that I'm properly selecting the class "next", but it won't pick it up for some reason. I've also tried almost everything on this page but nothing is working. If I don't try to specify the anchor tag i.e. $('#foo').click(function()... then it works, but there will be multiple anchor tags within this div, so simply having the alert executed when the div is clicked won't work for what I need. The website this is on is a search engine using ajax to send information to do_search.php. Within the do_search.php I make pagination decisions based on how many results are found, and if applicable, a next, previous, last, and first link may be made and echoed.
EDIT: I just figured it out, it was my placement of the .next function, since it wasn't created on the initial document load but instead after a result had been returned, I moved the .next function to the success part of the ajax function since that is where the buttons will be created if they need to be, now it works.
Try using the live() command:
$(".bar").live("click", function(){ alert(); });
Because you load your button via AJAX, the click event isn't binded to it. If you use the live() command, it will automatically bind events to all elements created after the page has loaded.
More details, here
.live is now deprecated and is the selected answer for this. The answer is in the comments in the selected answer above. Here is the solution that resolved it for me:
$(document).on('click','.bar', function() { alert(); });
Thanks to #Blazemonger for the fix.
You surely missed $(document).ready(). Your code should be:
$(document).ready(function(){
$('.bar').click(function()
{
alert("CLICKED");
});
});
Hope this helps. Cheers
Make sure you have included JQuery Library properly.
Make sure your script has written between $(document).ready() in short $(function(){ });
Demo : http://jsfiddle.net/W9PXG/1/
<div id="foo">
<a class='bar' href='#'>Next</a>
</div>
$(function(){
$('a.bar').click(function()
{
alert("CLICKED");
});
});

Categories

Resources