We Keep Coding

Why the delete function is not working?

Following is a part of my to-do list application. The delete function is not working properly
function deleteTodoItem(e, item) {
$(item).parent().remove();
};
$(function() {
$("#MyList").on('click', '.todo-item-delete', function(e) {
var item = this;
deleteTodoItem(e, item)
})
});

function deleteTodoItem(elem) {
elem.parent().remove();
};
$(function() {
$("#MyList").on('click', '.todo-item-delete', function() {
deleteTodoItem($(this))
})
});
short code
$(function() {
$("#MyList").on('click', '.todo-item-delete', function() {
$(this).parent().remove();
})
});

jQuery file download - ready function instead of click function

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!
});
});

Blur/focus event (delegeted) on inputs in iframe

I have an iframe on a page. In iframe there are few inputs in a form tag and more can be loaded via ajax.
I'm tring to bind blur or focus event to this inputs but it doesn't work. Other events, such as click works very well.
$(function () {
$("iframe").each(function () {
$(this).load(function () {
$(this).contents().find("input").focus(function() { // works but this is only for existing inputs
alert(1);
});
$(this).contents().find("form").on("click", "input", function (e) { // works
alert(1);
});
$(this).contents().find("form").on("focus", "input", function (e) { // doesnt work
alert(1);
});
});
});
});
Thanks in advance.

To select inputs and forms inside the iframe try this:
$(function () {
$("iframe").each(function () {
$(this).load(function () {
$(this).contents().find('body').find("input").blur(function() {
alert(1);
});
});
});
});

Bind events inside jsrender template

All my links .delete and .editRight within addedTemplate isent working. All the same links outside works just fine.
$(document).ready(function () {
AjaxGetAll();
$(".delete").on("click", function () {
//do stuff
});
$(".editRight").on("click", function () {
//do stuff
});
function AjaxGetAll() {
$.ajax({
success: function (data) {
if (data.hasOwnProperty("d")) {
var favs = data.d;
if (favs.length > 0) {
$("#addedList").html(
$("#addedTemplate").render(favs)
);
}
}
});
}
<script id="addedTemplate" type="text/x-jsrender">
<div class="wrapright">
<a id="editRight_{{>TimePin}}" class="editRight">Edit</a>
<a id="deleteRight_{{>TimePin}}" class="delete">Delete</a>
</div>

use event delegation based on .on() to register events for dynamically added contents
$(document).on("click", '.delete', function () {
//do stuff
});
$(document).on("click", '.editRight', function () {
//do stuff
});

Alert after second click

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