We Keep Coding

AJAX after fetch, data loads multiply scripts

It's a basket (shop) script, im using ajax by scrolling down, 18 new article will appear, there is a button "ADD TO BASKET" to add them on personal account!
The problem is that on the index.php page is this code stored that gets the articles by scrolling, and it works perfect:
$(document).ready(function(){
var limit = 18;
var start = 0;
var action = 'inactive';
function load_country_data(limit, start) {
$.ajax({
url:"include/test_fetch.php",
method:"POST",
data:{limit:limit, start:start},
cache:false,
success:function(data)
{
$('#load_data').append(data);
if(data == '')
{
$('#load_data_message').html("<button type='button' class='btn btn-info'>No Data Found</button>");
action = 'active';
}
else
{
$('#load_data_message').html("<img src='logo/loading-more.gif'>");
//$('#load_data_message').html("<div style='position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: red;'></div>");
action = "inactive";
}
}
});
}
The articles are appearing on the website but by pressing "ADD TO BASKET" no action happens, this is fixed too, i have loaded all <scripts /> and <links />, but if i scroll down the currend appeared articles adds perfectly 1x article, but after scrolling down and go back up, add on basket a previously fetched article, it adds me 2x article!
When i go down to the page like after 4 or 5 fetches, and go back up on top to the first fetch, and press "ADD TO BASKET" it adds me 4x article (the same article 4 or 5 times).
After every fetch a script is loading custom.js to make the add to basket action possible, and obviously it calls it in one click x times it depends from the fetch time.
Here is the test_fetch.php file that will be loaded after the scrolldown:
<script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="catalog/view/theme/OPC080192_1/stylesheet/stylesheet.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="catalog/view/theme/OPC080192_1/stylesheet/megnor/custom.css" />
<link rel="stylesheet" type="text/css" href="catalog/view/theme/OPC080192_1/stylesheet/megnor/bootstrap.min.css" />
<script type="text/javascript" src="catalog/view/javascript/megnor/custom.js"></script>
<script type="text/javascript" src="catalog/view/javascript/megnor/jstree.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/megnor/jquery.custom.min.js"></script>
<script type="text/javascript" src="catalog/view/javascript/megnor/doubletaptogo.js"></script>
<script src="catalog/view/javascript/common.js" type="text/javascript"></script><link href="http://opencart.templatemela.com/OPC08/OPC080192/OPC1/index.php?route=product/category&path=17" rel="canonical" />
<link href="http://opencart.templatemela.com/OPC08/OPC080192/OPC1/index.php?route=product/category&path=17&page=2" rel="next" />
<link href="http://opencart.templatemela.com/OPC08/OPC080192/OPC1/image/catalog/cart.png" rel="icon" />
//php add basket functions
<script src='assets/js/custom.js'></script>
<?php
// The articles and query
// ...
?>
So the fetched data doesent work without all the scripts, but the previous articles are calling same function by adding x times...
My question is how to fetch data without the scripts, i want test_fetch.php to use the script from index.php from where they are called to not repeat the scripts!
Hope i made it clear enough!

Progress bar in Electron environment using BootstrapJS not working properly

Environment: Electron 1.6.11 (which includes NodeJS) and Bootstrap 3.3.x for the UI
Desired results:
I would like to:
Start a indeterminate progress bar when the Run button is clicked
Run a process (a Java program) -- which runs successfully
Remove the indeterminate progress bar when the process (Java program) returns
What I get in the following code is:
the process (Java program) starts
the process (Java program) ends
then the indeterminate progress bar appears
(I cannot remove it when trying -- see commented code)
Possibly, I am not synchronizing my processing correctly.
I thought the NodeJS code
resultCode = execSync(javaCmd);
would allow the page to wait for the Java program to complete.
I suspect that the code
var execSync = require('child_process').execSync;
is creating a child process in the background that does NOT wait even though I am using execSync.
Can you assist?
<!doctype html>
<html lang="en">
<head>
<script>
window.$ = window.jQuery =
require('./node_modules/jquery/dist/jquery.min.js');
</script>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<link href="light-bootstrap-dashboard-master/assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="light-bootstrap-dashboard-master/assets/css/animate.min.css" rel="stylesheet"/>
<style>
.progress {
margin: 15px;
}
.progress .progress-bar.active {
font-weight: 500;
animation: progress-bar-stripes 1.5s linear infinite;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="form-check form-group">
<button type="submit" class="btn btn-success btn-fill" onclick='runJob()'>Run</button>
<br>
<br>
<div class="progress-bar progress-bar-striped active" id="bar" role="progressbar" style="width: 100%;">
<span>Processing</span>
</div>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
document.getElementById('bar').style.display = 'none';
});
</script>
<script language='javascript' type="text/javascript">
function runJob() {
var execSync = require('child_process').execSync;
var javaCmd = 'java -jar C:/Java_Code/CountDown.jar';
alert("Run process?");
// make progress bar visible here but does not work in sequence with job
document.getElementById('bar').style.display = 'block';
var resultCode;
resultCode = execSync(javaCmd);
// would like to remove progress bar here but does not work
//document.getElementById('bar').style.display = 'none';
alert("Command succesfully executed");
}
</script>
</body>
<!-- Core JS Files -->
<script src="light-bootstrap-dashboard-master/assets/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="light-bootstrap-dashboard-master/assets/js/bootstrap.min.js" type="text/javascript"></script>
</html>

JavaScript file not loading in .jsp file

Currently I'm programming in the front end and I have run into a problem where my javascript files dont load. My files are .jsp becauase of scala/scalatra backend. I have my index.jsp where I include my header file in the top and in the bottom I include my footer.
I include them like this:
<jsp:include page="header.jsp"/>
// CODE //
<jsp:include page="footer.jsp"/>
My header looks like this:
<!-- HEADER -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles/cssfile.css">
<link rel="stylesheet" href="css/cssfile.css">
</head>
<body>
And my footer looks like this:
<!-- FOOTER -->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
My main.js looks like this:
$(document).ready(function () {
'use strict';
$(function() {
$('a[href*=#]:not([href=#])').click(function () {
if (
location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'')
|| location.hostname == this.hostname
) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if ( target.length ) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
});
My file structure is like this:
css
-cssfile1
-cssfile2
js
-jquery.js
-main.js
header.jsp
index.jsp
footer.jsp
Mr src route shoulde be correct and when I insepect the source code of the site I can see the main.js file and click on it and it is the correct js.
I have tried console.log("test"); and nothing appears, so it does not load.
I added the jquery.js with the jquery javascript in it and added it first in the footer as you can see.
So what I want is that my main.js should load.
Thanks in advance :)

JSP EL provides a variable (${pageContext.request.contextPath}) that can be used at design-time to help resolve to the proper path at runtime. Try this might help, are you using the correct jquery libary?
<script type="text/javascript" src="${pageContext.request.contextPath}/js/main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">

Javascript Function works inside HTML page but doesn't work from external .js file

I am trying to place some Javascript code inside a .js file so that I can call it from multiple HTML pages. The problem is, my Javascript code works fine if I place it in a script within the HTML page, but when placed in a external .js file, it simply does not work. I've looked at these questions quite a few times and still cannot find the error.
Here's the HTML page:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/global.css" />
<link rel="stylesheet" type="text/css" href="css/contacts.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src ="js/contactsModule.js"></script>
<title>Hall of Heroes</title>
</head>
<body onload = "contactsModule.getContacts();">
<!-- Global Header Starts Here -->
<div class="header">
<div class="cancel">
<img src="img/cancel.png" /><!-- if screen is triggered from onboarding, then go back to onboarding screen instead of home -->
</div>
<h1>My Contacts</h1>
</div>
<div class="wrapper">
<h3>A</h3> <!-- letter header goes here -->
<!-- Begin Contact Unit -->
<div class="feed">
</div>
<!-- End Contact Unit -->
</div>
</body>
</html>
And here is the .js file:
var contactsModule = (function($){
function getContacts()
{
dbContacts();
}
function displayContacts(contactArray){
window.alert('displayContacts now running!');
var jsonObject = $.parseJSON(contactArray);
jsonObject.forEach(function (dat) {
//Begin Contact Unit
$('.feed')
.append('<div class="feed-img"><img src="' + dat.avatarUrl + '"/>\
</div><div class="feed-text"><p><span class="name_highlight">\
' + dat.firstName + ' ' + dat.lastName + '</span></p></div>');
//End Contact Unit
});
}
function dbContacts() {
var avatarUrl;
var firstName;
var lastName;
$.ajax({
type: "GET",
url: "http://www.hallofheroesapp.com/php/contacts.php",
data: {avatarUrl: avatarUrl, firstName: firstName, lastName: lastName},
success: function (response) {
window.alert('AJAX ran successfully!');
displayContacts(response);
},
error: function(response){
alert("Error:" + response);
}
});
}
}(jQuery));
Thank you for your help!

You aren't returning anything from your IIFE. contactsModule will then not contain anything, ie equal undefined. Also just defining functions doesn't make those functions part of some object, with the exception of globally defined functions. You have to assign them, or define them as part of an object literal
Your code should be something like
var contactsModule = (function($){
return {
getContacts: function() {
/* code */
},
displayContacts: function(contactArray){
/* code */
}
dbContacts function() {
/* code */
}
};
}(jQuery));

How about using
$(document).ready(function(){
///// your code here...
});

... change ...
<body onload = "contactsModule.getContacts();">
... to ...
<body>
... and add event handler using jquery ...
(function($){
function getContacts()
{
dbContacts();
}
/* ... etc ... */
// use jquery's onready handler
$(getContacts);
}(jQuery));

Had the same problem. Easy thing when you research on google.
Your Js code loads before the DOM loads. Which should be the other way around. So you have to use this
$(document).ready(function(){
//only jQuery is recommended, global JavaScript functions outside!
});
Also JavaScript
document.addEventListener("DOMContentLoaded", function(event) {
//global function outside!
});
Only this way you can be sure that your DOM is loaded before your jquery finds your elements.

How to use a different CSS stylesheet if a user has JavaScript disabled in their browser?

I am developing a website for someone, and the CSS styles I use require JavaScript (for the buttons that are used for a dropdown navigation bar on small screens). How can I use one stylesheet if the user has JavaScript enabled or use another one if JavaScript is disabled.

Two ways to do it:
Append the JavaScript-only stylesheets with JavaScript:
function appendStyle(url) {
var sheet = document.createElement("link");
sheet.setAttribute("href", url);
sheet.setAttribute("rel", "stylesheet");
sheet.setAttribute("type", "text/css");
document.head.appendChild(sheet);
}
If you don't mind loading the CSS for the JS and you just want to override your site's default appearance you can use a noscript tag instead:
<noscript>
<link href="your/no-js/stylesheet.here.css" type="text/css" rel="stylesheet">
</noscript>

You can use like this...
<!DOCTYPE HTML>
<html lang="en">
<head>
<link rel="stylesheet" href="general css file" />
<noscript>
<link rel="stylesheet" href="CSS file for JS dissable" />
</noscript>
This works for me

modernizr, the defacto standard for feature detection uses a "no-js" class on the body element, then when the page loads it uses javascript to remove this class. then you dont need seperate sheets you just need to precede your javascriptless styles with ".no-js".
.no-js .some-div {
background-color: #fff;
}
.some-div {
background-color: #000;
}
What is the purpose of the HTML "no-js" class?

You can use alternate stylesheets, with the sheet for disabled JS set as the preferred one:
<link id="sheet-nojs" rel="stylesheet" href="..." title="JS disabled" />
<link id="sheet-js" rel="alternate stylesheet" href="..." title="JS enabled" />
And then use JS to set the sheet for enabled JS as the preferred one:
document.getElementById('sheet-nojs').disabled = true;
document.getElementById('sheet-js').disabled = false;
<link id="sheet-nojs" rel="stylesheet" href="data:text/css,
body { background: red; }
body:before { content: 'JS disabled'; }
" title="JS disabled" />
<link id="sheet-js" rel="alternate stylesheet" href="data:text/css,
body { background: lime; }
body:after { content: 'JS enabled';}
" title="JS enabled" />
<script>
document.getElementById('sheet-nojs').disabled = true;
document.getElementById('sheet-js').disabled = false;
</script>

<script type="text/javascript">
// create the link element
var jsStyles = document.createElement('link');
// reference the stysheet
jsStyles.setAttribute('href', 'path/to/stylesheet.css');
// add it to the head element
document.head.appendChild(jsStyles);
</script>
<!-- use a "noscript" tag for browsers that have javascript disabled -->
<noscript>
<link href="path/to/no-js-styelsheet.css" />
</noscript>