Chrome packaged app, how to submit form - javascript

I'm new in Chrome packaged apps and have two questions (that actually solves one problem).
I'm trying to do a simple form to send some data to a remote server, using Ajax and POST. As I understand, I can't use inline javascript ( tags) and also, I can't use events on the HTML button element. So, I've no idea where to put my javascript and what to execute when the button is clicked. My forms is as simple as this:
<!DOCTYPE html>
<html>
<head>
<script>
function send(){
//do some ajax
}
</script>
</head>
<body>
<img id="headerImage" name="headerImage" src="logo_main.gif"/>
<div>
<form>
<table>
<tr>
<td>Send:</td>
<td><input type="text" size="32" id="send" name="send"/>
</tr>
<tr>
<td colspan="2"><button id="send">Send</button>
</tr>
</table>
</form>
</div>
</body>
</html>
So my two questions are: where do I put my javascript? and how do I execute a javascript function from my HTML button element?
Thanks a lot!
P.D. I've searched for complete documentation about this, but can't find it. I'll very thankfull if some one posts a link with the complete documentation.

Your question's title does not really correspond to your question (edit it, maybe?). Answering your questions as quoted:
So my two questions are: where do I put my javascript? and how do I
execute a javascript function from my HTML button element?
Both of those questions are answered in documentation on Content Security Policy, with an example. Your JavaScript code should go in a separate file that you include with a <script> tag, and you need to bind event listeners from within that code.
To make this a proper answer, here's how to do it in your case, with jQuery (for non-jQuery solution see docs mentioned). To use, add jQuery as "jquery.js" in your app's files.
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script src="form.js"></script>
</head>
<body>
<!-- ... -->
<button id="send">Send</button>
<!-- ... -->
</body>
</html>
form.js:
function send(){
//do some ajax
}
// Use document ready to wait for DOM to be created
$(document).ready(function(){
$('#send').click(send); // Binds a listener for onclick event
});

Related

How I build code such http://fiddle.jshell.net/bwKZt/152/ - HTML & Javascript

I need build code such : http://fiddle.jshell.net/bwKZt/152/
but my code dosen't work ! I am a beginner. Please help me.
index.php:
<!DOCTYPE html><html>
<head>
<script>
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
Some of the JavaScript here isn't native JavaScript , but is using a plugin called jQuery that makes searching and manipulating HTML elements easier.
When you see $(), that's the jQuery way of finding elements. But it won't work because you don't have jQuery referenced at all.
If you don't want to use jQuery, you can find elements with something like document.getElementById('label').
But lots of people use jQuery to make referencing page elements short and sweet, as with $('#label').
Try to reference jQuery first, like:
<!DOCTYPE html><html>
<head>
<!-- The below line references an externally hosted copy of jQuery 2.2.4 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
// The below chunk is telling it to bind to the keyup event only AFTER the document has fully loaded.
// Sometimes when your binding code is executed, the elements you wish to bind to aren't loaded yet.
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
});
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
The first problem is because you haven't include jquery with a script tag to solve that add this code in the head of you html file if you have the Internet connection to load Jquery from CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
or you can download Jquery file from Jquery site and you will have it locally
after that you must execute this code after the executing the jquery ready function
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
})

Jquery Not Being Processed

