I made a script (jquery) in an html document, which does a search in a list (li) what was typed in a box (input). It happens that when the file is saved locally (localhost), the script is executed and works normally. However, when I send the page to remote hosting, the script stops working, not performing the search and not showing the expected result. Does anyone know what could be causing this problem?
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#txtBusca").keyup(function(){
var texto = $(this).val();
$("#ulItens li").css("display", "block");
$("#ulItens li").each(function(){
if($(this).text().toUpperCase().indexOf(texto.toUpperCase()) < 0)
$(this).css("display", "none");
});
});
});
</script>
Related
I was following the documentation on socket.io website when I found this problem.
My working code
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function() {
$(function () {
var socket = io();
$('form').submit(function(e) {
e.preventDefault(); // prevents page reloading
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
});
})
</script>
When the same jquery script is imported from an external file, it fails.
client.js contains the exact same jquery script and in the same directory.
<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="client.js"></script>
Below was the error from console, I'm not able to figure out what it is
The resource from “http://localhost:3000/client.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).
Change your type to "application/javascript" for that script. Also, if you find that the script isn't loading, add the defer property to the script tag like below.
<script type="application/javascript" defer src="./client.js"></script>
Lastly, I've seen similar issues where the js isn't located at the source you're referencing. Please make sure your source link is correct.
I have a large application that I want to convert from NATIVE to IFRAME sandbox now that NATIVE is deprecated. The general flow of the application is as follows: The user fills out a form on the beginning page and presses a Begin button. The beginning page is then hidden, and based upon values from the first page, the user is then shown a new page. My problem when using IFRAME is that the new page is never shown. It works as expected in NATIVE mode. I have created a simplified script that exhibits the problem. Please help me understand what I am forgetting or doing wrong.
Code.gs
function doGet() {
Logger.log('enter doget');
var html = HtmlService.createTemplateFromFile('BeginHeader').evaluate()
.setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
function include(filename) {
Logger.log('enter include');
Logger.log(filename);
var html = HtmlService.createHtmlOutputFromFile(filename).getContent();
Logger.log(html);
return html;
}
Javascript.html
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
<script
src="https://apis.google.com/js/api.js?onload=onApiLoad">
</script>
<script>
function showForm(hdr) {
console.log('enter showform');
console.log(hdr);
console.log('hiding first page');
document.getElementById('beginDiv').style.display = 'none';
var el = document.getElementById('recordDiv');
el.innerHTML = hdr;
console.log('showing new page');
el.style.display = 'block';
}
function oops(error) {
console.log('entered oops');
alert(error.message);
}
</script>
<script>
$(document).ready(function() {
console.log('begin ready');
$("#beginForm").submit(function() {
console.log('enter begin submit');
//console.log('hiding first page');
//document.getElementById('beginDiv').style.display = 'none';
console.log('including page 2');
google.script.run
.withSuccessHandler(showForm)
.withFailureHandler(oops)
.include('Page2');
});
});
</script>
BeginHeader.html
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<div id="beginDiv" style="display:block">
<p>Click on Begin. </p>
<form id="beginForm">
<input type="submit" value="Begin">
</form>
</div>
<!-- results of content being filled in -->
<div id="recordDiv"></div>
<?!= include('Javascript'); ?>
</body>
</html>
Page2.html
<!DOCTYPE html>
<html>
<body>
<p> This is page 2. </p>
</body>
</html>
There is no point in ever using a button of the "submit" type, unless you want to force the form to make an HTTP Request, and reload the application. That's what a "submit" type button does. It causes the page to be reloaded. The "submit" type button is meant to work together with a form in a certain way. It causes a GET or POST request to happen. That's what the problem is. So, you'll need to reconfigure things a little bit.
Just use a plain button.
<input type="button" value="Begin" onmouseup="gotoPg2()">
I created a gotoPg2() function to test it:
<script>
window.gotoPg2 = function() {
console.log('enter begin submit');
//console.log('hiding first page');
//document.getElementById('beginDiv').style.display = 'none';
console.log('including page 2');
google.script.run
.withSuccessHandler(showForm)
.withFailureHandler(oops)
.include('Page2');
};
</script>
If you use that, they you don't need the $(document).ready(function() { etc. code anymore. And, if you don't need that code, then you don't need to load jQuery.
Unless you are using jQuery for other things, then you don't need:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script
src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js">
</script>
The NATIVE mode was probably blocking the intended usage of the "submit" request. That's why the code in NATIVE was working. IFRAME allows things to work as they are built and intended to work, which means that the page was probably trying to be reloaded, and an error was occurring. I was getting a 404 page error in the browser console.
First off, I am quite a noob.
Ok, so I have embedded a SoundCloud track into my webpage. My question is, how do you refresh a page (or do anything else) when the track ends?
Can you do it with getDuration(I found that on SoundCloud API page)?
I tried to code it. In the code I tried to get the duration of the track and then print it on the screen/webpage. What is wrong with this code?
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<span id="headerLeft-content">
<script type="text/javascript">
var duration = 0;
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.READY, function() {
widget.getDuration(function(val) {
duration = val;
});
});
}());
document.write(duration);
</script>
</span>
If that worked, I would just put something like wait(duration) and then refresh...
In other words, can soundcloud embedded track be "hacked" to loop(or to refresh page after track is over, that's what I want to do) even though the original widget doesn't support looping?
Please, take a look at the SoundCloud html5 widget page where I found getDuration command and see if you can help me... => http://developers.soundcloud.com/docs/api/html5-widget#getters
EDIT:
<script>
var html=<iframe blablabla...></iframe>
document.write(html);
</script>
<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>
<script type="text/javascript">
(function(){
var widgetIframe = document.getElementById('sc-widget'),
widget = SC.Widget(widgetIframe),
widget.bind(SC.Widget.FINISH, function() {
window.location.reload(false);
});
}());
</script>
Page doesn't refresh after the track is over. Can you see what's wrong?
You can bind a function to the SC.Widget.FINISH event documented here. The following code snippet should work:
widget.bind(SC.Widget.FINISH, function() {
window.location.reload(false);
});
Of course if all you want is for the widget to loop, you could use the seekTo and play methods:
widget.bind(SC.Widget.FINISH, function() {
// again, again!
widget.seekTo(0);
widget.play();
});
That would be less intrusive than a page refresh.
widget.bind(SC.Widget.Event.FINISH, function() {
widget.seekTo(0);
widget.play();
});
In the other reply, the first parameter is missing ".Event".
Finally. A truly working version.
var widgetIframe = document.getElementById("soundcloud"),
widget = SC.Widget(widgetIframe);
widget.bind(SC.Widget.Events.FINISH, function() {
widget.play();
});
I'm creating my first chrome extension. My aim is simple, on a certain webpage, I want to hide an element with id someid.
I've created a background page, which for now selects the element with id someid
and alerts it to the screen. Problem is, the value of ele is null.
Tried $("#someid").hide(); as well, no luck.
Is there something special I need to do to interact with the DOM in a tab? I alerted
tab.url and that shows the right url.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
<script>
$(document).ready(function(){
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){
if(changeInfo.status == "complete")
{
if(tab.url.indexOf("somedomain.com") > -1)
{
chrome.tabs.getSelected(null, function(tab){
var tabUrl = tab.url;
chrome.tabs.executeScript(tab.id, {file: "background.js"},function({
var ele = document.getElementById("someid");
alert(ele);
});
});
}
}
});
});
</script>
</head>
<body></body>
</html>
As Stan pointed out, the problem was improper context. I used a content script and that fixed the problem. thanks!
I want to execute some javascript so I have my background.html page set up like this
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script type="text/javascript" src="jquery.js"></script>
<script>
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "contentscript.js"});
});
</script>
</body>
</html>
I would really like to use JQuery in this script, but I can't figure out how to get it to load. I don't want the content script to go off every time the user loads certain pages, just when they click the extension's button. Any ideas?
chrome.tabs.executeScript method has third parameter which is a callback function that executes when a script is loaded, which you can use to load more than one script in order:
chrome.browserAction.onClicked.addListener(function(tab) {
chrome.tabs.executeScript(null, {file: "jquery.js"}, function() {
chrome.tabs.executeScript(null, {file: "contentscript.js"});
});
});
You don't need to include <script type="text/javascript" src="jquery.js"></script> into your background page if you don't plan using it there.