I have below code:
<a href="#" id="#item.Id" name="vote" ><img src="/Content/images/021.png" style="float:left" alt="" /></a>
which invokes an ajax call. on the first call. if the return is true, on the second call I want to make an alert box saying you can do vote only once.
<script type="text/javascript">
$(function () {
$("div.slidera_button a").click(function (e) {
var item = $(this);
e.preventDefault();
$.get('#Url.Action("VoteAjax","Home")', { id: item.attr("id") }, function (response) {
if (response.vote == "false") {
alert("foo.");
} else {
//something
}
});
})
});
</script>
this works, if i click on the button then refresh the page but it doesnt work, if i try to click twice.
I want to the user to be able to click multiple times and only after first one, they get a popup.
why this is not working?
how can i fix it?
EDIT: works in FF.. doesnt work in IE.
How about something like this:
<style type="text/css">
a.disabled {
opacity: 0.5;
/* whatever other styles you want */
}
</style>
<script type="text/javascript">
$(function () {
$.ajaxSetup({ cache: false });
$("div.slidera_button a").click(function (e) {
var item = $(this);
if (item.hasClass("disabled")) {
// alert when they vote
// you'll need to handle some way to add this
// server side to account for page reload, yes?
alert('You may only vote once');
}
$.get('#Url.Action("VoteAjax", "Home")'
, { id: item.attr("id") }
, function (response) {
// if this returns successfully, you voted.
item.addClass('disabled');
}
});
return false;
})
});
</script>
Use this script
<script type="text/javascript">
$(function () {
$("div.slidera_button a").live('click',function (e) {
var item = $(this);
e.preventDefault();
$.get('#Url.Action("VoteAjax","Home")', { id: item.attr("id") }, function (response) {
if (response.vote == "false") {
alert("foo.");
} else {
//something
}
});
})
});
</script>
Or JQuery Delegate method to trigger this click
Related
I have html table with a delete button. I want to delete the row on button click. For this purpose, when I click a button with class '.btn-danger' which will open a JQuery alert window. My problem is how to pass the $(this) of button click to the $.alert Yes function, so I can remove that row. I have my code below.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.1.0/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.1.0/jquery-confirm.min.js"></script>
$(document).ready(function() {
$('.btn-danger').on('click', function(e){
e.preventDefault();
var me = $(this);
var id = $(this).closest('tr').attr('id');
$.alert({
title: 'Alert!',
content: 'Are you sure you want to delete data?',
buttons: {
Yes: function (me) {
//pass value
},
No: function () {
//close function
}
}
});
});
});
Remove me from Yes: function (me) {} because you have already declared it. Then you can call it like below.
Yes: function() {
console.log(me)
},
$('.btn-danger').on('click', function(e) {
e.preventDefault();
var me = $(this);
var id = $(this).closest('tr').attr('id');
$.alert({
title: 'Alert!',
content: 'Are you sure you want to delete data?',
buttons: {
Yes: function() {
console.log(me)
//$("tr#" + id).remove() <--- example of removing the row
},
No: function() {
//close function
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.1.0/jquery-confirm.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.1.0/jquery-confirm.min.css" rel="stylesheet" />
<button class="btn btn-danger">delete</button>
You can try something like this code (If I correct understand you issue)
$(document).ready(function() {
$('.btn-danger').on('click', function(e){
e.preventDefault();
var me = $(this);
$.alert({
title: 'Alert!',
content: 'Are you sure you want to delete data?',
buttons: {
Yes: function () {
me.closest('tr').remove();
},
No: function () {
//close function
}
}
});
});
});
jsfiddle example
$(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');
});
}
I have the following jQuery code that when a hyperlink is clicked, it downloads the file of the hyperlink href. While it is preparing the file, it displays a please wait message.
The href code is:
<a class="fileDownloadCustomRichExperience" href="pdf.php">Report Download</a>
I want to be able to make the code below run using the $( document ).ready(function() { instead of $(document).on("click")
I tried the ready(function) but couldnt get the href to work.
Any suggestions?
Thanks
$(function () {
$(document).on("click", "a.fileDownloadCustomRichExperience", function () {
var $preparingFileModal = $("#preparing-file-modal");
$preparingFileModal.dialog({ modal: true });
$.fileDownload($(this).prop('href'), {
successCallback: function (url) {
$preparingFileModal.dialog('close');
},
failCallback: function (responseHtml, url) {
$preparingFileModal.dialog('close');
$("#error-modal").dialog({ modal: true });
}
});
return false; //this is critical to stop the click event which will trigger a normal file download!
});
});
* SOLVED BELOW: *
$(function () {
$( document ).ready(function() {
var $preparingFileModal = $("#preparing-file-modal");
$preparingFileModal.dialog({ modal: true });
$.fileDownload('pdf.php', {
successCallback: function (url) {
$preparingFileModal.dialog('close');
},
failCallback: function (responseHtml, url) {
$preparingFileModal.dialog('close');
$("#error-modal").dialog({ modal: true });
}
});
return false; //this is critical to stop the click event which will trigger a normal file download!
});
});
I want to have a timeout function so when a form is submitted the alert is displayed two seconds after the submit. The code I am using doesn't work:
$(document).ready(function() {
$("#newsletter").submit(function() {
setTimeout(function() {
alert("submitted");
}, 2000);
});
});
But when I change the 2000ms to 900 is seems to work fine:
$(document).ready(function() {
$("#newsletter").submit(function() {
setTimeout(function() {
alert("submitted");
}, 900);
});
});
How can I get the 2000ms to work?
The only possible reason for this is that your form is getting submitted and the user is taken to the new page (the form's action) before the 2 seconds elapse.
As suggested in Thilo's comment, if showing the alert is unavoidable, submit it via AJAX so that the current page (containing the code to alert) remains intact and therefore executes.
You can use like this. The problem with your original code was that, it got submitted before the alloted time.
$(document).ready(function() {
$("#newsletter").submit(function(e) {
e.preventDefault();
setTimeout(function() {
alert("submitted");
}, 2000);
});
});
You could change your code to this:
$(document).ready(function() {
$("#newsletter").submit(function(event) {
var element = this;
event.preventDefault();
setTimeout(function() {
alert("submitted");
//rest of the code
element.submit();
}, 2000);
});
});
Snippet:
$(document).ready(function() {
$("#newsletter").submit(function(event) {
event.preventDefault();
var element = this;
setTimeout(function() {
alert("submitted");
element.submit();
}, 2000);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form style="width:440px;" action="./" method="post" id="newsletter">
<input type="text"/>
<input type="submit" value="Submit"/>
</form>
I am having a problem with checkboxes. I have a series of photos in a form. Each photo has a checkbox. If a photo's checkbox is checked, a div associated with the photo is revealed using .show().
That works fine, and I am able to submit the form. However, if I press "back" on the browser to go back to the set of photos, the checkboxes are still checked, but the div associated with it is no longer visible.
What do I need to do in order to make sure the the checked photos still have visible divs even when going "back" to the page?
$(document).ready(function () {
$(':checkbox').change(function() {
var dataID = $(this).attr("id");
if($(this).is(':checked')) {
$("#content"+dataID).show();
}
else {
$("#content"+dataID).hide();
}
});
});
and the form is something like this:
<form>
<input name="box1" id="box1" type="checkbox" />
<input name="box2" id="box2" type="checkbox" />
<input name="box3" id="box3" type="checkbox" />
...
</form>
Try displaying the images for checked divs on page load, i.e. something like:
$(document).ready(function () {
$(':checkbox').change(function() {
// ... your code ...
});
$(':checkbox').each(function() {
var dataID = $(this).attr("id");
if($(this).is(':checked')) {
$("#content"+dataID).show();
}
else {
$("#content"+dataID).hide();
}
});
});
Cleaner Version
$(document).ready(function () {
$(':checkbox').change(function() { checkImage($(this)); });
$(':checkbox').each(function() { checkImage($(this)); });
});
function checkImage(_checkBox) {
var dataID = _checkBox.attr("id");
if(_checkBox.is(':checked')) {
$("#content"+dataID).show();
}
else {
$("#content"+dataID).hide();
}
}
Do something like this:
$(document).ready(function() {
$(':checkbox').change(function() {
ToggleContent($(this));
});
$(':checkbox').each(function() {
ToggleContent($(this));
});
function ToggleContent(chkbox) {
var dataID = chkbox.attr("id");
if (chkbox.is(':checked')) {
$("#content" + dataID).show();
}
else {
$("#content" + dataID).hide();
}
}
});