I'm building a site with Pjax, so I have to reload some scripts every time open a new page. These page may contain/need different JavaScript, I hope to write the script this page needed in somewhere like <script id="balabala">alert("hello");</script>, and when pjax reload, it get the script text and run as JavaScript. Is this possible and how to make it work?
Answer myself:
Using eval() Function function, see: https://www.w3schools.com/jsref/jsref_eval.asp
Related
I am working on a website that was started off by someone else. That person built the whole thing in one 1000-line html file, and links to different 'pages' just reference other sections in the main html file. So my task is to break the page apart into seperate html pages. Unfortunately, now the seperate pages do not load the javascript unless the page is refreshed.
Is there a standard way to fix this problem without forcing the user to manually refresh the page?
If you break that one big page into several smaller pages, make sure you include the JavaScript (and CSS) in the new pages. The most efficient way to do this is to have the JavaScript in an external JavaScript file, and bring that file into the new pages by putting the script tag inside the new pages' head tags like so:
<head>
<script src="path/to/javascript/app_name.js"></script>
</head>
When the user clicks on a hyperlink to see one of the new pages, when the browser receives the response from the server, it will parse the response and execute the JavaScript.
If I understand your problem correctly, I would wrap whatever "detailsScreen.js" does into a function and call it after you changed the page content.
This might be a simple question to many of you but any help would be actually appreciated
<li>rpsgame</li>
I am trying to link a tab to a cool simple game I made on Javascript, but it is opening in code instead of the actual program
My program name is rpsgame.js
Why is this happening ? what wrong did I do ?
Thank you so much
P.S: I'm new here!
What you need to do is link the js file using the script tag.
Here's how to do it:
<script src="rpsgame.js" type="text/javascript"></script>
After you do that, when the user clicks on the tab, load using ajax the view you created above and thats it!
Javascript files are actually plain text, so you're only linking to a page of text. A few solutions follow:
Put the contents in a function in that file, add that file in a <script tag in the header, and call the function onclick
Or call in the file with AJAX and eval it, or maybe JSON.parse it, or whatever
make a function that adds a <script> tag to the header with that file as a src
I'm using a third-party commenting plugin right now, All it provides is a piece of script as follows:
<div id="uyan_frame"></div>
<script type="text/javascript"
id="UYScript"
src="http://v1.uyan.cc/js/iframe.js?UYUserId=1674366" async="">
</script>
As it is not a live commenting plugin, I want to add a refresh button next to it to reload it manually to see the latest comments instead of reloading the whole page.(I know Disqus is a good commenting plugin, but as we target Chinese users, I have to use the current one).
As it's a third party plugin, I don't have too much control over it. And I also think iframe is a ugly way to achieve this partly refreshing thing. So, is there any other way to achieve this? Like every time I click on the refresh button, it will erase out all the HTML element this script generated, recreate this script tag, append it to the appropriate place, and run it again?
you do not have to use iframe as it is slow. What you can do is create a div or section and give it an id or class, then create a button that when is clicked will fetch a script and append the right html contents in the div or section you've created. To make it easier to understand the code would look something like this.
<section id="content"></section>
<button id="refresher"></button>
<script>
$('#refresher').click(function(){
//Load your script like so
$.getScript('url of the script you are trying to get', function(){...})
//Load your content here
$('#content').html('Current contents will be erased and will be replaced by whatever you placed here')
//...or if you need ajax fetching
$.ajax({
url: url,
success: function(){
$('#content').html('place your content here and this will erase old content')
}
});
})
</script>
I would ask 3rd party company how to refresh comments without refreshing the whole page. They did developed this, and they must have a way to refresh it easily.
For example, UYComment.refresh(document.getElementById('comment'))
You may also find this kind of solution by looking at their javascript code if you don't want to ask them.
You can go around by not using 3rd-party provided code, i.e. ajax to replace div, refreshing iframe, etc., but, based on my experience, it always make your code little messier.
Since you tagged jQuery, I'm assuming you're using it.
Try adding a click handler to your refresh button and then use .html()
example:
$('#uyan_frame').html('');
When you call .html, it should replace the element you called it on and it should recall any scripts in the string you pass in. Just as a disclaimer, this is not tested.
I have a 3rd party script that displays some data on my site. When the script loads it breaks all of the JS on any page the script is in. I remove the script and my page works without issue.
Are there ways to prevent 3rd party scripts from interacting with my page in a way the breaks the page?
Notes:
I have no access to the 3rd party script to edit.
I am using jQuery for the scripts that are breaking. I have in place jQuery.noConflict yet it still breaks the page.
I have attempted to load the script in an iframe to see if that made a difference. It did not.
The script does write data to the page, mainly CSS and HTML
Note: The below code may contain references/links to drug content, mainly marijuana.
I am building a site for a medical marijuana dispensary. I am importing the menu of the dispensary from a site called WeedMaps. Their embed code looks like this:
<script type="text/javascript">var wmenu_id = 1111;</script> //The number correlates to the menu I need to pull, I have changed it in this question
<script type="text/javascript" src="http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js"></script>
When I use the above code the JS of my site breaks. How to I prevent my code from breaking when using 3rd party scripts over which I have no control.
UPDATE
Here is a JS Fiddle. The menu opens but doesn't close properly. Remove the script that is generating the menu from weedmaps and the menu works correctly. (The weedmaps menu script is in the bottom of the HTML panel.)
Hmm, not having much luck. I'll add what I have, since it may trigger further ideas from you. However, in short, I think their script isn't written particularly well, and that they really do need to fix it on their end.
As it stands, Firefox shows this error when animating the menus:
TypeError: jQuery.easing[jQuery.easing.def] is not a function
This blog suggests that this occurs when the Easing plugin is loaded before jQuery. Fine, I thought - we just need to load the WeedMenu script after our jQuery has loaded. So I tried the following (with help from here):
$j.getScript('http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js');
That gave me this error:
A call to document.write() from an asynchronously-loaded external script was ignored.
Turns out that occurs as a result of the WM script using document.write, which is desperately out of date. So that lead me on to find crapLoader, which is meant to handle this sort of thing:
crapLoader.loadScript("http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu-widget.js", "menu-script");
Unfortunately that brings me back to the original Easing error.
Here's my fork - let me know if you find anything!
The script is not well written, I was able to solve my issue by removing a line of code from the script. The link I provided list to a longer script. The script had this line of code:
try {
b("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), "function" != typeof wmenu_strains_callback && b("http://legalmarijuanadispensary.com/components/com_weedmenu/weedmenu.js", !0)
}
if I remove b("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), then the script works and my page works. What was happening was the script was inserting jQuery into the bottom of my head and breaking the rest of my javascript.
http://dy-verse.blogspot.com/2009/08/screen-scraping-with-javascript-firebug.html[link text][1]
outlines a strategy to parse a page and submit contents to a Google spreadsheet that depends on Greasemonkey. I'd like to adapt this approach to a simple bookmarklet where, instead of hardcoding in the page address to be parsed, i would manually navigate to the page in question to execute the bookmarklet.
I need help coding the entry point and assigning the elements to be parsed. My page has 3 (un-nested) tables at the top-level of the document - it has no classnames. How do I go about passing those tables into the start() function?
thx
If you load your page with a bookmarklet you have free hands to use any of your javascript command inside that page.
You can use document.getElementsByTagName('TABLE') or load a JS library that will help you do the job.
And if you are using a modern browser you can use as well the document.querySelectorAll with a CSS selector.