Javascript not working after postback caused by dropdown - javascript

Here is my Javascript which is working initialyy and not working after a postback.
<script type="text/javascript">
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).attr("value")=="cash"){
$(".cash").toggle();
}
if($(this).attr("value")=="cheque"){
$(".cheque").toggle();
}
if($(this).attr("value")=="dd"){
$(".dd").toggle();
}
});
});
</script>

Try like this
$('input[type="checkbox"]').on('click', (function () {
if($(this).attr("value")=="cash"){
$(".cash").toggle();
}
if($(this).attr("value")=="cheque"){
$(".cheque").toggle();
}
if($(this).attr("value")=="dd"){
$(".dd").toggle();
}
});
or you can use change event also

Related

How can I add an else statement to this Jquery?

$(document).ready(function(){
$("#start_quiz").click(function(){
$("#start_quiz").fadeOut(0);
$("#quiz_game").fadeIn('slow');
$("#answer_button").click(function(){
if($("#test").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#correct_answer').fadeIn('slow');
});
};
});
});
});
I have managed to get this jQuery code to work so that if the correct answer is in my form, it will fade out and display some text. I was wondering how I could design this so if any of the other four radio buttons were pressed, it could instead display other text (currently nothing happens). Thanks in advance for any help.
$(document).ready(function () {
$("#start_quiz").click(function () {
$("#start_quiz").fadeOut(0);
$("#quiz_game").fadeIn('slow');
$("#answer_button").click(function () {
if ($("#test").is(":checked")) {
$(".questions").fadeOut(200, function () {
$('#correct_answer').fadeIn('slow');
});
} else {
/* YOU WOULD PUT CODE HERE FOR INCORRECT ANSWER */
}
});
});
});
http://jsfiddle.net/24DeT/
if($("#test").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#correct_answer').fadeIn('slow');
});
}
else if($("#testotherone").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#otherone_answer').fadeIn('slow');
});
}
else if($("#testothertow").is(":checked")){
$(".questions").fadeOut(200, function(){
$('#othertow_answer').fadeIn('slow');
});
}

impress.js - Next and Previous buttons

I've looked at the other questions on this topic, and know that I have to do something like this:
I've created buttons:
<button id="next"></button>
<button id="prev"></button>
And then at the bottom of the page, I have this (this was taken from the other question here):
<script src="js/impress.js"></script>
<script>impress().init();</script>
<script>
$("#next").click(function () {
api.next();
});
$("#prev").click(function () {
api.prev();
});
</script>
But it isn't working at all; can someone give me a hand with this?
it works, if next-prev are in inside impress div
$('#next').on('click', function(e){
impress().next();
e.stopPropagation();
});
$('#prev').on('click', function(e){
impress().prev();
e.stopPropagation();
});
Replace your script this way:
<script>
$("#next").click(function () {
impress().next();
});
$("#prev").click(function () {
impress().prev();
});
</script>
Have you included jQuery? If not, add this too:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Jquery .click not firing

Trying to learn JQuery here, im starting off really simple.
When I click the button, the page reloads and nothing happens.
Heres my JS:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$("#submitShout").click(function() {
alert('hi');
});
</script>
Here's my html:
<div class="panel right">
<form name="shout" >
<textarea name="text" id="text" class="ribbitText"></textarea>
<input type="submit" id="submitShout" value="Ribbit!">
</form>
</div>
i think you forgot document.ready..
$(function () { //<--- here..the codes below is called whn document is ready
$("#submitShout").click(function () {
alert('hi');
});
});
Make sure you include jQuery reference and you code surrounded with
$(function(){
});
as
$(function () {
$("#submitShout").click(function () {
alert('hi');
});
});
or click binded at the end of the document
Just try this,
$("#submitShout").on("click", function() {
alert('hi');
});
If it is lower version Jquery, try this.
$("#submitShout").live("click", function() {
alert('hi');
});
jQuery 1.9 version
$(function(){
$("#submitShout").on('click',function(){
//your code
});
});
jQuery version lower than 1.9
$(function(){
$("#submitShout").live('click',function(){
//your code
});
});
that's a really old jquery version, upgrade it to something newer:
https://developers.google.com/speed/libraries/devguide#jquery
I guess Either you are missing the doc ready handler or the jQuery lib:
first try with this:
$(function(){
$("#submitShout").click(function() {
alert('hi');
});
});
then this one:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(function(){
$("#submitShout").click(function() {
alert('hi');
});
});
</script>
make sure jQuery is loaded
use the latest jQuery library
check the error console (using chrome developer tools or firebug for firefox
try changing your jQuery to
code:
$(function(){
$("#submitShout").click(function(e) {
e.preventDefault();
alert('hi');
return false;
});
});
Try this
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$("#submitShout").click(function(event) {
alert('hi');
event.preventDefault();
});
});
</script>

Jquery selector doesn't work

The code
<script type="text/javascript" src="jquery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert("Hello!");
});
$(".demo").click(function() {
alert("I am demo");
});
</script>
<body>
<button class="demo">click me</button>
</body>
The first Hello! is OK, but I am demo can't?What's the matter?
the similar question
jquery each selector doesnt work
Your click event handler is trying to bind to the demo button before the HTML body has rendered. You need to assign the event handler inside your $(document).ready function:
Change this:
$(document).ready(function() {
alert("Hello!");
});
$(".demo").click(function() {
alert("I am demo");
});
To this:
$(document).ready(function() {
alert("Hello!");
$(".demo").click(function() {
alert("I am demo");
});
});
Bind the click event inside ready()
$(document).ready(function() {
alert("Hello!");
$(".demo").click(function() {
alert("I am demo");
});
});
see this demo
$(".demo").live('click',function() {
alert("I am demo");
});​

Why isn't my callback function for this Jquery .post working?

Here is the code for the jquery:
<script type="text/javascript">
$(document).ready(function(){
$('#room').submit(function(){
$.post('backend/CreateRoom.php', $('#room').serialize() ,function(data) {
alert(1);
$('#llama').append(data);
console.log('working');
});
});
return false;
});
</script>
The function part does not seem to be working. The PHP code on the backend/CreateRoom.php seems to work fine(the code updates a PHP database) works fine, it just doesnt update the div, or do anything I put in the function. Help?
Looks like you are returning false on document ready. I think you want that on submit.
$(document).ready(function(){
$('#room').submit(function(){
$.post('backend/CreateRoom.php', $('#room').serialize() ,function(data) {
alert(1);
$('#llama').append(data);
console.log('working');
});
return false;
});
});
or prevent default:
$(document).ready(function(){
$('#room').submit(function(event){
event.preventDefault();
$.post('backend/CreateRoom.php', $('#room').serialize() ,function(data) {
alert(1);
$('#llama').append(data);
console.log('working');
});
});
});

Categories