Develop Reference

ReferenceError: jQuery is not defined in self invoking function

I've tried all the solutions from other Stackoverflow topics, but I can't my jQuery file to work.
I use a Wampserver to test my code and I test inside of multiple browsers (Firefox, Chrome, Opera). Same problem every time.
HTML
<script src="js/scripts.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
I've put these lines before my closing <\body> tag
scripts.js`
(function($) {
'use strict';
// holds current image shown
var $currNr = 0;
var links, images;
/**
* Function to prevent closures; adds click event handler to links
*/
var addEvents = function(nr) {
// add click event to link
$(links[nr]).on('click', function(e) {
showImage(nr);
e.preventDefault();
});
};
/**
* Function to show an image
*/
var showImage = function(nr) {
// find image
var $img = $(images[nr]);
if (!$img) return;
// find big image
var $photoBig = $('#photoBig');
// change
$photoBig.attr('src', $img.attr('data-src-l'));
$photoBig.attr('alt', $img.attr('alt'));
// remember current image number
$currNr = nr;
};
/**
* Function to show the next image
*/
var showNextImage = function() {
if ($currNr != (links.length - 1)) {
showImage($currNr + 1);
} else {
showImage(0);
}
};
/**
* Function to show the previous image
*/
var showPrevImage = function() {
if ($currNr != 0) {
showImage($currNr - 1);
} else {
showImage(links.length - 1);
}
};
// start scripts
$(window).on('load', function() {
// find images and links
links = $('#thumbsmenu li>a');
images = $('#thumbsmenu li>a img');
// add link events
$(links).each(function(nr) {
$(this).on('click', function(e) {
showImage(nr);
e.preventBubble();
});
});
// controls
$('#lnkFirst').on('click', function(e) {
showImage(0);
e.preventDefault();
});
$('#lnkPrev').on('click', function(e) {
showPrevImage();
e.preventDefault();
});
$('#lnkNext').on('click', function(e) {
showNextImage();
e.preventDefault();
});
$('#lnkLast').on('click', function(e) {
showImage(images.length - 1);
e.preventDefault();
});
// keyboard
$(document).on('keydown', function(e) {
var $code = (e.keyCode ? e.keyCode : e.which);
switch (event.keyCode) {
case 37: showPrevImage(); e.preventDefault(); break;
case 39: showNextImage(); e.preventDefault(); break;
}
});
// play
var $timer;
$('#btnPlay').on('click', function(e) {
if (!$(this).prop('playing')) {
$(this).val('stop');
$(this).prop('playing', true);
$currNr = 0;
$timer = setInterval(showNextImage, 1000);
} else {
$(this).val('start');
$(this).prop('playing', false);
clearInterval($timer);
}
});
});})(jQuery);`
I use a self-invoking function and use it as parameter but I get a:
ReferenceError: jQuery is not defined
Normally this code should work, that was how I was taught back then. Anyone an idea what could be the real issue here?

You are loading scripts.js before jQuery
Change the following code:
<script src="js/scripts.js"></script>
<script src="js/jquery-3.2.1.min.js"></script>
To:
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/scripts.js"></script>

Your script load ordering is wrong. Load jQuery first, then use it.

As other people suggested your order is wrong. In order for you to use JQuery in other script files it needs to be fully loaded. Change your HTML like so:
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/scripts.js"></script>

pagination by using jquery

I would like to make pagination in jQuery, but it is not working. JavaScript is working, but jQuery code is not working. I think that the variable num is the problem.
What is the problem in this code?
jQuery
<script type="text/javascript">
jQuery(document).ready(
function fn_page(num) {
document.form1.target = "_self";
document.form1.action = "";
document.form1.page.value = num;
//document.form1.submit();
/* jQuery("form1").attr('target', '_self').submit(); */
}
);
</script>
JavaScript
<li>{$p_num}</li>

You don't need to wrap this function in (document).ready.
Change it to this (assuming the id of your form is id="form1":
<script type="text/javascript">
function fn_page(num) {
document.forms['form1'].target = "_self";
document.forms['form1'].action = "";
document.forms['form1'].page.value = num;
document.forms['form1'].submit();
}
</script>
And really, since you're using jQuery, you should just stay true to your abstraction:
<script type="text/javascript">
function fn_page(num) {
jQuery("#form1").attr("target", "_self");
jQuery("#form1").attr("action", "");
jQuery("#form1 input[name=page]").val(num);
jQuery("#form1").submit();
}
</script>

Weird Script sometimes work and some time it doesn't work

This is a script to retrieve data on scroll
Really weird, some times it works good and some times it doesn't work
I also to make "alert" it is still not working
and when put the alert in a clean script in the same page it works normal
can you help ?
<script type="text/javascript" src="public/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
alert('zzz');
$(window).scroll(function () {
alert("zzz");
var loaded_ads = 0;
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
var num_ads = <?php echo $num_ads ;?>;
loaded_ads += 10;
$.get("e3lanat/get_ads/" + loaded_ads, function (data) {
$("#Ebda2").append(data);
});
if (loaded_ads >= num_ads - 10)
{
}
}
});
</script>

