We Keep Coding

JQuery click() does not load page properly if page has not been loaded via navbar first

I am working with this Template from templatemo.
I wanted to include some references to other parts of the website in the body text (e.g. Please "contact me" for further information). If you click "contact me" the page should navigate to "Contact" in the same manner as if the user clicked on the navigation bar to navigate to the page (with the same animation).
In order to so, i added the following code to trigger a click event:
<p class="tm-text">Contact me via the <a id="myLink" href="javascript:loadPage(5);">contact form</a></p>
And the function to trigger the click:
function loadPage(pageNo) {
$(document).ready(function() {
$('.nav-item').get(pageNo).click();});
}
So this code is working, if I click on the reference the page changes as if I clicked the navigation bar. BUT:
If I reload the page and click on the reference, the page navigates to the contact page, which then however is not diplayed properly (the contact form and the google maps view are missing).
If I reload the page, first open the contact page via the menu, then switch to the page with the reference and click on it, the contact page is loaded properly.
This behaviour is also shown if I reference another page (e.g. the Gallery). The gallery elements are displayed (the page is not completely empty), but the spacing between the elements is not correct.
It seems like every page has to be loaded at least once via the navigation bar. If this has happened, all pages are displayed properly when opened via a reference in the text.
Thanks for your support.

Your template use Hero slider + some customs JavaScript functions to move between "pages", so you need to use the same functions to get the same behaviour.
Doing that will work:
<p class="tm-text">Contact me via the <a id="myLink" href="javascript:goToPage('Contact');">contact form</a></p>
You need to add this JS function:
function goToPage(page_name) {
// Retrieve the <a> tag with the page_name
// page_name is the string of the page in the navbar
page_link_a = $('.navbar-nav .nav-link').filter(function(index) { return $(this).text() === page_name; });
page_link_li = page_link_a.parent();
// Trigger js code from hero slider
page_link_li.click();
// Trigger js code from templatemo
page_link_a.click();
}
The function goToPage() take one parameter, the string name of the section so if you have a section named My Gallery you need to put that, not my-gallery nor an index.

Handling url targeted PHP page with custom jQuery loaded content

First I used include('pageName.php'); for every page I wanted to load.
Now I decided to rewrite everything and to load a page in a <div id="page_content"></div> with the jQuery function: $('#page_content').load(pageurl, {access:true});
I hope this is the best practice. Because I want to reduce load time on my web application by not refreshing the whole website with all CSS and JS files but just to refresh content when clicked on a new page.
Currently I am using the following function to load pages into the division and to pushState to history:
//Dynload pages
$("a[rel='dynload']").click(function(e) {
e.preventDefault();
var page = $(this).attr("page");
var pageurl = "pages/" + page + ".php";
$('#page_content').load(pageurl, {access:true});
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',page);
}
//stop refreshing to the page given in
return false;
});
This works perfectly.
I have this button that triggers this function and gives for attribute page="index_content" . The function will load this page to the division and the state is being pushed into the history.
However. We get an url something like this: https://mywebsite.com/index_content
The problem is, when I load this specific URL into my browser I get : "Page not found" ofcourse, because it is trying to search for the index_content folder which does not exist.
Is there a way to check the url by my PHP/jQuery script and to load the correct page into the division? If not, how can I solve this for a generic case.
When I add a new page, I want to spend no- to very less time on the pageswitcher function.
In that way I can also handle non-existing pages.
Thanks in advance!

Displaying loading gif within html object

I have a main page with a number of buttons. When a button is pressed the target page is loaded as an object within a div on this main page where target is the page to be displayed within the object.
<script>
.... check which button is pressed and assign path to target
var objectContent = "<object type=\"text/html\" data=\"" + target + "\" height=\"500px\" width=\"100%\" style=\"overflow:auto; min-height:400px;\"></object>";
document.getElementById('content').innerHTML = objectContent;
</script>
html
<div id='content'>
</div>
All works and the target page loads fine within the main page div.
Sometimes it can take a while to load the content and so I would make use of a loading gif. I have been using one on whole pages but I would like one just on the content within the div.
In a target page I have the following to display the loader:
<script>
$(".loader").fadeIn("fast");
</script>
and this to hide it once the page is loaded
<script>
$(document).ready(function(){
$(".loader").hide();
});
</script>
This is not working. The page loads fine but no loading gif. No errors.
If I debug in the browser I see the gif as I step through so it must be loading and hiding, but not when I load the page normally. I suspect it is loading too late or hiding too soon.
Does my javascript show the loader as soon as the page starts to load? I have placed it at the beginning of the body.
Or is something I am doing to hide it before the page is fully loaded? Either way, can anyone see what I am doing wrong?
UPDATE AND ANSWER
Add the onload to the object tag as follows:
var out = "<object ... onload=\"contentLoaded(this)\"></object>";
<script>
function contentLoaded() {
$(".loader").hide();
};
</script>

