I am responsible for maintaining 2 websites. One is a Wordpress website that is just a list of events using Time.ly's All in One Event Calendar plugin. The other is a conventional built from scratch website using html.
The html website has had code that embedded the Wordpress calendar feed into it for several years, and it's always worked fine and I haven't had to do anything with it. Recently, it just stopped working. The calendar feed is just gone with no errors returned, no problems loading the site or anything. It looks as if somebody just deleted the code for it. However, the code is still there and is as follows:
<script class="ai1ec-widget-placeholder" data-widget="ai1ec_superwidget" data-action="stream" data-tag_ids="45">
(function(){var d=document,s=d.createElement('script'),
i='ai1ec-script';if(d.getElementById(i))return;s.async=1;
s.id=i;s.src='http://www.texascitycommunitycalendar.com/?ai1ec_js_widget';
d.getElementsByTagName('head')[0].appendChild(s);})();
</script>
Can anybody identify any obvious reason that that might have just stopped working?
I don't see a reason for that very last () pair in the script tag (just before the semicolon that is followed by the closing </script>tag. Try to erase it.
Related
Edit: The page code can be found on my page URL. I don't know where the fault might be. Please help.
Problem:
When we click to the chess puzzles page for the first time, they work. However, the boards vanish when we re-click to them from the homepage.
Demo:
This is the home page.
You click on a player's picture and you are taken to this page. Please note that the boards appear in this one.
But you see that link to go back to the puzzle list. You click on that and you land on the home page again.
Now, if you click on any of the players' photo (or even the same player's photo), this is what you get.
From now on, none of the puzzle links would work.
You can check it yourself at chess-puzzle.com.
Few information:
The site used Cloudfare. I tested with Cloudfare (inactive) a few minutes back yet the problem is not resolved.
I validated JS and it seems to be okay.
I have only one CSS file on my own (mycss.css). Other external files came with the piece of software.
I don't know which code to share because I don't know why this might happen. Though I can share any code by editing this question if asked for.
Can anybody please provide an answer to this.
The problem is that you have the attribute async in the scripts (jquery, chessboard) and that means that they do not load in any particular order.
But, the chessboard uses jquery at some points so if the chessboard script loads/runs first it will crash because it does not find jquery.
The script at the bottom will also fail as it might run before jQuery is loaded.
Finally you have included the chessboard script twice in the `head.
The best solution for your case would be to move the scripts at the bottom of the body, right above your inline script and remove the async attribute from them.
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.
I currently have a simple html page that utilizes an angular script to fetch json content and arrange it into a table. nothing all that complex.
I've been asked today to have it so that it could be included as a plugin anywhere in a wordpress site. As someone that has never used wordpress before, I'm wondering if there is a simple way to do this, or indeed if it is possible at all. Answers that I have found are either unrelated to the issue that I have, or are incredibly old.
If you don't care about making it a plugin exactly but instead a snippet you drop into a page is fine then I would suggest using a page template that loads the angular js files and sets up the overall HTML and inits the app.
first time asking. I've been costuming a blogger template - http://personalist-themexpose.blogspot.com - and learning code as I go. But now I'm stuck.
When I click on a post label, the page starts loading but before it ends, it goes blank. After some fiddling I'm convinced the is some sort of conflict with two javacript applications.
I found out that by deleting the last lines of the pagination plugin I would be able to go into the /search/label/… pages, but I don't know how that will affect the overall workings of the page. [edit] This solves the problem when viewing fem the desktop. The issue persists when viewing from the phone - #media?
else {
document.write('<script src="' + home_page + 'feeds/posts/full/-/' + lblname1 + '?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
But when viewing a label page the simple menu on the left side won't work.
Another thing I noticed is that removing script relating to the menu will also allow me to go into a label page but obviously results in the menu malfunctioning:
<script src='http://yourjavascript.com/8118243424/min.js' type='text/javascript'/>
I've never ever worked with javascript and am a total noob in html so sorry for not being able to give more technical hints.
The designer of this template has got a very similar one which works fine, only it doesn't have the side menu. This tells me that the issue reside probably in the code for this menu. Can someone tell me how to resolve this?
Thanks in advance.
So anyway, I solved the issue. I was right to thing that the menu was the culprit. I downloaded the link to the javascript posted in the question which ended up being an amalgam of different plugins. In the end there was the script referring to the Sidr menu. I downloaded the original script from the Sidr website and replaced the adulterated one with it in the amalgam file - I wasn't able to separate the plugins without destabilizing the template. Ran the website and all was working.
This is a bit of an odd issue I'm having. I've been using John Resig' micro-templates for a meeting minutes application, and it seemed to work well, but lately I've been having an issue.
Basically the application fetches some JSON from an ajax call, and then uses the templating engine to generate a table with various actions like so:
This works fine, its a little slow in IE (javascript rendering) but it works. However randomly I'll get a stuff up in the display:
notice the gap there, its pushed it out wide, also, its made the rest of the rows squish up. I've tried every CSS/HTML trick I can think of to try and get IE to render it properly, but I'm out of ideas (any suggestions would be great!) . I'm using JQuery Sortable so you can drag each of those rows around, I noticed that when you drag it and place it again, it displays correctly. It's as if it thinks theres an extra TD there, when there isn't.
So I opened the IE developer tools and copied the inner HTML of the HTML element. Pasted this into a HTML file and put it on the server, turned off the JS so it wouldn't reload the elements and ran the page. It displays perfectly, just as in my first image.
So I'm confused as to why IE will render the page fine if the HTML is present from the start, but the templating engine causes odd stuff ups.
I'll probably look at rendering that part of the HTML on the server, and only use the templating where I need to. But has anyone come across this sort of issue before? is there any trick I can do to make it render it as it should?
we had similar problem in our company and our designer solved it. Solution was in concatenating tags one after another without spaces and/or without new line. Code is not looking great after that but still solves problem.
Thanks,
Nikola