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!

Do the exact contrary of append in Jquery

I'm working on a 3D interface with Babylonjs, so I need a canvas. Around that canvas I want to implement html elements (with Holy grail layout : nav to the left, main which is canvas at the middle and aside to the right) according to 2 modes : visualisation and edition.
I have a script to handle the canvas and play with babylonjs functions, and another one to manage the construction of the html according to the chosen mode.
As you can see in my code, I assign my html code to a variable, and append that variable to my holygrail main. However, I don't want my canvas to be recreated each time I change mode, so I implemented it directly in the HTML, it's constant.
My problem is : I want to append elements to my div #insertHere, but also to remove all the elements (excepted my canvas which has to remain) of this #insert div before appending new ones (else I would have several navs and asides).
Can anyone help me ?
Thank for your time !
Here's my construction script :
var content = "";
var construct = true;
var visualize = false;
function Create(){
content = "";
if(construct == true && visualize == false){
content += "<div id='1'> <p> hello</p></div><div><p>Insert a lot of html here</p></div>";
$("insertHere").append(content);
}
if(construct == false && visualize == true){
content += "<div id='not1'><p> Definitely not the same content as the construct one</p></div>";
$("insertHere").append(content);
}
}
$(window).ready(function(){
Create();
$("#switchmode").click(function(){
construct = !construct;
visualize = !visualize;
// INSERT THE SOLUTION TO CLEAR THE HTML HERE
CreationPage();
});
});
And here's my HTML (both are short representation of what I really have) :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
</head>
<body id="body" class="HolyGrail">
<header>
<link rel="stylesheet" type="text/css" href="style.css" media="all">
<link rel="stylesheet" href=".\bootstrap\css\bootstrap.css">
<link rel="stylesheet" href="justcontext.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" defer></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script style="text/javascript" src="scripts/construction.js" defer></script>
</header>
<div id='menuonglets' class='btn-group' role='group' aria-label='Basic example'>
<button type='button' class='btn btn-secondary' id='switchmode'>Mode Visu/ Mode Constru</button>
</div>
<div class='HolyGrail-body' id='insertHere'>
<main class='HolyGrail-content'>
<canvas id='renderCanvas'></canvas>
</main>
<!-- Things are inserted here -->
</div>
</body>
</html>