The below Jquery does not run within my browser even though the syntax is correct( checked via online syntax checker) and the functions do run (tested with pure JS). Why is it that so?
I apologize in advance if the answer to this question is rather simple but after 15min of googling I could not arrive at an answer.
JAVASCRIPT:
document.getElementById('overlay').addEventListener('click', function( {
closeLightBox()
});
function closeLightBox() {
$("#overlay").fadeOut(1000);
}
function lightbox(x) {
}
HTML
<!DOCTYPE html>
<html>
<head>
<title> Lightbox </title>
<link rel="stylesheet" type="text/css" href="lightboxcss.css">
</head>
<body>
<div id = "overlay"> </div>
<img src="batman.jpg" alt="" href="javascript:void(0)" onclick="lightbox(1)" id="batman" style="height:100px;width:160px;margin-left:45%;margin-top:16%;">
<br><br><br><br>
<p> RANDOM TEXT STUFF </p><br><br>
<p> 328ueekfuuirgh40t43h8hohro8ht </p>
<script src="lightboxjs.js"> </script>
</body>
</html>
I assume that javascript code is located in your .js file "lightboxjs.js". Did you include the jQuery library anywhere?
If you don't, start by adding this line <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> before including your custom javascript file.
$(document).ready(function(){
//page is ready
$("#overlay").on("click",function(){
this.fadeOut(1000);
});
});
You cannot add an eventlistener if the dom isnt loaded. Also dont forget to include jquery before executing the upper script
...
Where are you calling the jquery lib? You need to load the jquery just above lightboxjs.js and may as well use jquery syntax to listen to the #overlay click event.

JQuery Failed to Handle Button's On Click Event

I know this question may be stupid, but I'm new to JQuery and failed to guess (even after hard search at Google) Why My Function failed to Show me Alert on Click Event of Button, (I'm trying to do more tasks but for debugging purpose I'm showing alert).
<!DOCTYPE html>
<html>
<head>
<title>WebSite Title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
$(document).ready(function(){
$('#foo').click(function(){
alert('ggg');
});
});
</script>
</head>
<body>
<input type="button" name="" value="Get Data" id="foo">
</body>
</html>
As #Pranav mentioned, you should separate the scripts, so each can work.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquer‌​y.min.js"></script>
<script>
$(document).ready(function() {
$('#foo').click(function() {
alert('ggg');
});
});
</script>
I'm Totally Agreed with Answers of above two users, You have to Put Your Code away from the tags referencing the Libraries, What you need to do is place your logical code may be of Javascript or JQuery in Another Script Tags

is it possible to call a .vbs file from javascript in html?

1)test.vbs
Function demo()
msgbox "Welcome to Follow Tutorials"
End Function
2)test1.html
<meta http-equiv="x-ua-compatible" content="IE=10">
<title>Follow Tutorials</title>
<script type="text/vbscript" src="test.vbs"></script>
</head>
<body>
<h2>Placement of VBScript in head section</h2>
<input type="button" onclick="demo()" value="Follow Tutorials"/>
<p>Click to see event </p>
</body>
Above is the code i am trying to run as a simple example .The function demo() is in separate file test.vbs which i want to call fro html page on click of button.
I am using IE11 and vbscript is not supported by IE11.So is there a way i can call a vbs file from javascript in html?
Please note if removed html tag in this post as it dint allow me to post the question
IE11 is trying to remove support for VBScript so adding <script language="vbscript"> will not work. Looking at this question should help you figure out a workaround. Please post your workaround to your question if you come up with one.

Jquery toggle() and click() functions not working in internet explorer 11?

Here is my Jquery code.Please have a look through it and do help me?
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$("#rec").click(function() {
$("#tab1").toggle();
});
</script>
<input type="button" class="button" id="rec" value="Sample"/>
<div id="tab1">
Hello this is a sample jquery toggling function.
</div>
Just wrap your Jquery code inside $(document).ready(function(){}) as shown below :-
<script type="text/javascript">
$(document).ready(function(){
$("#rec").click(function(event) {
event.preventDefault();
$("#tab1").toggle();
});
});
</script>
Read More on $(document).ready() here.
Working Demo
It seems that there is an error while loading JQuery try this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Use $(document).ready(function(){}, to execute the js code when then document will be loaded or put your scripts just before the </body> tag.
I ll take a guess here. (I'm feeling lucky!) (update:seems i wasn't lucky but read this anyway it's usefull)
Your code does not work because you say "do something when the html element with id="rec" is clicked" and "do something to the html element with id="tab1""
My guess is, you have more than one html element with id="rec" and/or more than one html element with id="tab1" in your code.
id value of html elements must be unique across a webpage! If there are more than one html elements with the same id then the jquery selector doesn't know when to fire, and also browsers behavior can be unexpected. This may be the cause of internet explorer nagging.
You need to add compatibility meta just after <head> tag:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />

Categories