Then why not leave the .loader element empty and do something like this
$('.loader').fadeIn('fast').html('<img src="loading.gif" />');
And this
$('.loader').hide().html('');

Is the trigger for the loading gif showing only within the loaded-in page?
If so, by the time the browser receives the instruction to show the loader, it's already fetched the data.
I imagine the majority of the time is spent waiting for the content so try showing the loader just before this happens:
document.getElementById('content').innerHTML = objectContent;
You could always create a localised loader image, set within the innerHTML, as you said you had a global one already.

Linking to a specific section on a page

I am wondering if this is possible and if so, how I would do it.
I have a page called services with different services all listed within it. The thing is, all of those services are hidden on page load and only show if a tab is clicked. To see this, click here.
Let's say I have a footer with services listed in the footer. Like this:
Service 1
Service 2
Service 3
If someone clicks on service two, I am wanting the link to take them to my services page and to show the services two section on page load, while still hiding all of the other services.
This is the javascript to show/hide my different services.
$('.service-tab-block').click(function() {
$('.service-tab-block').css({"background":"purple" , "color" : "#000"});
$(this).css({"background":"#000", "color":"#FFF"});
//To get the service display box to show
var item_number = $(this).attr('id').replace('service_tab', '');
$('#service-display-box').show();
$('html, body').animate({
scrollTop: $("#service-display-box").offset().top
}, 1500);
$('#service'+item_number).show().siblings().hide();
$('#service-top').show();
})
So, is it possible to click on a link and be taken to my page and show a specific service and the div it is in (at the top of the page)?

Trigger Third-Party Javascript from Event

I run an eCommerce website. On our order confirmation page we run a third-party javascript that automatically executes an optional survey.
The problem with the survey is that it takes twenty seconds to execute and slows down the rendering of the crucial 'Order Complete' page.
I am wanting to prevent loading of this script until the customer clicks a button.
Ideally, the page will load without executing the script. There will be some text on the page that says, "Would you like to take a survey? If yes, click here." Then the page will call the third-party javascript to execute the survey code.
Below is the third-party javascript. The first script tag just collects variables, and the second script tag actually runs the survey code.
<script language="JavaScript">
// var passin_x =; //comment out to default center or adjust horizontal position by pixel
// var passin_y =; //comment out to default center or adjust vertical position by pixel
var orderId='##order_id##';
// var z_index =; //default 9995
var cartTotal='##purchase_total##';
// var billingZipCode=;
// Pass up to 5 products from customer shopping cart
//var productsPurchased= 'URL=^SKU=^GTIN=^PRICE=|URL=^SKU=^GTIN=^PRICE=|URL=^SKU=^GTIN=^PRICE=|URL=^SKU=^GTIN=^PRICE=|URL=^SKU=^GTIN=^PRICE=';
</script>
<script type="text/javascript" src="https://eval.bizrate.com/js/pos_xxxxx.js">
</script>
How can I dynamically load the script after the click event?

I used jQuery.getScript to dynamically load the script after the click event.
Specifically, I used the technique shown here:
http://www.tutorialspoint.com/jquery/ajax-jquery-getscript.htm
Which looks like this:
$(document).ready(function() {
$("#driver").click(function(event){
$.getScript('/jquery/result.js', function(jd) {
// Call custom function defined in script
CheckJS();
});
});
});

Why would you want to do this anyway? This will slow down your site for calling an external link to fire off your js and if anything happens to the external site then your js functions will be voided and the site may break. This is not a good coding practice you should obtain a copy of the js file and store it locally within your hosting server...
This is just my opinion anyway.
-Epik-