You could use jQuery's filter() function to remove all elements but the canvas.
Here's a working example:
$("#btn_clear").on("click", function(e){
e.preventDefault();
$("#insertHere").children().filter(":not(.HolyGrail-content)").remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='HolyGrail-body' id='insertHere'>
<main class='HolyGrail-content' style="background: orange;">
<canvas id='renderCanvas'></canvas>
</main>
<p>I'm a paragraph</p>
<ul>
<li>Foo</li>
<li>bar</li>
</ul>
</div>
Remove all elements but the canvas
So:
$(window).ready(function(){
Create();
$("#switchmode").click(function(){
construct = !construct;
visualize = !visualize;
// Remove all elements, except for the canvas and its container.
$("#insertHere").children().filter(":not(.HolyGrail-content)").remove();
CreationPage();
});
});

Fade one image into another.

<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<script>
$("#slideshow").fadeIn("slow", function() {
$("#slideshow").attr('src','2.jpg');
});
</script>
</body>
I am trying to make a jQuery script where 1.jpg fades out and 2.jpg fades in but I only see 1.jpg and it stays there

Try something like this:
$( "#slideshow" ).fadeOut( "slow", function( ) {
$( "#slideshow" ).prop('src','2.jpg').fadeIn('slow');
});
jsFiddle example
This will fade out the original image, and once the fade has completed, change the image's src property, then begin to fade in the new image.

This will work for however many images you add. As long as they have the class slideshow.
Also this allows you to crossfade images. See below for non-crossfade below.
See this Fiddle.
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<img id='slideshow' src="2.jpg">
<script type="text/javascript">
$(document).ready(function () {
$(".slideshow").hide();
var item = 0;
loop = setInterval(function() {
if(item == $(".slideshow").size()) {
item = 0;
}
$(".slideshow").fadeOut(300);
$(".slideshow").eq(item).fadeIn(300);
item++;
}, 3000);
});
</script>
</body>
Non-Crossfade
$(".slideshow").fadeOut(300, function () {
$(".slideshow").eq(item).fadeIn(300);
});
UPDATE
You can add the following css to get the images to display in the same space.
.slideshow { position:absolute; }

According to what you are saying .. If I understand you correctly ... Although I may be mistaken, it seems like you are asking 1 to fade out .. change to 2 ... and fade 2 in?? If so, will this not work?
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<img id='slideshow' src="1.jpg">
<script>
$("#slideshow").fadeOut();
$("#slideshow").attr('src','2.jpg');
$("#slideshow").fadeIn();
</script>
</body>
That's the simple version, of course I would assume it will be put it inside a function on an .on() event or the like etc ...

jQuery mobile / Flot / resize.js

I am wondering if there is a compatibility problem between JQM and Flot.
I've looking for documentation about this, but there is not a lot...
Here is the issue: depending on the order in which I load the libraries, things work while others don't:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<div id="placeholder" style="width: 60%;height:40%"></div>
--> Here the chart is not displayed: "Uncaught Invalid dimensions for plot, width = 671, height = 0"
Now if I remove JQM:
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<div id="placeholder" style="width: 60%;height:40%"></div>
--> Here the chart is displayed and the resize works, so I guess this problem comes from JQM but I have no idea what...
I've tried to load things in different orders, but nothing helps.
Does anybody know a workaround for this ?
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/jquery.flot.js"></script>
<script src="js/jquery.flot.resize.js"></script>
<style type="text/css">
html, body {
height: 100%; /* make the percentage height on placeholder work */
}
.message {
padding-left: 50px;
font-size: smaller;
}
</style>
</head>
<body>
<h1>Flot test</h1>
<div id="placeholder" style="width: 60%;height:40%; text-align: center; margin:0 auto;"/>
<script type="text/javascript">
$(function () {
var c1_values = [[0, 0],[1, 1],[2, 4],[3, 9],[4, 16],[5, 25],[6, 36],[7, 49],[8, 64],[9, 81],[10, 100],[11, 121],[12, 144],[13, 169],[14, 196],[15, 225],[16, 256],[17, 289],[18, 324],[19, 361]];
var c1_data = [{ data: c1_values, label: "curve1"}];
$.plot($("#placeholder"), [
{
data: c1_values,
lines: { show: true, fill: false }
}
]);
});
</script>
</body>
</html>
I am currently trying this "no conflict" function, but no result for now.

jQuery Mobile automatically wraps all your content in a page if you don't include on yourself. Generally, that means you ought to do it yourself in your code! So, first step is to move your placeholder into a jQM template:
<div data-role="page">
<div data-role="header">
<h1>Flot test</h1>
</div>
<!-- /header -->
<div data-role="content">
<div id="placeholder" style="width: 60%;height:40%; text-align: center; margin:0 auto;"
/></div>
<!-- /content -->
</div>
<!-- /page -->
Now, it seems to be a common problem that the content div does not stretch to fill the whole available vertical space. I found two solutions, neither of which seem very ideal.
Use CSS to try and make the content div full height (note that data-role"content" becomes a CSS class of ui-content):
.ui-content {
height:100%;
width:100%;
position:absolute;
}
Use Javascript to fix the content height dynamically as you go along (do this before your flot call). Taken from here:
var fixgeometry = function () {
/* Some orientation changes leave the scroll position at something
that isn't 0,0. This is annoying for user experience. */
scroll(0, 0);
/* Calculate the geometry that our content area should take */
var header = $(".ui-header:visible");
var footer = $(".ui-footer:visible");
var content = $(".ui-content:visible");
var viewport_height = $(window).height();
var content_height = viewport_height - header.outerHeight() - footer.outerHeight();
/* Trim margin/border/padding height */
content_height -= (content.outerHeight() - content.height());
content.height(content_height);
}; /* fixgeometry */
$(window).bind("orientationchange resize pageshow", fixgeometry);
Neither of those solutions seemed to work particularly well for me, although they both did "work" as far as showing the graph.
I've posted an example of the 2nd version here: http://alpha.jsfiddle.net/ryleyb/mz24P/
The CSS is there as well, commented out if you want to try that instead.

Multiple script tags not working in my page

Ok, I'm building a website for a friend, I'm currently using jquery-1.4.3.min.js, corners.js, equalcols.js, and a pre-load image script in the head. Everything works great.
Problem is, I now need FancyBox (LightBox alternative) for a page and it won't seem to work! I know it's because something is conflicting with another but I have no idea what. Is it the order in the head? Or something else? Have tried LightBox and that doesn't work either.
It either doesn't work and stops the EqualCols.js from working, or everything else works EXCEPT the FancyBox for the mini-image gallery that is needed.
The head code is as below: (without FancyBox in there)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<link rel="stylesheet" href="styles.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<!-- PRELOAD MENU IMAGES BEGINNING -->
<script>
var myimages=new Array()
function preloadimages(){
for (i=0;i<preloadimages.arguments.length ;
i + myimages [ i ] =new Image ( myimages [ i ]
src=preloadimages.arguments[i] } Enter path of images to be preloaded
inside parenthesis. Extend list as desired. preloadimages ( images /
home-h.png " images / about-h.png " images / services-rates-h.png "
images / past-work-h.png " images / contact-h.png " images /
shop-specials-h.png " images / free-quote-h.png " images /
book-now-h.png ")
</script>
<!-- PRELOAD MENU IMAGES END -->
<!-- stop curvery corners error in IE -->
<script type="text/javascript" src="js/corners.js"></script>
<script type="text/javascript">
var curvyCornersVerbose = false;
</script>
<!-- stop curvery corners error in IE -->
<!-- EQUAL COLS START -->
<script src="js/equalcols.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#left-col,#right-col').equalCols();
});
</script>
<!-- EQUAL COLS END -->
</head>
Is anyone able to tell me where I'd need to put the FancyBox coding for everything to work? Or what else I can do to get it to work? What are the rules? I've researched on Google and can't seem to find the answer I'm after.
The FancyBox code I need to implement is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
Do I need the top line there if I'm using this already?:
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
Any help much appreciated.

replace:
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
with:
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
Fancybox code:
$(document).ready(function() {
$('#single_image').fancybox();
});

below code is working sample - the fancybox iframe version.
make sure that you add anchor tag in your html/jsp
<!-- The popup iframe . The href value will be updated dynamically -->
<a class="iframe" id="iframe" href="/YourApp/imagePopup.do"></a>
the include block is as follows
<script type="text/javascript" src="/js/jquery/fancybox/jquery.easing-1.4.pack.js"></script>
<script type="text/javascript" src="/js/jquery/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
/**
jquery ready function
*/
$(document).ready(function(){
// popup for showing
$("a.iframe").fancybox({
'autoDimensions':false,
'width' : 770,
'height' : 'auto', // height is controlled using jquery.fancybox-1.3.4.css line 79
'centerOnScroll' : true,
'scrolling':'auto',
// 'autoScale': true,
'hideOnOverlayClick' : false,
'enableEscapeButton' :true,
'hideOnContentClick': false,
'type':'iframe'
,'onStart' :function(){$.fancybox.showActivity();}
,'onClosed' :function(){ }
});
}); // end ready