Please wrap the your jQuery codes with:
$(document).ready(function() {
// Your codes here
});
Explanation: with the ready block wrapped, your jQuery code will be executed AFTER jQuery JS is loaded.

Insert a div and remove it within js function

I have a script here that requires a bit of manual work done. The developer doesn't provides modification support and I am not exactly JS proficient so I need some help. Basically the script below shows a woocommerce product image, and there's a preload function. I need to insert a div called .temp-image before the preload_img.onload = function and remove the div within preload_img.onload
if ($(img).length > 0) {
img.data('tm-current-image', false);
var a = img.closest("a");
var a_href_original = a.attr('href');
main_product.on('tm_change_product_image', function(e) {
var tm_current_image_element_id = e.element.attr('name'),
$main_product = e.main_product;
var clone_image = img.tm_clone(),
preload_img = new Image();
preload_img.onload = function() {
$main_product.find('#' + tm_current_image_element_id + '_tmimage').remove();
$main_product.find('.tm-clone-product-image').hide();
clone_image.prop('src', preload_img.src).hide();
img.hide().after(clone_image);
clone_image.show();
if (is_iosSlider) {
setTimeout(function() {
is_iosSlider_element.iosSlider('update');
}, 150);
}
};
clone_image
.attr('id', tm_current_image_element_id + '_tmimage')
.addClass('tm-clone-product-image').hide(); //.show();
preload_img.src = e.src;
a.attr('href', e.src);
img.data('tm-current-image', tm_current_image_element_id);
if (is_yith_wcmg) {
yith_wcmg.yith_magnifier('destroy');
yith_wcmg.yith_magnifier(yith_magnifier_options);
}
});
}

i am not clear your question but you can add div using this, suppose you want add div after this is div and you want to add div after this
<script type="text/javascript">
$(".test").append("<div id='specificdiv'>hello world</div>");
</script>
or
<script type="text/javascript">
$("<div id='specificdiv'>hello this is added div</div>").appendTo(".test");
</script>
or
<script type="text/javascript">
$("<div></div>").attr('id','specificdiv').appendTo('body');
</script>
and remove it
<script type="text/javascript">
$( "#specificdiv" ).remove();
</script>
or
<script type="text/javascript">
$( "#specificdiv" ).empty();
</script>

Namespace is undefined

I am building a javaScript plug-in and I define a namespace in my plugin; but, the web page cannot find it. Please be as explicit as you be with your answer; as I learn better examining code, watching a video somebody doing live coding and testing.
Here is my HTML:
...
<article class="slider_cnt">
<div class="slider">
<img src="img/slide1.jpg" />
<img src="img/slide2.jpg" />
<img src="img/slide3.jpg" />
</div>
</article>
</div>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/modernizr-2.6.2.min.js"></script>
<script type="text/javascript" src="js/elegant2_slider.js"></script>
<script type="text/javascript">
$(document).ready(function () {
elegantNamespace.initialize($('.slider'),'img'); // options setup
});
</script>
</body>
and my javaScript:
(function ($) {
this.elegantNamespace = this.elegantNamespace || {};
var ns = this.elegantNamespace;
// settings
var $slider; // class or id of carousel slider
var $slide; // could also use 'img' if you're not using a li
var $transition_time = 1000; // 1 second
var $time_between_slides = 2300; // 2.3 seconds
var $interval;
ns.initialize = function(fram, slide){ // options setup
$slider = fram;
$slide = slide;
startloop();
}
slides = function() {
return $slider.find($slide);
}
slides().fadeOut();
// set active classes
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
// auto scroll
startloop = function () {
$interval = setInterval(
function () {
var $i = $slider.find($slide + '.active').index();
slides().eq($i).removeClass('active');
slides().eq($i).fadeOut($transition_time);
if (slides().length == $i + 1) $i = -1; // loop to start
slides().eq($i + 1).addClass('active');
slides().eq($i + 1).fadeIn($transition_time+ 2000);
}, $transition_time + $time_between_slides);
}
pauseLoop = function() {
window.clearInterval($interval);
}
$slider.hover(
function () {
pauseLoop(); // pause the loop
},
function () {
startloop(); //scroll()
});
})();

The browser recognizes your namespace fine. Your program is bugged.
You created variables $slider and $slide.
You use the initialize function to give those variables values:
ns.initialize = function(fram, slide){ // options setup
$slider = fram;
$slide = slide;
startloop();
}
Here you have a function that uses those variables:
slides = function() {
return $slider.find($slide);
}
In order for this function to work the variables must be initialized. Meaning that you have to call the initialize function before you call the slider function.
And this is where your problem is. By calling the slider function you are trying to use $slider which is not yet initialized. As a result your script breaks:
slides().fadeOut();
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
At the end of your script you are also trying to use $slider:
$slider.hover(
function () {
pauseLoop(); // pause the loop
},
function () {
startloop(); //scroll()
});
To fix this move that code into the initialize function. That way it should work. Like this:
ns.initialize = function(fram, slide){
$slider = fram;
$slide = slide;
slides().fadeOut();
slides().first().addClass('active');
slides().first().fadeIn($transition_time);
$slider.hover(
function () {
pauseLoop();
},
function () {
startloop();
});
startloop();
}