I've spent an extremely long time trying to figure out why .load in jQuery works really weirdly for me. I have no idea what causes it not to work correctly sometimes.
I am building an UI where the user doesn't have to reload, but instead, whenever they click an <a> link, it calls a JS function that loads the url's contents into a "contentLoad" div.
I'm learning coding myself and jQuery & JS is pretty confusing to me, so I try to keep it as simple as possible.
Situation: I am using a simple JS function that takes an URL (from local FTP server), checks whether the URL has any parameters (example.php?abc=...), inserts "?included=1" behind the URL (to prevent it to be opened unless called by this function) and puts the file's contents into an empty DIV using .load (and also uses .load to display a loading page).
Problem is, it works perfectly, but every two minutes or so, it gets stuck on my loading screen and I have to either run the function again or reload the whole thing. I have no idea what's wrong.
Function:
var loadPage = function(url) {
$("#contentLoad").load("loading.php");
if(url.indexOf("?")>=0){
$("#contentLoad").load(url + "&included=1");
}
else {
$("#contentLoad").load(url + "?included=1");
}
window.history.replaceState('Object', 'Title', url);
}
Then, when I want to have an <a> that opens the page "explore.php", for example, I use
<li>Explore</li>.
What can I be doing wrong?
Alright so, I don't really know how this worked but I suppose the two .loads sort of "blocked each other out", because now that I removed the .load of the loading page, it works... Wow, haha.
So my solution was just replacing the
$("#contentLoad").load("loading.php");
with
document.getElementById("contentLoad").innerHTML = 'loading...';
Thanks to you guys for the help, though! :)
Related
Sorry if the title is a bit tricky to understand. Allow me to elaborate.
On my Wordpress website, I recently started using the extension Custom Field Suite, in order to be able to create custom fields. It allows me to retrieve those afterwards in html, so that if I ever need to change a text I can do it directly on Wordpress instead of having to pull up the html files and re-upload them every time.
Today I was doing some Javascript and I needed to retrieve a text that comes from one of those custom fields. Basically retrieve something like this :
<h1 class="title"><?= CFS()->get('title'); ?></h1>
So, what I thought of doing was using a QuerySelector and retrieve the class .title into a variable, like so :
let sentence = document.querySelector(".title");
The only problem is that it returns undefined, and I think I know why. When I load the page up and then go into the console and type exactly that, it works, which leads me to believe my Javascript retrieves the title faster than it has time to be returned by the CFS()->get.
My problem now is that I don't know how I could make it so that my title loads in time for the Javascript to proceed it, so I was wondering if anyone out there had an idea.
Thanks in advance
You can use the window.onload function of Javascript:
window.onload = function() {
alert('Page is loaded');
};
Or you can use an event listener:
window.addEventListener("load", function() {
alert('Page is loaded');
});
Be sure to put your js inside the functions. Be aware that this is one of many possibilities, so you can surely research for more options.
I would like to use Scratchblocks (a tool for rendering visual Scratch code blocks from a text listing, on GitHub) on my Squarespace website. The problem I am getting is that the scratchblocks are never rendered on the first load - but only after a refresh.
This is in the header (set in the header for that particular blog):
<script src="https://scratchblocks.github.io/js/scratchblocks-v3.1-min.js""></script>
Then I think I need to call this function at the end of the page - I've put it in the footer:
scratchblocks.renderMatching('pre.blocks');
NOTE: When I view the source I sort of see this JavaScript twice at the end of the page. Not sure what is happening there.
Here's an example of it on my website, where it renders the scratchblocks only after a refresh. [UPDATE - following the fix provided below, this now renders first time, every time as far as I can tell.]
[http://www.glennbroadway.com/coding-zone/2017/4/6/simple-collisions-in-scratch]2
Here's an example of someone else using it and it working properly. I've inspected the source and I can't work out how they are doing it.
https://codeclubprojects.org/en-GB/scratch/memory/
I've also tried all the different methods listed elsewhere on stackoverflow for getting javascript to load only after the HTML has finished. I can't get any of them to work - but I think the problem is something to do with Squarespace, I just don't have the knowledge to work out what.
Any help would be greatly appreciated.
In Squarespace, when your custom Javascript only works after a page refresh, it most likely has to do with Squarespace's AJAX loading:
Occasionally, Ajax may conflict with embedded custom code or anchor
links. Ajax can also interfere with site analytics, logging hits on
the first page only.
You may be able to disable AJAX for your template. Or, see the other approaches outlined here: https://stackoverflow.com/a/42604055/5338581 including:
window.addEventListener("mercury:load", function(){
// do stuff
});
In addition, I would generally recommend placing custom code in the "Footer" code injection area unless you have a specific reason to do otherwise.
This is the screenshot of my html page. this commented area is my issue.
Your problem starts with a couple of error's :)
Your Javascript crashes because it looks for a function that doesn't exist "$(...).fancybox()". This means that either you didn't include the fancybox library or that the file where you call in the function fancybox is loaded before the fancybox library is loaded in.
Next problem is that the images that are used in your slider (I assume). Do no longer exist. Try clicking them in the console to see if you can access them in the browser.
Last but not least. You tagged your question as "java". Javascript and java are not the same thing. Your problem involves javascript. Might want to change that tag next time so you can get anwsered faster.
I Hope this helped a bit :)
Good luck!
This is a little hard for me to explain as i am not much of a coder. So here we go.
I have script that is mostly encoded with ion cube. Not i have an addon that is also encoded. The addon is loading in a tab number 5. The problem is that every time i click on a function in the tab that complete page reloads, and you have to navigate back to tab 5 to see the results.
So this is what i am thinking. As i can't edit code and the make of the code doesn't know when they are adding tab support to their little piece of code. i figured that there are two options
1 Force the following variable to the end of the url #tab5 so that when people click a function they will not have to navigate back to the tab. How do i do this coding wise, javascript or something else and what would code be or where would i look to code something like that. I have looked everywhere but nothing really applies to my situation
2 I think it would also work if each function which is called just reloads that section of the page in an ajax field so that not the full page is being reloaded.
Who can help find the right solution.
thanks
I know this is a problem I could solve with a huge list in "innerHTML", but there's got to be a better way.
I'm making a webpage with a "search" and "browse" section, both are big buttons at the top of the index page. I have search.html and browse.html, but I want their contents to load in my "main" div on the index page rather than open their own pages. I should be able to quickly click between "search" and "browse" and have their different pages load back and forth inside the index page. Hopefully that makes sense. I was trying a solution with frames before, but it wasn't working for me.
Any advice would be greatly appreciated.
Thanks!
You can use tabs or something like that: http://jqueryui.com/demos/tabs/
Most JavaScript AJAX libraries such as jQuery have this built-in - in case of jQuery the load method.
However keep in mind, "tricks" like this destroys the browser usability for your users (broken back button, not possible to set bookmarks, etc.). It's possible to work around, but that makes extra work.