I just started learning about callback functions. Unfortunately I can't make this altered sample-code work.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".closebtn").click(function(){
function1(someVariable, function() {
function2(someOtherVariable);
});
});
function function1(param, callback) {
alert("Erste Funktion");
callback();
}
function function2(param) {
alert("Zweite Funktion");
}
})
</script>
When I click on the button nothing happens. Can anyone help?
Your example works for me. Let me know what you think:
// these need to be defined
var someVariable = 'example value';
var someOtherVariable = 'example value';
$(document).ready(function() {
$(".closebtn").click(function() {
function1(someVariable, function() {
function2(someOtherVariable);
});
});
function function1(param, callback) {
console.log("Erste Funktion");
callback();
}
function function2(param) {
console.log("Zweite Funktion");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="closebtn">Close</button>
Related
I have the following in my html
<html>
<body>
<script type="text/javascript">
var hccid=98964571;
function add_chatinline(){
var nt=document.createElement("script");
nt.async=true;
nt.src="http://localhost/ll.js";
var ct=document.getElementsByTagName("script")[0];
ct.parentNode.insertBefore(nt,ct);
console.log("state is ", SORCHAT)//SORCHAT is not defined
}
add_chatinline();
</script>
</body>
</html>
On the ll.js i have
var SORCHAT = SORCHAT || (function () {
return {
init: function (Args) {
console.log("hash is ", Args)
},
};
}());
But now am getting an error of SORCHAT is not defined.
By adding window.onload that is
<script>
window.onload = function(){
SORCHAT.init(12736474676); //this works
}
</script>
But whenever i include another javascript file with window.onload function the SORCHAT.init is not executed.
What am i missing.
You are probably overwriting the window.onload when using it multiple times. You can prevent that with the help of the addEventListener-function.
window.onload = function () {
console.log('onload #1');
}
window.onload = function () { // This replaces the first onload (#1)
console.log('onload #2');
}
window.addEventListener('load', function () {
console.log('onload #A');
});
window.addEventListener('load', function () {
console.log('onload #B');
});
I am trying to call my JavaScript Function from my jQuery Function, but it does not seem to be calling the function showMain() at the end of the jQuery.
See below: I am trying to Call the showMain() function at the end of the .click function.
Code:
$(document).ready(function () {
$('.slideshowExit').click(function () {
setTimeout(function() {
$("#welcomeText").fadeOut(2000);
},1000);
$("#welcomePage").css("display", "none");
//The function I am trying to Call
showMain();
});
function showMain() {
var main= document.getElementById("mainDiv");
main.style.display = 'block';
You should use an anonymous function.
$(document).ready(function () {
$('.slideshowExit').click(function () {
setTimeout(function () {
$("#welcomeText").fadeOut(2000);
}, 1000);
$("#welcomePage").css("display", "none");
//The function I am trying to Call
showMain();
});
});
var showMain = function () {
var main = document.getElementById("mainDiv");
main.style.display = 'block';
};
There is a mistake with your function definition. Please use the closing "}" bracket after the function.
I am trying to call my JavaScript Function from my jQuery Function, but it does not seem to be calling the function showMain() at the end of the jQuery.
See below: I am trying to Call the showMain() function at the end of the .click function. Code:
$(document).ready(function () {
$('.slideshowExit').click(function () {
setTimeout(function() {
$("#welcomeText").fadeOut(2000);
},1000);
$("#welcomePage").css("display", "none");
//The function I am trying to Call
showMain();
});
function showMain() {
var main= document.getElementById("mainDiv");
main.style.display = 'block';
}
Runnable Code:
$(document).ready(function () {
$('.slideshowExit').click(function () {
setTimeout(function () {
$("#welcomeText").fadeOut(500);
}, 1000);
$("#welcomePage").css("display", "none");
//The function I am trying to Call
showMain();
});
})
function showMain() {
var main = document.getElementById("mainDiv");
main.style.display = 'block';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="slideshowExit">
Click Here
</div>
<div id="mainDiv">
<div id="welcomeText">Welcome to India</div>
</div>
I'm trying to implement clojure in javascript. Can anyone see what the problem is?
var a = (
function()
{
var privateFunction = function()
{
alert('Hello');
}
var OsmanFunction = function()
{
alert('Osman');
}
return
{
publicFunction: function()
{
privateFunction();
}
OsmanFunction: function()
{
OsmanFunction();
}
}})();
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p> Please hit me</p>
</body>
</html>
You need formatting your code. Really.
var a = (
function () {
var privateFunction = function () {
alert('Hello');
};
var OsmanFunction = function () {
alert('Osman');
};
return {
publicFunction: function() {
privateFunction();
},
OsmanFunction: function() {
OsmanFunction();
}
};
})();
document.getElementById("hitme").addEventListener('click', a.OsmanFunction);
This is working version.
But... in your code:
return
{
You can't transfer return object to the next line.
You have no "," on return object between functions
{
publicFunction: function()
{
privateFunction();
}
OsmanFunction: function()
{
OsmanFunction();
}
}
a is not defined.
Please, in fature be attentive to your code, you make code for an other developers, who will support your project, not for machines.
Your function is returning undefined (returning nothing, which is undefined in js). The lines:
return
{
publicFunction: function()
{
privateFunction();
},
OsmanFunction: function()
{
OsmanFunction();
}
}
Is interpreted as:
return;
{
publicFunction: function()
{
privateFunction();
},
OsmanFunction: function()
{
OsmanFunction();
}
};
Therefore it is equivalent to:
return undefined;
{
publicFunction: function()
{
privateFunction();
},
OsmanFunction: function()
{
OsmanFunction();
}
};
Be very careful with line breaks in javascript. If possible use a coding convention that avoids this kind of mistake. There are several coding conventions that work. Google "Crockford convention" or "standard.js". Either convention work so choose one that you like.
Anyway. I'd suggest you don't start an open brace { in a new line if possible. Get used to starting a brace at the end of the line. It avoids this error.
I think it was just poor formatting, but this is I think what your trying to achieve.
function Test(){
var privateFunction = function(){
alert('Hello');
}
var OsmanFunction = function(){
alert('Osman');
}
return {
publicFunction: privateFunction //NB This is no longer private if you expose it
, OsmanFunction: OsmanFunction
}
};
var tester = Test();
var btn = document.getElementById('hitme');
btn.addEventListener('click', function(e){
e.preventDefault();
tester.OsmanFunction()
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p> Please hit me</p>
</body>
</html>
Try following code, you missed comma between "publicFunction" and "OsmanFunction" when these returning:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script>
a = (
function() {
var privateFunction = function() {
alert('Hello');
}
var OsmanFunction = function() {
alert('Osman');
}
return {
publicFunction: function() {
privateFunction();
},
OsmanFunction: function() {
OsmanFunction();
}
}
})();
</script>
</head>
<body>
<p> Please hit me</p>
</body>
</html>
Code :
isDomLoaded = $(function () {
setTimeout(function () {
if (renderFinished) {
renderSocial(fotoProssima);
} else {
isDomLoaded();
}
}, 300);
});
it says isDomLoaded is not a function
Thats because it isn't a function. It is a jQuery object.
What you need might be:
isDomLoaded = function () {
setTimeout(function () {
if (renderFinished) {
renderSocial(fotoProssima);
} else {
isDomLoaded();
}
}, 300);
};
If you want to run it when the DOM is ready then do this after you declare the function:
$(window).load(isDomLoaded);
However, I think what you really need is to get rid of the isDomLoaded function and just use the following:
$(document).ready(function(){
renderSocial(fotoProssima);
});
function isDomLoaded(){
//code
//recursive call
isDomLoaded();
}
I have the following code in main.js:
(function($) {
// Code goes here
$.fn.switcher=function(opts)
{
var defaults={
btn:'.info_btn', //Класс кнопки
block:'.details_info', //Класс блока, который нужно скрыть
hideifout:false, //Если true то скроект блок когда мышь его покент
classActive:'open' //Класс который ставится активной кнопке
//classNotActive:'close'
};
var options=$.extend(defaults, opts);
this.each(
function(){
var $this=$(this);
var btn=$this.find(options.btn);
var block=$this.find(options.block);
var plaing=false;
var click=function(e){
if (e.type=='mouseleave')
{
e.stopPropagation();
}
if (plaing) return;
plaing=true;
if (block.is(':visible'))
{
block.hide('blind',function(){
btn.removeClass(options.classActive);
btn.css('z-index',0);
plaing=false;
});
} else {
btn.addClass(options.classActive);
btn.css('z-index',2);
block.show('blind',function(){
plaing=false;
});
}
}
btn.click(click);
if (options.hideifout){
block.mouseleave(click);
}
}
);
}
})(jQuery);
And js code in my aspx file:
<script type="text/javascript">
$(document).ready(function () {
$('#listInfoBlock').load('/cinema/filmlist'); // load films by default
$(".title").click(function (e) {
e.preventDefault();
loadFilmList($(this));
});
$("#buttonFindFilmByName").click(function (e) {
e.preventDefault();
loadFilmList($(this));
});
// load films by criteria
function loadFilmList(id) {
$('#listInfoBlock').load('/cinema/filmlist?id=' + $(id).attr("id"));
$(".tabs").find("a").removeClass("active");
$(id).parent().addClass("active");
};
});
</script>
The function loadFilmList fills listInfoBlock.
The problem in that function in main.js executes first and there are no div called .details_info (it will be there when loadFilmList is executed)
How can I solve this problem?
Thanks.
SOLUTION:
I rewrite like that:
function loadFilmList(id) {
$('#listInfoBlock').load('/cinema/filmlist?id=' + $(id).attr("id"), function () {
$('.infoBlock').switcher();
$('div.widgets').switcher(
{
btn: '.expand',
block: '.voice_block',
hideifout: true
// classActive:'expand'
});
});
if (id !== undefined) {
$(".tabs").find("a").removeClass("active");
$(id).parent().addClass("active");
}
};
now it's work.
Thanks Nate.
The problem is that you're declaring $.fn.switcher but aren't ever calling it anywhere. I think you need to call it in two places, in a callback function on both of your .load() AJAX calls.
$('#listInfoBlock').load('/cinema/filmlist', function() { $.fn.switcher({ }); });
and
$('#listInfoBlock').load('/cinema/filmlist?id=' + $(id).attr("id"), function() { $.fn.switcher({ }); });