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.

Link from one page to drop down in page two

I'm trying to create an <a> link in html page 1 that takes the user to html page 2. After html page 2 loads, I want a drop down function to execute. Essentially it is a link from html page 1 to drop down in html2.
I am not very good with javascript, but I've tried anything I could find so far and nothing works. The link between the pages works, but I cannot get the drop down function to execute on load of html page 2.
Any help would be greatly appreciated
HTML Page 1
<a class="link2index" href="index2.html#test" onclick ="f();return false;">Read more about technology hubs in South Africa</a>
<script>
function f(){
testwindow = window.load("index2.html#test"); //this is working to load but not to load the dropdown
//testwindow.addEventListener('click', myFunction38()); not working
//window.onload = myFunction38 ()
//testwindow.addEventListener('load', myFunction38()){
//document.getElementById("myDropdown38").classList.toggle("show");}; not working
//window.open('index2.html');
//window.somefunction = myFunction38(){
//document.getElementById("myDropdown38").classList.toggle("show");} not working
}
</script>
HTML Page 2 to where I'm targeting
<div class="dropdown">
<button id="test" onclick="myFunction38()" class="dropbtn">Cape Town</button>
<div id="myDropdown38" class="dropdown-content">
<a href="#">
<img src="media/capetown.jpg" alt="South Africa">
Cape Town-based Labsorganises digital and entrepreneurship bootcamps, and provides an investment of up to $20,000 for every social enterprise developed through their program.
</a>
</div>
</div>
<script>
function myFunction38() {
document.getElementById("myDropdown38").classList.toggle("show");
}
</script>

Basically you can use the window.onload function to run some JavaScript to dynamically add html to your body and show a "drop-down".
But since html2 can be reached in other ways(like bookmark or copy/paste into browser) and not just through hyperlink inside html1, you could also append some query string or fragment in html2 when it is loaded from html1 (append it to the href of a tag). Inside the onload function you can then check if the same exists and decide whether or not to show drop-down.
I will not be giving a code since the functionality is vaguely defined in the question. But this should help you solve it on your own.

replace a content with another using onclick

I am using one of the bootstrap snippet for login dropdown box in the login box there is a link for Join Us I wanted that when i click on Join Us, the content within the box should get replaced by another box that contains login credentials
I modified the following code
New here ? <b>Join Us</b>
with the code below
New here ? <b>Join Us</b>
and created another content that had id signup-dp like this
<ul id="signup-dp" class="dropdown-menu">
// signup data Inside this part
</ul>
Now when i click on the Join Us link the url of the page gets changed i.e #signup in the end of the url, but the content does not get displayed,
can anyone please tell how to do so

Please check jquery included or not.
Use return false like below
<b>Join Us</b>
#signup-dp{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b>Join Us</b>
<div id="login-dp">login-dp</div>
<div id="signup-dp">signup-dp</div>

Its very simple and you code is working for me only.
<a href="#" onClick="$('#login-dp').hide(); $('#signup-dp').show()">
<b>Join Us</b>
</a>
<a href="#" onClick="$('#login-dp').show(); $('#signup-dp').hide()">
<b>Login</b>
</a>
<ul id="signup-dp" class="dropdown-menu">
// signup data Inside this part
</ul>
<ul id="login-dp" class="dropdown-menu">
// login data Inside this part
</ul>
Please follow this link . JSfiddle

Onclick jQuery is not working, So user Javascript code
New here ? <a href="#" onclick='document.getElementById("login-dp").style.display = "none";document.getElementById("signup-dp").style.display = "visible";'><b>Join Us</b></a>

Put the new hidden element somewhere before your existing element.
unless you write your jQuery code in $(document).ready(); in a separate file, or internal.

Your code is correct. But please check have you included jquery file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
This jquery should be included before the jquery code you have written.
Put following jquery code to make signup div initially hidden.
<script type="text/javascript">
$(document).ready(function(){
$("#signup-dp").hide();
});
</script>

First of all, for make good programming habit you have to bind click event instead of write javascript code inside of tag onClick attribute.
<b>Join Us</b>
In your javascript code (try to write code in other js file instead of inline code in HTML page.)
$(document).ready(function(){
$("#btn_join_us").click(function(e){
e.preventDefault();
$('#login-dp').hide();
$('#signup-dp').show();
return false;
});
});
This kind of code make some secure event binding. otherwise anyone can make change your code from inspect element and execute this.

Joomla Ajax loading for contact form component

I am trying to implement ajax loading for the joomla 3.2.1 default contact form component.
I set a menu link to the contact form in the backend.
This is the HTML output :
<nav id="menu2">
<div class="moduletable">
<ul class="nav menu">
<li class="item-138">Contact
</li>
</ul>
</div>
</nav>
and I have this div at the bottom of the page :
<section id="contact_form">
</section>
I implemented this Jquery code :
$('.item-138 a').click(function () {
$('#contact_form').load("index.php?option=com_contact&view=contact&id=1&tmpl=component")
return false;
});
The contact form loads well and my template override works. but how can I prevent loading the <head> content that comes with it?
The <title> tag, default scripts (mootools jquery...) and default css ( /templates/system/css/general.css, /templates/system/css/template.css)
Can I do that with a template override? Is it even possibler?

Well there is this value that you attach to the get request.
&format=raw
so your request looks like
index.php?option=com_contact&view=contact&id=1&tmpl=component&format=raw
also you may want to make a copy of your view.html.php and rename it view.raw.php

You should be able to load part of the page you want from the load, something like this.
$('#contact_form').load('index.php?option=com_contact&view=contact&id=1&tmpl=component #formID');
Check this documentation for Loading Page Fragments here.

jquery load() specific div not working

Here is the portion of HTML in question as well Javascript related to it:
HTML first:
<div id="menu">
<ul>
<li>click</li>
</ul>
</div>
Javascript goes:
$("#menu a").click(function(){
var link=encodeURI($(this).attr("href"));
$("#divtobeloadedwith").load(link);
return false;
});
content.html structure:
<div id="wrapper">
<div id="diviwant">stuff</div>
<div id="dividontwant">stuff</div>
</div>
Upon clicking on link it loads all the content instead only specific div.

Fundamentally the problem is that you want two different things:
When running without Javascript, you want to use the link content.html#diviwant, as that will load the page content.html and then jump to the element with the ID diviwant.
When running with Javascript, you want to pass content.html #diviwant to jQuery's load() method, as that tells jQuery to load only the fragment with the id diviwant from the target page.
I'd probably use content.html#diviwant as the link, as you've got, then interpret that in the jQuery like this:
$("#divtobeloadedwith").load(link.replace('#', ' #'));
...to add the necessary space for the load().

You need to remove the space between content.html and #diviwant in the href of your link.
<li>click</li>
You also need to make sure that "divtobeloaded" exists.
<div id="menu">
<ul>
<li>click</li>
</ul>
</div>
<div id="divtobeloaded"></div>