I have a conflict with my javascript which is causing elements not to fadein. I have a button set to fadein after 10 seconds which works fine when I remove my javascript that I'm using for something else.
Can anyone help me figure out what the conflict might be?
You can see the test page I'm working on here: https://training.handcraftedbusinessfilms.com/test-fade-in/
I've currently removed the javascript that is causing the conflict but you can see it below.
<script type="text/javascript">
// Custom code by James
jQuery( document ).ready( function ( jQuery ) {
// binds to the plugin's function
jQuery( "input[name='gform_payment_method']" ).on( 'click', gfpStripeToggleCreditCard() );
// triggers the change to default option
jQuery( "input[id^=gform_payment_method_card_]" ).click();
console.log("Hello James");
});
</script>
Bro, your script is correct, but I see that you have 2 calls of "document.ready" in different parts of the html, so just need use once. I have merged and tested the script in the "head" tag and it works:
<script>
$(document).ready(function() {
$("div.button").fadeIn(2000);
//By James
//binds to the plugin's function
jQuery( "input[name='gform_payment_method']" ).on( 'click', gfpStripeToggleCreditCard );
//triggers the change to default option
jQuery( "input[id^=gform_payment_method_card_]" ).click();
console.log("Hello James");
});
</script>
The jquery was being called before it was defined in the header b/c the scripts were injected into the header via the theme and we couldn't control exactly the order of the scripts.
The solution was to create a site specific plugin that set a function to hold off on calling any jquery before the jquery was defined.
Related
I have a simple button that calls a function inside index.html, and the function itself is in script.js, the function works when not using $( document ).ready(function() { //...}); but as soon as I add this line (at script.js), it won't work. This is how it looks:
index.html:
<button onclick="myFunction()">Click</button>
script.js with $( document ).ready: (Not working)
$( document ).ready(function() {
function myFunction(){
alert("Alright!");
}
});
script.js without $( document ).ready: (Working)
function myFunction(){
alert("Alright!");
}
Jquery solves this problem using selectors and binding events
In this cas use $('button').click(); to listen when the button is clicked.
Remove inline onclick
Hope this helps :>
$( document ).ready(function() {
$('button').click( () => alert("Alright!"));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Click</button>
You must have to add a library of JavaScript called jQuery. Because you are using the syntax of jQuery. (A rich and powerful JavaScript Library)
in Vanilla JavaScript we use document.getElementById('btnSubmit')
But in jQuery we write $('#btnSubmit') to do the same thing.
That's why you need to use the jQuery Library. You can use it directly form cdn or you can download it offline.
If you want to use cdn just add this
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>
One more thing in jQuery we use
$(document).ready(function(){
//your code goes here
})
to make sure that the Script will be effective after the DOM parsing/rendering is completed.
Thank you.
Another option is that u can create a variable outside of the document.ready scope. Probably, not your best option, but will get job done.
var func;
$(document).ready(function(){
func= function()
{
alert('Alright!');
}
});
<button onclick="func()">Click</button>
The scope of the anonymous function in$( document ).ready() no longer available when the execution of the function is finished . So can't call the function from this scope.
That happen because when the HTML is loaded onClick attribute is readed but this function is still not loaded.
The best approach in this case is make the binding on ready event.
I had a project with jQuery 1.11.2.1
where this jquery statement was working with no problems:
$( document ).ready(function() {
$(".clickme").click(function(){
$("#menu").toggleClass("fixed", $( $("#panel").is(":visible") ) );
$("#panel").slideToggle();
});
});
after I moved to jQuery 1.11.3.2
browser freezes whenever I click the ".clickme" button and ask me to block a script (jquery) that was hanging too long.
I had to remove the is visible condition to avoid browser hanging:
$( document ).ready(function() {
$(".clickme").click(function(){
$("#menu").toggleClass("fixed");
$("#panel").slideToggle();
});
});
the problem is I need to check the visibility of the #panel element.
element #panel default state is display:none
the issue is present in all browsers I can check.
The first example is almost correct, except that you're putting a boolean (from .is()) in to a jQuery object. The boolean needs to be given directly as a parameter to the toggleClass method. Try this:
$(".clickme").click(function(){
$("#menu").toggleClass("fixed", $("#panel").is(":visible"));
$("#panel").slideToggle();
});
More info on toggleClass()
This question already has answers here:
jQuery .live() vs .on() method for adding a click event after loading dynamic html
(7 answers)
Closed 7 years ago.
So the structure of my web page is split into three files. I have an index.html file with 3 divs; My navigation bar, a content box, and footer. Then I have two other .html files with different content that I want to load when clicking on links.
My Javascript looks like this:
$( ".content" ).load( "home.html" );
$( ".parents-link" ).click(function() {
$( ".content" ).load( "parents.html" );
});
$( ".home-link" ).click(function() {
$( ".content" ).load( "home.html" );
});
All files use some javascript and when I first open index.html everything works perfectly fine, but once I start clicking on the links the javascript doesn't fire anymore in the content div. My navigation bar in index.html uses javascript and still works regardless.
also, all my custom js is in one .js file for all three .html files. I'm also using some plugins.
How can I fix this issue?
You are loading dynamic content on click. .click() works only for elements currently in DOM, not for future elements. You must use $(staticElement).on('click', 'dynamicElementSelector') for that:
$(document).on('click', ".parents-link", function() {
$(".content" ).load("parents.html");
});
I suggest using dynamic structure:
$(document).on('click', '.loading-link', function (event) {
event.preventDefault(); // Prevent browser from following link.
$.load($(this).attr('href'));
});
There will be only one function for all links that must load some content.
Let's try this:
$('html').on('click', '.parents-link', function() {
$('.content').load('parents.html');
});
$('html').on('click', '.home-link', function() {
$('.content').load('home.html');
});
And as I said in my first comment, we need to bind events to an upper parent and make use of event propagation.
I want to make function working only on page with specified element.
I have search page, search fields and results are in search-block div.
I want to bind function to this block, so function will not work on other pages (without <div id='search-block>...</div>)
I have next js code atm:
$(document).ready(function()
// instructions for another page (handlers for some links)
$(function(){
setInterval(findSomething,1000);
});
});
It working fine on page with search-block div, but it works fine on the other pages too. Browser tries to run this function on all other pages. I don't need this.
I tried jquery bind, but it now worked for me, don't know why :(
$("#search-block").bind(function(){
setInterval(findSomething,1000);
});
How I can bind handler to speciges too.fied block?
Instead of bind you have to check for the length of that elem:
$(document).ready(function(){
if($('#search-block').length > 0){ // <---checks the availability
setInterval(findSomething,1000);
}
});
Bind is always used with an event to bind to:
$( "#foo" ).bind( "mouseenter mouseleave", function() {
});
if you want to execute that only when the block is available on the page, use this:
if ($('#search-block').length) {
setInterval(findSomething,1000);
}
This checks the number of times #search-block is found on the page and if it is not 0(false) it executes the code.
I'm having a hard time with overriding a core jQuerymobile function.
Here's the link to JQM library Im using: http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.js
I changed line 5873
.appendTo( wrapper )
to following code:
.appendTo( *My own code* )
But I'm aware that changing the code directly inside JQM library isnt the best way to achieve what I need. So I would like to make an override in a custom js file.
How would I do it, in order to override the least of the JQM lib code? Thanks in advance.
That code is found within a delegated event handler, so you could overwrite that event handler with your own from an external file.
Lines 5788 to 5884 (with most of the code redacted):
$( document ).delegate( ":jqmData(role='listview')", "listviewcreate", function() {
...
.appendTo( wrapper )
...
});
So in your external JS code you can remove this event handler and attach your own:
$(document).undelegate(":jqmData(role='listview')", "listviewcreate").delegate(":jqmData(role='listview')", "listviewcreate", function () {
//your version of the above code here
});
Note that .delegate() and .undelegate() should be replaced with .on()/.off() if you're using jQuery 1.7 or newer.
Try this code after jquery initialized
jQuery.fn.extend({append: function() { **Your code here** } });
Just include a custom JavaScript file after you load jQuery, but before you bring in jQuery mobile.
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>