I am coding a blog using Nuxt.js and ButterCMS API for backend and for display posts.
I am loading some JavaScript code for display my posts correctly, that is working very well.
The problem is that when I navigate via the menu (so via NuxtLink), the script of each page is not loaded. When I refresh the page, everything is working correctly. I don't want to make a script that refresh automatically the page when clicking on an item of the menu because it will remove Nuxt transition between pages.
I already seen several posts with the same problem as mind on GitHub and Stack Overflow, but without solution that was working for me.
Here is my code that is directly in script tag in a Vue page :
import { butter } from "~/plugins/buttercms";
butter.page.retrieve("*", "simple-page").then(() => {
const createScript1 = document.createElement("script");
createScript1.src = "../../script/post-informations.js";
document.head.appendChild(createScript1);
});
const createScript2 = document.createElement("script");
createScript2.src = "https://sibforms.com/forms/end-form/build/main.js";
document.head.appendChild(createScript2);
Related
I am working on a WordPress site where the content will be replaced each week (any posts, media or files are wiped from the WP environment each week, and then repopulated with all new content, and so on).
One of the main features of the post pages, is that I will have to copy and paste local URLs from a Word document directly into the WordPress post. Since the original hyperlinks lead to a file saved on my local system, the hyperlinks obviously do not link properly on the WordPress site. I have created a small script for this using REGEX concepts to automatically change hyperlinks depending on the category.
This code snip-it is saved in my functions.php file (loads locally saved script that does the actual link change magic):
Function load_js_assets_Tab2 () {
if( in_category('10')) {
wp_enqueue_script('tab2LinkReplace','https://myserver/wordpress/wp-content/tab2LinkReplace.js', array('jquery'), '', true);
}
}
add_action('wp_enqueue_scripts', 'load_js_assets_Tab2');
THE PROBLEM:
For some reason, this script only works on the first post I load, then does not apply to all the following auto loaded posts. No matter which post I click first, the script works, but will not for any following posts as I scroll down through the posts. The 'auto load next post' feature is built right into my template Newsblock (https://newsblocktheme.com/).
I am assuming this has something to do with the fact that the auto load next post feature is done via AJAX loading, but I have no idea how to fix this.
If any one has any suggestions, work arounds or ideas on how to approach this differently... I would really appreciate it!
The Ajax is probably the issue and the hyperlinks fixing thing isn't being recalled.
You can used $(document).bind('ajaxComplete') to do things after every Ajax request and you can use this as a trigger the rerun that function
You'd just include this inside you tab2LinkReplace.js file, but I'm not sure how that JS works so I just left some basic comments
$(document).ready(function() {
$(document).bind('ajaxComplete', function(){
// was new post loaded?
// new post has loaded
// call function
// or manually fix:
// - loop through each newly created link:
// - > Fix Link w Magical Regex
});
});
I am working on a Hugo Static Site Generator theme, the problem is that the Javascript features don't load unless I reload the page
e.g
Before reloading the page
After reloading the page
This is the code, I used in adding the new class
$(document).ready(function() {
$('h2').addClass('hello')
});
Now, the problem is that since it is a static site generator when opening a new page, it will not refresh/reload the site, but load the page like a cached page. therefore most of the javascript features only apply once unless the page is reloaded. The problem is also experienced when I am using VueJs on the theme, Which means, I need to find a way to force load a new URL, instead of it loading like an anchor link.
UPDATE: I have been able to resolve it, The problem was from another javascript file, making an ajax get request
Thanks
Did you debug or add console.log inside your ready function to see it can reach there? I am suspecting that your h2 is rendered by js and at the time your code to add class hello that h2 is not rendered yet.
If this is the case I think you need to render html at server first or you can include your script in the same place as your components
I'm trying to create a website with a Home Page UI from which loads of different files (pages) could be navigated to. I've set up the Home page (index.html with its css, jQuery & JS loading correctly). But I can't seem to get a grasp on how to integrate my vision of buttons on a home page which will redirect user to other HTML pages with corresponding links to CSS, JS & jQuery. But my question is more specific:
How do you render HTML files in express with a function in a js file? in directory:
C:\CodingProjects\Principles\ public\javascripts\home.js
(Principles being the project folder)
I've namely set up a function which executes when I click a button, like so:
<button onclick="BoostOddsRedirect()">Boost your odds of success through de-centralized principle-guided decision-making.</button>
& JS ofc:
const BoostOddsRedirect = () => {
//Here I want the functionality of rendering another HTML file, namely BoostOdds.html, with the directory: C:\CodingProjects\Principles\public\markups\IntPrinHTML\BoostOdds.html
};
Which I've tested to be correctly linked in HTML file in which button with onclick attribute is created.
It'd be great if solution can be reproduced for other buttons and other files effieciently.
What I've done is just intuitive start of a functionality which I do not know how to complete, so if you have a better idea, I'd love to here it. Please let me know if you need more info, thanks.
For some reason, I can't find the problem or issue why I cannot use simple javascript code to update browser's tab text.
I'm doing a Shopify Application using Rails, which will be embedded and iframed to shopify.
I have a simple function to update tab title.
ex.
// jquery lib is loaded already....
$(function){ // i tried window on load as well
document.title = 'Sample';
}
But running it in browser's console has no problem.
No error shows in console, but not working... confusing...
I tried to make simple html file and it works there, only having issue when i put the code in my rails app, that being iframed in Shopify.
Any idea out there?
I'm trying to integrate Google Adsense into my React site and am running into an issue. To get ads on my pages, I've included this script tag into the head of my html file:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
The ads are wrapped in a simple component that looks like this:
export default class GoogleAdSense extends Component {
componentDidMount() {
(window.adsbygoogle = window.adsbygoogle || []).push({});
}
render() {
const {
showAd,
className,
slot,
format,
} = this.props;
return (
<div className="GoogleAdSense">
<ins
className={ `adsbygoogle ${className}` }
style={{ display: 'block' }}
data-ad-client="ca-pub-7104738102834759"
data-ad-slot={slot}
data-ad-format={format}
>
</ins>
</div>
);
}
}
Which is rendered by other components like this:
<GoogleAdSense
slot="3461840703"
className="QuestionGoogleAd"
format="auto"
/>
This method was pulled from this article
Using the above implementation, ads load correctly on the page. The problem arises when users navigate to other pages. Since I'm using react router, the head doesn't update (with the exception of some react-helmet title changes) and the Adsense script doesn't reload. This makes Adsense think that it's on the same page as indicated by the Adsense pageview numbers I'm getting and the Adsense docs here:
Separate JavaScript code: AdSense counts a page view when the AdSense ad code is executed by a user's browser.
This is further evidenced by the fact that when I inspect the Adsense HTTP requests, I can see that there is a prev_fmts param that remembers the previous ads requested:
The problem is that after about 12-16 ads show up (2 per page, so maximum 8 page views), Adsense returns an empty html document with a 400 error for every subsequent ad request:
If I manually refresh the page by hitting cmd-r, the ads load correctly once again, but only for the next few pageviews. I tried removing the script I mentioned earlier and reinserting it into the head on each page change since that would (in theory) rerun the ad code and trigger a new Adsense pageview, but that didn't work. The main point of this site is to be able to show ads to generate a stable revenue stream and if I can't show ads on all of my pageviews (I'm averaging about 20 per user right now) using React, I'm going to have to reimplement the whole site, which I REALLY don't want to do. Has anyone else experienced this and found a solution?
You can use googletags to manage your adsense displays instead.
https://www.google.com/analytics/tag-manager/
They have functions to refresh the ads on a page https://support.google.com/dfp_sb/answer/2694377?visit_id=1-636301421618198678-920866889&rd=1 which will work for client side apps
You can use prepared react components for google publisher tag