I am facing an issue with my script that uses the jQuery .load() method. The script is designed to load the content from a URL into a specific element on my page when a user clicks on a nav link. However, I am receiving the error message "TypeError: $(...).load is not a function." and I am not sure why this is happening.
Here is my script:
<script>
$(document).ready(function() {
// Add click event listener to all nav links
$(document).on('click', '.nav-link', function(event) {
event.preventDefault();
// Get the URL of the clicked link
var url = $(this).attr('href');
// Load the content from the URL into the content-column
$('#content-column').load(url);
});
});
</script>
I have made sure that I am using the latest version of jQuery and that it is properly included in my HTML file.
If anyone has any experience with this issue or knows how to resolve it, I would greatly appreciate your help.
Thank you!
Currently all scripts I have tried either result in a redirect to the actual url or the script works for one click and then stops working after that.
Related
I'm looking to get the full URL of the current browser window in Apps Scripts while displaying the web app via HTMLService
When I try this, it doesn't work because the Apps Scripts is sandboxed and I get another server url of some sort
window.location.href
When I try this, I can only fetch the hash or parameters, not the full url
google.script.url.getLocation(function(location) {
console.log(location.parameters);
console.log(location.hash);
});
source: https://developers.google.com/apps-script/guides/html/reference/url#methods
Purpose for the above:
I want a button that people click on in the published Web App to remove the browser toolbar. However, the browser toolbar is not removable in the current browser window. So I want to fetch the Web App URL and put it in window.open() as a new window with the current web app because the browser toolbar can be remove this way. But I can't seem to get the current URL.
Any ideas how I can achieve this?
Thanks in advance!
I don't know what you meant by developer mode either but I took a guess at this being the answer to the question. If not, let me know and I'll remove it.
On the clientside you can use Javascript:
<script>
function getUrl(){
google.script.run
.withSuccessHandler(function(url){
document.getElementById('mydiv').innerHTML='<p>' + url + '</p>';
})
.getScriptUrl()
</script>
<body>
<div id="mydiv"></div>
</body>
In Google Script:
function getScriptURL() {
return ScriptApp.getService().getUrl();
}
Jan 10, 2021: Tested the above code in a window.onload and it is returning the correct url with a business account, V8 runtime and the new editor.
I'd suggest this code for the current script URL:
function getScriptURL() {
// dev URI
'https://script.google.com/macros/d/' + ScriptApp.getScriptId() + '/edit';
}
so I have this problem, Im trying to build a website in which people can give out links which I will then analyze using request-promise.js (so on the server side) . This analysis will try to find embed videos in the given link. If present I want to make that emebed video appear in an iframe on my current page.
So for now Ive managed to get the embed the video, and render it in an EJS template variable , but this means that I have to use res.render('page', variables) and from my understanding that means reloading the page.
What I want to know is if there is a way to do that without reloading the page ?
(my goal is to make the found video appear in a bootstrap modal div that appears after people gave the link and clicked on my upload button that trigers the scrapping of the given link)
Thanks for your help
Pardon me if my question is unclear
You can use an XMLHttpRequest to get the data from the server asynchronously and display/store them on the page without reloading the whole page.
var url = '/get-embed-video/'+link;
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState === 4) {
// here get the response from the server
// and display your data
}
}
xmlHttp.open("GET", url, true); // false for synchronous request
xmlHttp.send(null);
I am working on a not for profit website in Angularjs and when i add the LinkedIn and Facebook share buttons, the Facebook button is always displayed but the linkedIn button is only displayed on initial load only.
When I go to mcwn.org the buttons are displayed. When i click through the tab buttons at the top and then go back to the home page by clinking on the website logo at the top the LinkedIn button is not displayed.
Anyone with ideas? this is very frustrating.
Thanks
I think #pascal-sanchez in comment is saying, that linkedin js file is loading twice in your website .
In Console log you can find such error.
"duplicate in.js loaded, any parameters will be ignored"
If we will see "pure page code", we will find linkedin file just once. It tells us that second file is written asynchronously to header part. Probably it provokes errors on loading. You can try change this line:
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>
to this
<script>
if (typeof (IN) !== 'undefined') {
// IN.parse(); // old but still supports
IN.init(); // reinitiating linkedin button
} else {
$.getScript("http://platform.linkedin.com/in.js");
}
</script>
This script will check if likedin already initiated and loaded, if not it will initiate it.
I've got an HTML form that I'm posting to a url successfully. However, I need to have the page be redirected after I've posted the form. I'm not able to use ajax because CORS is not enabled. When I post to the url I'm getting a success message, and a redirect link in json format. This seems much easier than it's proving to be.
What I know is, when I post to the original url, a cookie is created, and when I go to the url that the page is returning, I am an authenticated user. So, it seems that I need to capture that cookie, and then redirect, but I could be off base.
This can be achieved using custom scripting.
The script waits for the input button to be clicked and sets up a listener that checks to see if the div that holds the confirmation text is visible and then sends the user to the destination page.
Add this to the code injection point for the page that holds the form:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var eventposted=0;
$(document).ready(function(){
$('input.button').click(function() {
window.setInterval(foo, 100);
});
});
function foo(){
if(($(".form-submission-text").is(':visible')) && (eventposted==0)){
window.location = "http://www.something.com/destinationpage";
eventposted=1;
}
}
</script>
I've been working on a custom CMS in drupal for about two or three weeks now, and I keep running into this same problem. I'm trying to load a dynamically generated url (by extracting the node id of the target drupal page into $resultCut and appending it to the baseurl of the website). This iframe is embedded next to an instance of CKEditor, and the idea is to have the content in the iframe change when the fields in CKEditor are modified. I have the following Jquery:
<script type="text/javascript">
$(document).ready(function(){
baseurl = urlhere;
url = baseurl+"<?php echo $resultCut ?>"
$('#EmuFrame').attr('src', url);
var HTML = $('#EmuFrame').contents().find('body').html();
alert ( "LOADING COMPLETE" + HTML );
});
$('#edit-field-mobile-page-header-label-0-value').change(function () { // writes changes to the header text to emulaor
var curr = $(this).val();
$('#EmuFrame').contents().find("h1").text(curr);
});
$('#edit-body').keyup(function(e) { // writes changes to the body text to emulator
var curr = $(this).val();
currhead = $('#EmuFrame').contents().find("h1").html();
$('#EmuFrame').contents().find('#content').html("<h1>"+currhead+"</h1>"+curr);
});
where #EmuFrame is the id of an iframe, and the #edit-* tags are the ids of fields in CKEditor that I am monitoring for change. When the user types, the keyup() or change() events is supposed to grab the new html and swap it with the html in the iframe.
As of right now, the LOADING COMPLETE alert fires, but there is no html in the alert. I noticed that the content of the iframe loads AFTER the alert fires, however, which is what led me to believe that it's a problem with the order in which the events trigger.
Further, I had an alert in the callback function of keyup that returned the new html [ alert(curr) ] that was generated when a user started typing, and this alert returns html (although, it is being grabbed from CKEditor). However, the iframe does not reflect any changes. If I append [ alert (currhead) ] though, nothing is alerted at all.
It might be of interest to note that the source url is technically on a different domain than the parent. however, I used a workaround (i'm pretty sure it works, because I've previously gotten the whole html replacement thing working, and then somehow it broke). Also, neither Firebug nor Chrome's console report any XMLHttpRequest errors. Also, I keep getting this error: "Uncaught Syntax error, unrecognized expression: [#disabled]" and I'm not sure what it means, and whether its relevant to my problem as stated above.
That was a ridiculously long plea for help, so THANKS FOR READING, and thank you for any help!!
Your note about about the cross-domain iframe src is worrisome -- you shouldn't be able to access its contents with javascript. Nevertheless:
You have these two lines in quick succession:
$('#EmuFrame').attr('src', url);
var HTML = $('#EmuFrame').contents().find('body').html();
Try waiting for the iframe to load first:
$('#EmuFrame').load(function() {
var HTML = $('#EmuFrame').contents().find('body').html();
}