Develop Reference

Change page and change URL without refresh and keep content after refresh , like ReactJS website

I've tried to use jQuery's load() function to change/load content without reloading. That works, but the problem is: the URL keeps the same!
Even if i use history.pushState() to change URL, that does not solve the problem. Example:
with the famous window.history.pushState("object or string", "Title", "/new-url");
With that, I am creating a "fake URL" for each page - If I try to enter the website with this changed URL again, i get an error, basically the link does not exist;
If I refresh the page, i lost all Ajax loaded content - I need to keep the content when refresh;
When I click to change Ajax loaded page, keeps putting new links next to the previous one, as in the image sent;
I want to get this result: https://reactjs.org/ - transiting the pages, they do not reload and the link changes, it is updatable and the link works separately - how do i do it?
3) printscreen of my page and its url
Important: index.html, about.html and contact.html are existing files that will load with the jquery function below.
HTML:
<div class="navbar">
<div class="content">
<div class="logo">My logo</div>
<ul class="pages">
<li id="index">Index</li>
<li id="about">About us</li>
<li id="contact">Contact</li>
</ul>
</div>
</div>
<section id="page">
<div class="content">
<!-- PAGES LOAD HERE -->
</div>
</section>
<div class="footer">
<div class="content">
--Footer-- All rights reserved.
</div>
</div>
JS:
$(document).ready(function () {
$('li').on("click", function () {
$pageName = $(this).attr('id');
$('#page .content').load(`pages/${$pageName}.html`);
$('li').removeClass('active'); //only to remove the selection of actual page in CSS
$(this).addClass('active'); //only to add the selection of actual page in CSS
window.history.pushState("object or string", "Title", `pages/${$pageName}.html`);
})
})

you're describing "routing" which is the idea of URLs matching the content that is being display.
In jquery i'd recommend googling: jquery router or javascript router
IF you're writing other languages you can google [language] router.
most recently google is bringing up https://www.npmjs.com/package/jqueryrouter which is now forwarding to https://github.com/scssyworks/silkrouter
Once you choose a router, read the docs and come back with more questions.

How can I make my Ajax feed load multiple WordPress posts based upon a post-id div tag?

I am trying to figure out how to loop my jQuery/Ajax script to load two WordPress posts based off of each WordPress post ID in a div tag, so the Ajax URL loads based upon the ID tags.
You can see my example below. I am using the WordPress News blog as an example of the feed.
https://jsfiddle.net/jdcool279/7L361ru0/17/
I figured out how to load one feed based upon the post-id within the tag, but I can't seem to figure out how to load two feeds via the div tag. To see an example of single feed, please uncomment the script tag within the fiddle. Also, would it be better to change "fetch_comp_content" id tag to a class instead of an id, since I will be needing to include it twice?
Load multiple posts by div post-id:
<div class="col-md-6">
<div class="container">
<div id="fetch_comp_content" post-id="6810"></div>
</div>
</div>
<div class="col-md-6">
<div class="container">
<div id="fetch_comp_content" post-id="6848"></div>
</div>
</div>
Instead of loading 1 post via the script tag:
<script title="true" id="comp_cont_init" post-id="6810"></script>
I would also like to note that the script tag actually loads the script to run the feed. I did not include that in my fiddle, as I wanted to show the JavaScript code.
Any help on this would be much appreciated!
Thank you.

