Develop Reference

My javascript click event run on second click but not on first

function loadToFalloutPopup() {
$('#fallout-all-modal').modal({
backdrop: true,
keyboard: true
});
}
$document.on('click', '.all-fallout-btn', loadToFalloutPopup)
});
Html:
<button type="button" class="all-fallout-btn" data-dismiss="modal">To Fallout</button>
JQuery click event fires on second click but not on first. I dont know what is gong on, please help.

Try this:
function loadToFalloutPopup() {
$('#fallout-all-modal').modal({
backdrop: true,
keyboard: true
});
}
$(document).ready(function() { // always write any event on $(document).ready
$(document).on('click', '.all-fallout-btn', function() { // use click event like this
loadToFalloutPopup();
});
})

Try this
$(document).on('click', '.all-fallout-btn', function(){
loadToFalloutPopup()
});
var count=0
function loadToFalloutPopup() {
count++
$('#spanCount').text(count);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="all-fallout-btn" data-dismiss="modal">To Fallout</button><br/><span id='spanCount'>0</span>

Dynamically added partial view with DatePicker not working as expected

I have a Partial view (_SubView) which is having multiple controls
<script type="text/javascript">
$(document).ready(function () {
$(".datepicker").datepicker({
showOn: 'both',
dateFormat: 'dd-MM-yy',
buttonImage: "#Url.Content("~/Content/Images/Icons/Calendar.png")" , //"../../Content/Images/Icons/Calendar.png",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
//altFormat: 'yymm',
onClose: function (dateText, inst) {
$(this).datepicker();
$(this).change();
}
});
$(".datepicker").datepicker().keydown(function (e) {
e.preventDefault();
// TAB: 9
// LEFT: 37
// UP: 38
// RIGHT: 39
// DOWN: 40
// IE OTHER
var code = e.keyCode || e.which;
DatePickerKeyDownEvent($(this).val(), code);
if (currentDate != null) { $(this).datepicker("setDate", currentDate); }
});
});
</script>
#using(Html.BeginCollectionItem("form")
{
// A set of labels and dropdown controls
#Html.TextBoxFor(x => x.MaturityDate, new { #class = "datepicker", #title = "Enter Maturity Date",id="date-picker" })
}
In main view, I have a button "Add New Item". When ever user clicks on Add New Item, _SubView will be added to the main view dynamically.
Question:
When ever user dynamically add multiple partial views to the main view and try to change individual maturity date , date is changing only in the initially added partial view.
But when user tries to change the date using keydown event, respective date control is changing correctly without any issues.
Can anyone help me where exactly I am doing wrong?
Regards

I believe the problem is happening because you set the input id to "date-picker",
remove id="date-picker"

Disable Esc key on Kendo Window Popup

I am using KendoUI controls with JavaScript with MVC. I have a popup window create by "kendoWindow".
its working fine, but when i press ESC key it will automatically close.
I want to disable the ESC key so that window popup can be only closed by Cancel button or close button.
Here is my Kendo Window code.
var wndEditClient= $("#divEditClient")
.kendoWindow({
title: "Edit Client",
modal: true,
visible: false,
resizable: false,
width: 450,
actions: ["Close"]
}).data("kendoWindow");
wndEditClient.open();
Please Suggest.
I tried JavaScript keypress event and all that but does not work.
$(document).bind("keypress", function (e) {
if (e.keyCode == 27) {
e.preventDefault();
}
});
Tried this but not working.

Put this before including your first Kendo Window directive:
$(function () {
kendo.ui.Window.fn._keydown = function (originalFn) {
var KEY_ESC = 27;
return function (e) {
if (e.which !== KEY_ESC) {
originalFn.call(this, e);
}
};
}(kendo.ui.Window.fn._keydown);
});
(demo)

Display panel over another panel for web app

I was looking for an answer, but could not find anything helpfull yet.
I have a gridview with some data (from SQL database) and an option to delete a row. Before deleting the row I want the user to confirm the delete (pupup window). I know how to create a popup with javascript, but I don't like the apperance of that popup. I would like to make ky own "popup".
I was thinking of overlaying one panel (where I put text (Label) and some buttons (OK, Cancel)) over the panel where I have the gridview. Something like in the picture. How would I accomplish something like that?

How about using the Ajax control toolkit popup?
http://www.asp.net/ajaxlibrary/act_Popup.ashx
This seems to do exactly what you are looking for for you.

What about JQueryUI dialog with custom styling?

Use the jQuery UI dialog
Example:
<script type="text/javascript">
$(function () {
var $dialog = $("#dialog");
var $foo = $("input:submit[id$=foo]");
var confirmed = false;
$dialog.hide();
$dialog.dialog({
width: "300px",
modal: true,
autoOpen: false,
buttons: {
OK: function (e) {
$dialog.dialog("close");
confirmed = true;
$foo.click();
},
Cancel: function (e) {
$dialog.dialog("close");
confirmed = false;
}
}
});
$foo.click(function (e) {
if (!confirmed) {
$dialog.dialog("open");
}
return confirmed;
});
});
</script>
Full working example can be downloaded from here

Using Asp button in jquery dialog

I have a problem in my code when I'm using an Asp button in a jquery dialog where modal is set to "true".
Here is my code :
Js
$(document).ready(function () {
var dlg = $("#mws-jui-dialog").dialog({
autoOpen: false,
title: "Delete",
modal: true,
width: "640",
minHeight : 160,
minWidth : 170
});
dlg.parent().appendTo(jQuery("form"));
$("#btnDelete").bind("click", function (event) {
$("#mws-jui-dialog").dialog("option", { modal: true}).dialog("open");
event.preventDefault();
});
$("#btnClose").bind("click", function (event) {
$("#mws-jui-dialog").dialog("close");
event.preventDefault();
});
});
On my aspx page :
asp:Button runat="server" ID="bidon" CssClass="mws-button green" OnClick="DeleteButton_Click" Text="Yes"
And on my cs :
protected void DeleteButton_Click(object sender, EventArgs e)
{
Response.Redirect("mypage.aspx");
}
When i set modal to false it's working fine but as i've understood that modal disable items on my page, i'm looking for a way to use my asp button when modal is at true (or just a another way to fix it).

I know your question is a few months old but if I understand it correctly... In your mws-button green CSS class. Include the z-index: property and set it too 1000. This will ensure that your button sits on top of the modal bkgd.
.mws-button green
{
z-index: 1000;
}
Let me know if this helps.