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" ".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>
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/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./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/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".