Develop Reference

$(document).ready() is not working after coming back from another page

I am developing an application in asp.net using c#. In my page I have done ajax call to load the page with html. The html code is coming from the database. This ajax call is written in the document.ready() function. When I am first time loading the page its working fine. When I am going to another page, that is also working fine. But when I am trying to coming back from that page then the document.ready() is not working. For that reason the html code is also not getting populated. How can I solve this issue please help me out from here.
Document.ready() code is as follows:
$(document).ready(function () {
tempName = GetParameterValues("templateName");
//alert(tempName);
if (tempName != "" || tempName != null) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "DesignCenter_Static.aspx/loadTemplatePackage",
data: "{'template_name':'" + tempName.toString() + "'}",
dataType: "JSON",
success: function (data) {
var temp_data = data.d.toString();
var temp_arr = new Array();
temp_arr = temp_data.split("|");
$("#divTemplateLayout").html(temp_arr[0].toString());
$("#inputForm").html(temp_arr[1].toString());
$("#divButtonSet").html(temp_arr[2].toString());
$("#inputForm").find('[id^="txt"]').each(function () {
var cName, labelControlName, divControlName, resizeClassName, existingClassName, txtName;
txtName = $(this).attr("id");
cName = txtName.slice(3, txtName.length);
divControlName = "lbl" + cName;
$("#" + divControlName + "").resizable({
maxWidth: 300,
minHeight: 16,
minWidth: 50,
containment: "parent",
autoHide: true,
handles: "n, e, s, w, ne, se, sw, nw"
});
$("#" + divControlName + "").draggable({ cursor: 'move', containment: ".setLimit" });
});
},
error: function (result) {
alert("Error");
}
});
}
$("#ddlZoom").val("100%");
currentZoomLevel = $("#ddlZoom").val();
fillInitialDesignStudio();
});
Back Button Code of another page is as follows:
$(function () {
$("#btnBack").click(function () {
var resPage = GetParameterValues("responsePage");
var tempName = GetParameterValues("templateName");
window.location.href = resPage + "?returnPage=BC_Proof.aspx&templateName=" + tempName;
});
});
Master page code for adding jquery library:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.placeholder.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/holder.js"></script>
<%--<script src="js/colpick.js" type="text/javascript"></script>--%>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="js/placeholders.min.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.js"></script>
<script type="text/javascript" src="js/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="js/spectrum.js"></script>
<script type="text/javascript" src="js/scolor.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.js"></script>
<script src="js/ui/jquery.ui.core.js"></script>
<script src="js/ui/jquery.ui.widget.js"></script>
<script src="js/ui/jquery.ui.button.js"></script>
<script src="js/ui/jquery.ui.position.js"></script>
<script src="js/ui/jquery.ui.menu.js"></script>
<script src="js/ui/jquery.ui.autocomplete.js"></script>
<script src="js/ui/jquery.ui.tooltip.js"></script>
Thanks in advance

issue is templateName not getting properly , Check Ajax data,
data: "{'template_name':'" + tempName.toString() + "'}",
Your BackButton Code:
var tempName = GetParameterValues("templateName");
use GetParameterValues("template_name"); instead of GetParameterValues("templateName");

DatePicker not displaying properly in Bootstrap ASP.NET MVC 5

I have a date picker in my form and it is not displaying properly in any browser
<div class="col-md-10">
#Html.TextBoxFor(model => model.DateJoined, new { #class = "datepicker" })
#Html.ValidationMessageFor(model => model.DateJoined)
</div>
I have added jquery UI and added Javascript like this:
<script src="~/Scripts/jquery-2.1.1.js"></script>
<script src="~/Scripts/jquery-ui-1.10.4.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script type="text/javascript">
$(function () { // will trigger when the document is ready
$('.datepicker').datepicker(); //Initialise any date pickers
});
</script>
And this is how it is displaying in UI:

Demo
JQuery UI
You need to include following files
//css file jQuery UI
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
//jQuery file js reference.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
//jQuery UI js reference.
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

In the App_Start/Bundle.config
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.min.css",
"~/Content/site.css",
"~/Content/jquery-ui.css"));

Jquery Dialog not open in my simple code

