Whenever the jQuery is triggered I recieve the error 500 Internal Server Error, does anyone have any ideas why the code below might be causing this?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="../meta/js/jquery-1.7.2.js"></script>
<script>
$(document).ready(function() {
$('#form1').submit(function(e){
e.preventDefault();
alert('I clicked it');
});
});
</script>
</head>
<body>
<form name="form1" method="post">
<button id="button">grab user data</button>
<select></select>
</form>
</body>
</html>
I'm gonna guess its because of this variable:
<%=button.ClientID %>
There is nothing else (shown) that would signify anything else that would throw an error.
Can you clarify what you mean by 'jQuery is triggered'? Does that mean upon 'click' ?
Or just by loading this page (I assumed the later)
I would guess that it's giving the error with this line:
$('#<%=button.ClientID %>')
Hard code a value instead and test it:
$('#buttonID')
In order to achieve what you want this will do the job:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#myButton').on('click',function(){
alert("i clicked it");
});
});
</script>
</head>
<body>
<button id="myButton">Click Me!</button>
</body>
</html>
$(document).ready is used to execute your code just after your page is rendered, then $('myButton') will get any element with an id "myButton", then you will use the method "on" to attach any event you want, in this case you will want to choose the "click" event, then you should give an anonymous function where you will put the code you would like to execute on that action.
Your button is inside a tag with action="". This will cause a postback to "/". If your server doesn't handle this correctly, you will get an internal server error.
if you only want the alert to show, you can call preventDefault on the jQuery event object. Se example below:
$(document).ready(function() {
$('#<%=button.ClientID %>').click( function(e) {
e.preventDefault();
alert("i clicked it");
});
});
EDIT:
Forget what i wrote above. It doesn't work. Instead, use the submit event on the form. Like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="#{'/public/javascripts/jquery-1.6.4.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
<script>
$(document).ready(function() {
$('#form1').submit(function(e){
e.preventDefault();
alert('I clicked it');
});
});
</script>
</head>
<body>
<form id="form1" method="post" action="">
<button id="button">grab user data</button>
<select></select>
</form>
</body>
</html>
you are attaching the submit event to #form1 but your form doesn't have an id, only a name. You must select the form by name, $("form[name='form1']") or give it an id of id="form1".
Related
Hello I came across a weird behavior with an onclick attribute regarding form submission.
Page on Server:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en-us" >
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Return Form Example</title>
<script type="text/javascript">
function doSomething(){
alert("hey");
return false;
}
</script>
</head>
<body>
<form action="submit.php" method="post">
<input type="submit" onclick="return doSomething()" value="click me!">
</form>
</body>
</html>
In this example, running on my server, when I click the submit button I get an alert saying hey and I stay on the current page. However, I tried to set this same example up on jsfiddle and I get an 404 error meaning the form was submitted. I cannot figure out why this occurs.
Here is the jsfiddle where I am trying to replicate the behavior on my server.
jsfiddle:
http://jsfiddle.net/46XSv/
You want to check the option "no wrap - in <head>" which is "Do not wrap the Javascript code, place it in section".
Select "no wrap - in <head>" under "Framework and extensions"
In this page you'll find the description of each of the options around the bottom: http://doc.jsfiddle.net/basic/introduction.html.
Also its a good practice to include semicolon at the end of your return statement, like the following:
<input type="submit" onclick="return doSomething();" value="click me!">
You should use onsubmit on the <form> element instead of onclick on the <input> element. It will work correctly.
I need to pass data from a web page to an iFrame hosted in that web page. I used window.postMessage. however the iFrame does not receive the event.
Here is my code snippet.
Parent page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test event listener</title>
</head>
<body>
<script type="text/javascript">
function SendMsgToIFrame() {
alert("In Parent window ");
var myiframe = document.getElementById('myIframe');
if (myiframe.contentDocument) {
myiframe.contentDocument.postMessage('Post Message from Parent', '*');
}
else if (myiframe.contentWindow) {
myiframe.contentWindow.postMessage('Post Message from Parent', '*');
}
</script>
<button type="button" onclick="SendMsgToIFrame()">Push to iframe</button>
<div id="iframeDiv">
<iframe id="myIframe" src="http://localhost:50000/Receiver.htm" width="500" height="200" frameborder=10>
</iframe>
</div>
</body>
</html>
Code snippet for Receiver.htm is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Got Text</title>
</head>
<body>
<script type="text/javascript">
window.attachEvent("onMessage", myhandler);
function myhandler(mobj) {
alert("I am in iFrame");
var message = mobj.data;
alert("data: " + message);
}
</script>
<input type="text" name="text1" id="text1" value="text here" />
</body>
</html>
I am running the parent page on Tomcat (localhost:8080). The iFrame is running on my HTTP server I built using the httplistener.
When I run the parent page and hit the button that generates the event, I do not get the alert "I am in iFrame". Looks like the iFrame is not receiving the event at all. What am I missing here?
Any help is very much appreciated. Thanks!
Your code has some strange parts. You're using attachEvent where it's better to use addEventListener and you should probably post to contentWindow, not document.
The problem with my code was this:
window.attachEvent("onMessage", myhandler)
onmessage should be all lower case.
Once I changed this line to the below, it worked.
window.attachEvent("onmessage", myhandler)
I posted the answer here: javascript cross domain iframe resize
And that link also has a link to sample working code on github.
No matter what I do, this page doesn't work at all. I want it to focus on the input box on load.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home Screen</title>
<style type="text/css">
input {border:0px;}
input:focus {outline:none;}
</style>
</head>
<body onload="document.getElementById("search").focus()">
<input id="search" />
</body>
</html>
I know I'm breaking a bunch of rules with this code, so you don't need to say anything about that.
EDIT:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home Screen</title>
<style type="text/css">
input {border:0px;}
input:focus {outline:none;}
</style>
</head>
<body onload="document.getElementById('search').focus()">
<input id="search" onblur="setTimeout(document.getElementById('search').focus(),10)" />
</body>
</html>
EDIT 2:
<script type="text/javascript">
function refocus()
{
setTimeout(document.getElementById("search").focus(),10);
}
</script>
<input id="search" onblur="refocus()" />
Double quotes cannot include double quotes,not only in javascript,any other language is the same.
<body onload="document.getElementById('search').focus()">
I'f you're using jquery:
$(function() {
$("#search").focus();
});
or prototype:
Event.observe(window, 'load', function() {
$("search").focus();
});
or plain javascript:
window.onload = function() {
document.getElementById("search").focus();
};
It's "Better" for readability than an inline event...
You have to put search into single quotes:
<body onload="document.getElementById('search').focus()">
Put search in single quotes, since you have double quotes around the document.getelementbyid
<body onload="document.getElementById('search').focus()">
Your experiencing this issue because you're using the same quotes inside the onfocus event, you can change "search" to 'search' to fix the issue.
<body onload="document.getElementById('search').focus()">
Ideally though, you should attach your events in JavaScript so your markup stays clear and all functional aspects of the page are located in one place.
jsFiddle
<script type="text/javascript">
window.onload = function () {
document.getElementById("search").focus();
}
</script>
Set some delay in your code by using setTimeout function to resolve this problem.
function fireOnClick() {
// Set text filed focus after some delay
setTimeout(function() { jQuery('#globalText').focus() }, 20);
// Do your work.....
}
sample:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('#test').load(function(){
alert(1);
});
});
</script>
<TITLE> test load </TITLE>
</head>
<body>
<div id="test">
TEST
</div>
</BODY>
$(window).load(function () { ... });
Load events only fire on elements that have a URL associated with them, like images. You can however bind to the window load event which fires when all the elements on a page have loaded.
Alternatively you can bind to the document.ready event handler that fires when the DOM is ready to be manipulated. In jQuery we do this like so:
$(function () {
//run code here
});
Update
If you add elements to the DOM, do work on them before doing so:
$('#button').on('click', function () {
$('body').append($('<div />').addClass('some-class').text('Some Text').on('click', function () { alert('Ouch! You poked me.'); }));
});
Notice I ran some jQuery functions on an element I created using jQuery before appending it to the DOM.
.load is used as an ajax function in essence. you are trying to use it like a DOM load event.
So can someone please tell why neither of these options will actually submit the form? I am trying to do something more complicated but I have boiled it down to this to try and figure out why I can't seem to get this form to submit using a click event and submit()
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#submitButton').click(function(e) {
e.preventDefault();
$("#testForm").submit();
});
$('#submitLink').click(function(e) {
e.preventDefault();
$("#testForm").submit();
});
});
</script>
</head>
<body>
<form action="javascript:alert('submitted');" method="post" id="testForm">
<label>Name</label>
<input type="text" name="name" value="" />
<input type="submit" name="submit" value="Submit" id="submitButton" />
<p>Submit Form</p>
</form>
</body>
</html>
Thank you!
it's because the name of the submit button is named "submit", change it to anything but "submit", try "submitme" and retry it. It should then work.
Why not simply use the submit button to run the code you want. If your function returns false, it will cancel the submission.
$("#testForm").submit(function() {
/* Do Something */
return false;
});
If you have a form action and an input type="submit" inside form tags, it's going to submit the old fashioned way and basically refresh the page. When doing AJAX type transactions this isn't the desired effect you are after.
Remove the action. Or remove the form altogether, though in cases it does come in handy to serialize to cut your workload. If the form tags remain, move the button outside the form tags, or alternatively make it a link with an onclick or click handler as opposed to an input button. Jquery UI Buttons works great in this case because you can mimic an input button with an a tag element.
Using jQuery button click
$('#button_id').on('click',function(){
$('#form_id').submit();
});
Do you need to post the the form to an URL or do you only need to detect the submit-event? Because you can detect the submit-event by adding onsubmit="javascript:alert('I do also submit');"
<form action="javascript:alert('submitted');" method="post" id="testForm" onsubmit="javascript:alert('I do also submit');">...</form>
Not sure that this is what you are looking for though.