jQuery append not working from within a plugin - javascript

I want to run a an append(and more stuff later on) from within a plugin, but for some reason it doesn't do anything.
the code(basic):
(function($){
function _init(){
$('body').append('<div class="msg"/>');
}
_init()
})(jQuery);

jQuery append can only work after dom ready. The code you have pasted is probably working before dom ready event. Please check below;
http://api.jquery.com/ready/

To put it in code, it should look like:
(function($){
jQuery(document).ready(function(){
$('body').append('<div class="msg"/>');
});
})(jQuery);

Related

Function not working when using $( document ).ready on external js file

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.

jquery click function is not working

The below code is working when i paste it in the browser directly (chrome console). But it is not working from my source file
<script type="text/javascript" >
$(".test").click(function(){
$(this).parent().find("div").toggle();
});
</script>
Try running it only after the DOM is ready:
$(function(){
$(".test").on("click", function(){
$(this).parent().find("div").toggle();
});
});
try replace $ by writing jQuery..
like,
jQuery(function(){
make sure you wrap in the document.ready function. it ensure that it will bind the function when the page load completes. Document.ready()
$(document).ready(function(){
$(".test").on("click", function(){
$(this).parent().find("div").toggle();
});
});
Always do this while using jquery
$('document').ready(function(){
$(function(){
$(".test").on("click", function(){
$(this).parent().find("div").toggle();
});
});
});
Always put code in the function this will make it work with and with out document ready.

.click function .load not working

I am a total novice at jQuery, but giving it a go. I cant seem to get the .click function below to work. Can anyone tell me were I am going wrong?
$(".news").click(function() {
$("#contentarea").load("console/news.php");
});
You need to run the code in the ready event, so that the news element(s) are loaded:
$(document).ready(function(){
$(".news").click(function() {
$("#contentarea").load("console/news.php");
});
});
wrap the code inside the ready handler
$(function(){
//your code
});
or you can put the javascript code at the end of the markup like
//your html
<script>
//js code here
</script>

Do something AFTER the page has loaded completely

I'm using some embed codes that insert HTML to the page dynamically and since I have to modify that dynamically inserted HTML, I want a jquery function to wait until the page has loaded, I tried delay but it doesnt seem to work.
So for example, the dynamically inserted HTMl has an element div#abc
and I have this jquery:
if ( $('#abc')[0] ) {
alert("yes");
}
the alert doesn't show up.
I'd appreciate any help
Thanks
$(window).load(function () {
....
});
If you have to wait for an iframe (and don't care about the assets, just the DOM) - try this:
$(document).ready(function() {
$('iframe').load(function() {
// do something
});
});
That is the purpose of jQuery's .ready() event:
$(document).ready(function() {
if ( $('#abc').length ) //If checking if the element exists, use .length
alert("yes");
});
Description: Specify a function to execute when the DOM is fully
loaded.
Using the jQuery.ready should be enough. Try this
$(document).ready(function(){
//your code here
});
or
$(function(){
});
which is a shortcut of the first.
The load() method was deprecated in jQuery version 1.8 and removed in version 3.0.
So you have to use -
$(window).on('load', function() {
// code here
});
Try this:
$(document).ready(function () {
if ( $('#abc')[0] ) {
alert("yes");
}
});
$(window).load(function () { ... }
can be enough but otherwise your embeded code (what ever that can be) might provide some callback functionality that you can make use of.
delay() should only be used to delay animations.
Generally, to handle my JQuery before or after page loads, will use:
jQuery(function($){
// use jQuery code here with $ formatting
// executes BEFORE page finishes loading
});
jQuery(document).ready(function($){
// use jQuery code here with $ formatting
// executes AFTER page finishes loading
});
Make sue you bind the event with dom load so it's there when trigger called.
This is how you do it. Hope this helps someone someday
$(window).bind("load", function() {
//enter code here
$("#dropdow-id").trigger('change');
});`

Initialize Plugin after $.load( has changed the DOM

I have something like this,
$("a[rel^='prettyPhoto']").prettyPhoto({
theme: 'light_square'
});
but then I use $('.menu').click(function() { $('#content').load(page); });
How do I initialize the plugin after the page has loaded so that it works with the new html that has been loaded?
Thanks
jquery document.ready execute when the DOM is fully loaded
http://api.jquery.com/ready/
Example
$(function(){
//Whatever code you want to execute after the page is loaded
})
If you want to have the function attached to elements you load to the DOM using ajax, you can use live or on based on your jquery version
If you use a jquery version less than 1.7, use live
$('.menu').live("click",function(){
//Do whatever you want
});
If you use, jquery 1.7 or +, use, on
$('body').on("click",".menu",function(){
//do whatever you want
});
.load() takes a callback as the second parameter that fires when the page is loaded:
$('.menu').click(function() {
$('#content').load(page, function() {
$("a[rel^='prettyPhoto']").prettyPhoto({
    theme: 'light_square'
});
});
});

Categories