What is wrong for the Jquery Dialog not opening when i click in the button?
Below you can see a simple code of the problem.
Code:
#model IEnumerable<TPTMVC.Models.User>
#using TPTMVC.Models;
#{ViewBag.Title = "Index";}
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready
(
function ()
{
$("#opener").click(function () {
$("#dialog100").dialog("open");<--Not opening
});
$("#dialog100").dialog({ autoOpen: false });
}
);
</script>
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<button id="opener">open the dialog</button>
<div id="dialog100" title="Dialog Title">I'm a dialog</div>
Result:
I'm using entity-framework with C#.
Update
$(document).ready(function () {
$('#opener').click(function () {
alert("Click");//It's show
$('#dialog100').dialog('open');
return false;
});
$('#dialog100').dialog({ autoOpen: false });//After
});
In this case the alert work
$(document).ready(function () {
$('#dialog100').dialog({ autoOpen: false });//Before
$('#opener').click(function () {
alert("Click");//it's not show
$('#dialog100').dialog('open');
return false;
});
});
In this not.
The solution:
#section Scripts {
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#dialog100').dialog({ autoOpen: false });
$('#opener').click(function () {
alert("Bum");
$('#dialog100').dialog('open');
return false;
});
});
</script>
}
It was missing #section Scripts
Thanks for any help!

try $('#dialog100').dialog('open');
or...
$(document).ready(function () {
$('#dialog100').dialog({ autoOpen: false });
$('#opener').click(function () {
$('#dialog100').dialog('open');
return false;
});
});
EDIT: based on comments
Use Chrome, hit F12, and check resources to make sure you're loading them...
Your screen should look like this, only the button displayed...
The click event should then show the dialog...
Is this view wrapped in the _layout? if so, you are missing a section. Usually, the _layout file will have a scripts section, and you will need to have your JS code in this scripts section in your view...
Layout.cshtml
#RenderSection("scripts", required: false)
view.cshtml
#section Scripts { ..jquery scripts..}

It appears that your set up of the dialogue happens within the click event, so it doesn't get set up properly. It needs to happen outside of the click event.
Here's a working example...
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Animation</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>

Opening a modal window using jqueryUI in asp.net mvc 4 with VS2010

I am trying to open a modal window in my asp.net mvc 4 project on click of a link. Nothing happens with the code that I have written. What am I missing? I have referenced these links in my site master.
<link type="text/css" href="#Url.Content("~/Content/custom.css")" rel="Stylesheet" />
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-1.9.1.js")" ></script>
<script type="text/javascript" src="#Url.Content("~/Scripts/jquery-ui-1.10.3.custom.min.js")"></script>
Here is my code
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/SiteMaster.cshtml";
}
<div id="dialogMsg" title="I'm Title of dialog">
Hello I'm dialog body.
</div>
Open Dialog
<script type="text/javascript">
$(document).ready(function () {
$("#dialogMsg").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Do something": function () {
var bValid = true;
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
allFields.val("").removeClass("ui-state-error");
}
});
$('#thelink')
.click(function () {
$('dialogMsg').dialog('open');
});
});
</script>

You've missed the # on the selector that actually opens the dialog. See here:
$('#thelink')
.click(function () {
$('dialogMsg').dialog('open');
});
Change it to:
$('#thelink')
.click(function () {
$('#dialogMsg').dialog('open');
});

How to use TimePicker to DatePicker MVC3 C#

I'm struggling to understand how to combine the TimePicker http://trentrichardson.com/examples/timepicker/ solution to my existing ASP.Net MVC3 C# site that uses DatePicker. DatePicker is currently working fine on it's own, but I need to add the time as well as the date, and TimePicker looks perfect for what I need, only I'm not sure how to implement it.
I see the example gives this code:
$('#example1').datetimepicker();
but I am unsure how to work it into my existing site / DatePicker function.
I have made sure I include these JS files in the HEAD section on the _Layout page, as well as adding the CSS to my existing DatePicker CSS file (jquery-ui-1.7.3.custom.css):
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.7.3.custom.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-sliderAccess.js")" type="text/javascript"></script>
and on my View page I have this code which displays the input and calls the DatePicker function (this works fine in its current form):
#model test.Models.News
#{
ViewBag.Title = "Create";
}
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<div class="editor-label">
#Html.LabelFor(model => model.News_Date)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.News_Date, "News_Date", new { #ID = "News_Date" })
</div>
<p>
<input type="submit" value="Create" />
</p>
}
<script type="text/javascript">
$(document).ready(function () {
$("#News_Date").datepicker({
showOptions: { speed: 'fast' },
changeMonth: false,
changeYear: false,
dateFormat: 'dd/mm/yy',
gotoCurrent: true
});
});
</script>
I am unsure how to install the TimePicker function so it works with DatePicker on my MVC3 site.
I'd appreciate an explanation if someone wouldn't mind?
Many thanks.

You simply replace your datepicker call with datetimepicker in the view and provide the necessary arguments for both:
<script type="text/javascript">
$(document).ready(function () {
$('#News_Date').datetimepicker({
// Arguments for the date picker
showOptions: { speed: 'fast' },
changeMonth: false,
changeYear: false,
dateFormat: 'dd/mm/yy',
gotoCurrent: true,
// Arguments for the time picker
showSecond: true,
timeFormat: 'hh:mm:ss',
stepHour: 2,
stepMinute: 10,
stepSecond: 10
});
});
</script>