Two quick issues:
You can't repeat Id's in a page, they are unique by definition. use
class instead
You aren't making the requests in the each loop where you have access to specific element instances and the specific post id's from elements
Here's a minimalistic version of what you are trying to accomplish. All I have rendered is the title for the posts.
Note it is better to use data- attributes also
$('.fetch_comp_content').each(function() {
var $el = $(this),
postId = $el.data('post-id'),
urlstring = 'https://wordpress.org/news/wp-json/wp/v2/posts/' + postId;
$.getJSON(urlstring).then(function(data) {
var title = data.title.rendered
$el.append('<h3>' + title + '</h3>');
}).catch(function() {
console.log('Bad request')
})
});
.fetch_comp_content { border:2px solid #ccc; margin:10px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6">
<div class="container">
<div class="fetch_comp_content" data-post-id="6810"></div>
</div>
</div>
<div class="col-md-6">
<div class="container">
<div class="fetch_comp_content" data-post-id="6846"></div>
</div>
</div>

fancybox not loading external URL

I'm trying fancybox for the first time, I want to load the contents from an external html file. What happens though, is the ajax call ends up loading my entire index.html file into the fancybox window, not the much smaller html table I want to see loaded. Here's the html where I set it up:
<div class="card bg-light">
<img class="card-img img-fluid" src="/assets/O-Ride-Entry.jpg" alt="Card image">
<div class="card-body">
<h5 class="card-title text-center" >Cadet Programs</h5>
<p>blah blah blah
</p>
</div>
<div id="cadetPgmContainer"></div>
<div class="card-footer bg-transparent ">
Learn More
</div>
</div> <!-- card -->
and here is the javascript that is called when the user clicks 'Learn More':
$('#cadetPgmsCard').click( function() {
var href= '/static/cadetPgms.html';
console.log('going to open fancybox with ', href);
$.fancybox.open({
width: 400,
height: 400,
autosize: true,
href: href,
type: 'ajax'
});
console.log('back from fancybox');
});
I've even simplified the html file to:
<p>this is from cadetPgms.html</p>
But here is a screen shot of what actually happens:
It reloads the entire main page back into the fancybox. I stepped thru into the debugger right where ajax is called in fancybox.js, and the right URL is there in the options. What else can I try?
Thanks...

It looks like you are loading entire webpage into fancybox, and most likely the responsone of your .html file contains superfluous tags including <html>, <head>, etc. And that is not correct. ,
In such case, you have two options:
1) Filter your content using filter option so that only the content is displayed
2) Load file that contains plain data or use preprocessor like PHP to return correct content when loaded using ajax

I ended up not using js to load the fancybox content, and set it up in the main html file and invoked fancybox from there instead. Then I got everything to work fine.

Can't run scripts after PJAX load

I'm using PJAX for a project.
I have a container called #icerikAlani to load its content with PJAX.
Here is the basic layout:
<div class="container" id="icerikAlani" data-pjax-container>
<!-- NIVO SLIDER -->
<div class="row">
<div class="col-md-8">
<div id="slider" class="nivoSlider"> SLIDER CONTENT HERE... </div>
</div>
</div>
<!-- SCROLLING LOGOS -->
<div class="row">
<div class="col-md-12">
<div id="logoParade"> SCROLLING LOGOS HERE... </div>
</div>
</div>
</div>
This container has two other script tags in it which are for Nivo Slider and Smooth Div Scroller plugins.
The problem is, when I navigate to a page and return to homepage, script tags stop working.
I tried to solve this problem by using pjax:end statement but I couldn't make it work, then I tried pjax:success as below bu still no luck. (as I read here: Where to put the page-initialize javascript when using pjax?)
Is there a way for using these scripts without reloading the page?
This is the script about PJAX and Smooth Div Scroller script:
<script type="text/javascript">
$(document).pjax('a','[data-pjax-container]', { fragment: "#icerikAlani" } );
//THIS IS HOW I ACTIVATE PJAX
$(document).on('pjax:beforeSend', function() {
$('#icerikAlani').fadeOut(50);
});
//WORKS...
$(document).on('pjax:end', function() {
$('#icerikAlani').fadeIn(400);
});
//WORKS...
$(document).on('ready pjax:success', function() {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
//FAILS...
});
</script>
You can check the full code here
Because I'm not experienced about javascript, this problem stands like a wall against me before finishing the project. Hope to find something works both with the slider and the scroller.

Possibly your script causes an error.
Try Firefox and Firebug and see if you find something...

jquery Passing ID tag across pages

When my main page loads, it grabs the first entry with the id="vids" from videos.html.
Main Page:
<div id="sidevideos" class="sidevideos">
<script>
$('#sidevideos').load('videos.html .vids:lt(1)');
</script>
</div>
That works great, no problem.
I would like to be able to pass the video link( .vids) to this function on the main page
<script>
var $v = jQuery.noConflict();
$v(document).ready(function() {
$v('#vids').colorbox({iframe:true, innerWidth:800, innerHeight:600});
});
</script>
Which would open the youtube video in an iframe.
Video.html Code:
<div class="videos">
<a id='vids' href="youtubevideo"><img src="img/videos/housing.png" border="0" class="sidevids">
<p class="sidevidtext">vid description</p></a>
<a id='vids' href="youtubevideo"><img src="img/videos/housing.png" border="0" class="sidevids">
<p class="sidevidtext">vid description</p></a>
</div>

There are two problems
id should be unique in a document, means you cannot have two elements with the same id vids
You need to call the colorbox after the videos.html is loaded, for that you can use the load complete callback
Try
$('#sidevideos').load('videos.html .eq(0)', function(){
$v('#vids').colorbox({iframe:true, innerWidth:800, innerHeight:600});
});

Im not sure if this is what you wanted but you could store the link into a variable like this var link = $('#vids').attr('href'); and then use the var to load in your main page
SEE FIDDLE