I have been trying to use jQuery in order to get some text written on the same page I have opened. I inserted a button, but it is not working on my Django server. After doing some research I noticed that the code works on some servers and doesn't work on others.
For example, I wrote the snippet below and it will be posible to notice that buttons work on it, but when I bring it to my server or to repl.it, the first button never works.
I intend to use exactly the first button example to produce my codes. Can anyone help me to clarify the reasons the above mentioned button doesn't work sometimes?
$("#sentiment_training").click(function(){
/* This is a work in progress yet */
alert("Using jQuery in a File");
});
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="script.js"></script>
<script>
function myFunction() {
alert("Alert with inline script");
};
$("#sentiment_training3").click(function(){
/* This is a work in progress yet */
alert("Using jQuery Inline");
});
</script>
</head>
<body>
<button id="sentiment_training" name="sentiment_training" class="btn btn-primary mb-2">jQuery in a file</button>
<button id="sentiment_training2" name="sentiment_training2" class="btn btn-primary mb-2" onclick="myFunction()">JavaScript Inline!</button>
<button id="sentiment_training3" name="sentiment_training3" class="btn btn-primary mb-2">jQuery Inline</button>
</body>
</html>
The reason this doesn't work is that the document is not yet loaded at the script's runtime. Moving your scripts to the end of body is a solution. You can also create an event, which will be triggered on document load and run your script afterward.
Put the code inside a $(document).ready(function() {}) block.
This ensures that the code will only run after document is "ready."
$(document).ready(function() {
$("#sentiment_training3").click(function(){
/* This is a work in progress yet */
alert("Using jQuery Inline");
});
})
Related
We have created sidebar for Google sheets and added few buttons to format data easily. But the problem is, these buttons work for the one who created the sidebar. For all other users they do nothing and functions don't get called. Functions themselves are fully tested and they work well. Seems like other users just can't call them on button click.
This is the code for sidebar (The functions are located in separate final.gs file):
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<button id="clean" >Clean Up Data</button><br>
<button id="categories" >Style Categories</button><br>
<button id="test" >Run All </button><br>
<button id="delete" >Delete All </button><br>
<script>
document.getElementById("test").addEventListener("click", function(){
google.script.run.call_all_funcions();
});
document.getElementById("clean").addEventListener("click", function(){
google.script.run.cleanUpData();
});
document.getElementById("categories").addEventListener("click", function(){
google.script.run.style_categories_WithBorders();
});
document.getElementById("delete").addEventListener("click", function(){
google.script.run.clearSheet();
});
</script>
</body>
</html>
What are we doing wrong? Or maybe there are some kind of permissions?
I tried to debug and returned error message. Turned out it was permission issues. The solution was to simply sign out of all Google accounts and then sign in with only the one that has permissions to edit the file. Now everything works.
I have following HTML,
$(document).ready(function() {
$('#searchMovieBtn').click(function(e) {
e.preventDefault();
console.log('search');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="searchMovieBtnBox">
<button class="btn btn-primary" type="button" id="searchMovieBtn">Search</button>
</div>
When I click on button, nothing happens, it seems like event is not triggering.
It is a caching issue. When you was developing and testing your JQuery code, your old code remained into the browser cache. Browser cached it to load page faster in next uses. In order to solve this problem you have 3 options.
Delete your browser history
Refresh your browser by pressing Ctrl + F5 (Preferred for developing purpose)
Tell browser that this JQuery code has changed by adding a version for it. It is used when you are publishing your code on the server because you can't ask your clients to delete their browser history or load your page by pressing Ctrl + F5
Here is how you could add version to your JQuery code:
<script type="text/javascript" src="js/script.js?v=1"></script>
Look at v=1. Next time when you updated your JQuery code change it to v=2 to tell browser that your code has been changed.
You can try the next thing,
First of all, your HTML markup I think it might be wrong as you are not pointing out correctly the folders.
I attached all the css and js bootstrap + jquery files through a CDN.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"</script>
<script type="text/javascript" src="js/script.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<title> jQuery button click event working?</title>
</head>
<body>
<div id="searchMovieBtnBox">
<button class="btn btn-primary" type="button" id="searchMovieBtn">Search</button>
</div>
</body>
</html>
Therefore,your script.js stays as it is.
For me it has worked like this. I got the message printed onto my console.
Hope that helps you.
Make sure you don't have another element in the HTML with the same id.
I am trying to call a HTML file when a button is clicked using jQuery.
Here is my html code:
<!DOCTYPE html>
<head>
<title>Buttons</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="buttonscript.js">
</script>
</head>
<body>
<input type ="button" id="myButton" value="Click Here">
<div id="dictionary">
</div>
</body>
</html>
then here is my script:
$(document).ready(function(){
$('myButton').click(function(){
$('dictionary').load('a.html');
return false;
});
});
You have two wrong things in your script:
You are not assigning the selectors with the right syntax;
You are using document ready syntax on an external file;
The first point is fixed using # before the id name and . before the class name (see below the fix).
The document.ready() function should be included into the html itself: it tells jquery to run the script only when the DOM is ready. Including it in an external file will make jQuery check for DOM ready on the external file and not on the one you are including to.
So move your script to the html itself and change it a bit:
.
$(document).ready(function(){
$('#myButton').click(function(e){
// prevent page submit
e.preventDefault();
// load the page into #dictionary
$('#dictionary').load('a.html');
});
});
Add # to your selectors like, and instead of using return false, you could prevent default behavior of the button (if the type attribute is set to submit).
$(document).ready(function(){
$('#myButton').click(function(event){
// prevent page submit
event.preventDefault();
// load the page into #dictionary
$('#dictionary').load('a.html');
});
});
I have a simple html with a button
I subscribed to mailchimp (newsletter and forms widget)
and I got from them a code for my site that works when
you load the page.
I want the page to execute the code (open the pop up)
only when I click the button. can you help me with it?
(I feel it's kind of a easy one but I'm get a bit scared
cause it's a script code - I don't know why...)
this is my page - in the head there's the script
<html>
<head>
<script type="text/javascript" src="//s3.amazonaws.com
/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-`config="usePlainJson: true, isDebug: false"></script>`
<script type="text/javascript">require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us7.list-manage.com","uuid":"d5b6774fb8bf432d69df52d93","lid":"3ed431a3b6"}) })</script>
</head>
<body>
<button type="button">Click Me!</button>
</body>
</html>
also,
I upload it to a server - so this is the page online:
http://judamenahem.com/popuplp2/popup.html
You just have to add to the onClick of the button the code which is in the head who load the current popup.
function myFunction() {
require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us7.list-manage.com","uuid":"d5b6774fb8bf432d69df52d93","lid":"3ed431a3b6"}) });
}
and use :
<button type="button" onclick="myFunction()">Click Me!</button>
You can use standard popup boxes (those boxes that most sites use for: "Hey, you won X, do you really want to leave?") to ask the person a question via alert().
Here is some documentation on them. http://www.w3schools.com/js/js_popup.asp
You would simply need to attach a ClickEventHandler onto your button in your JS that triggers alert().
function myFunction() {
alert("I am an alert box!");
}
<button type="button" onclick="myFunction()">Click Me!</button>
So when you Click on Submit button then it open alert box
There is also prompt() function, which lets the user interact with the box
I've been trying to figure out how to get a jquery dialog box to work. For the life of me, I can't get it to work. Here is some html with in-line javascript I've written:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function showDialog() {
$('#dialogBox').dialog();
}
</script>
</head>
<body>
<input type="button" value="Click me" onclick="showDialog();" />
<div id="dialogBox">
<p>This is the text of my dialog box.</p>
</div>
</body>
</html>
When I click the button in Internet Explorer, it says Object doesn't support this property of method. What am I doing wrong?
As far as I know, the dialog() function is part of jQuery UI, and it doesn't look like your code references the UI library. Try adding something like
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.3/jquery-ui.min.js" type="text/javascript"></script>
in the <head> below where you reference the jQuery library. This will pull in the Google-hosted version of the source.
I would imagine that the Google-hosted version includes lots of things you don't need, so you might be able to speed up loading times by downloading your own copy and only selecting the components that you need.
you can try to use this to open,
function showDialog() {
jq('#dialogBox').dialog('open');
}
or to close
function showDialog() {
jq('#dialogBox').dialog('close');
}