I have a Partial View that contains a DropdownList and a Label. The initial value of the Label is blank and the Dropdown says "Select option". I have a script at the bottom of the Partial View to handle the On Change event of teh dropdown list but it never gets fired. I have put a breakpoint at the start of it but the IDE just shows that this breakpoint will never be hit.
Code for Partial View:
#*model IEnumerable<ArdentTestv6.Repositories.SelectProjectTypes_Result>*#
#*model ArdentTestv6.Repositories.ProjectListEntities*#
#Html.DropDownList("ProjTypeName",
(IEnumerable<SelectListItem>)ViewBag.ptName, "Select option", new {
#id="pType" })
<label id="ptid">
</label>
<script type="text/javascript" language="javascript">
$("#pType").change(function () {
debugger;
$.ajax({
url: "ProjectTypes/_ListProjectTypes",
method: "POST",
data: "TypeID=" + $(this).val(),
dataType: "json",
success: function (response) {
window.location.reload();
$("#ptid").val = $(this).val()
// handle
}
});
});
</script>
When the Parent View is loaded the Dropdown is populated and rendered correctly. The HTML Source code for the Rendered Parent View as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create - My ASP.NET Application</title>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<img src="/Images/logo.jpg" width="576" height="73" />
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Projects</li>
<li>Housekeeping</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
<!--<h2>Create New Project</h2>-->
<br />
<form action="/ProjectLists/Create" method="post"> <div class="form-horizontal">
<h4>Create New Project</h4>
<hr />
<div class="form-group">
<label class="control-label col-md-2" for="Project_Type">Project Type</label>
<div id="ddlDiv" class="col-md-10">
<select id="pType" name="ProjTypeName"><option value="">Select option</option>
<option value="1">DCO</option>
<option value="2">CPO</option>
<option value="3">TWA</option>
</select>
<label id="ptid">
</label>
<!--<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript">
</script>-->
<script type="text/javascript" language="javascript">
$("#pType").change(function () {
debugger;
$.ajax({
url: "ProjectTypes/_ListProjectTypes",
method: "POST",
data: "TypeID=" + $(this).val(),
dataType: "json",
success: function (response) {
window.location.reload();
$("#ptid").val = $(this).val()
// handle
}
});
});
</script>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="ProjectReference">ProjectReference</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="ProjectReference" name="ProjectReference" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="ProjectReference" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="ProjectName">ProjectName</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="ProjectName" name="ProjectName" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="ProjectName" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="ProjectDescription">ProjectDescription</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="ProjectDescription" name="ProjectDescription" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="ProjectDescription" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="ProjectManager">ProjectManager</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="ProjectManager" name="ProjectManager" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="ProjectManager" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="DateStart">DateStart</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field DateStart must be a date." id="DateStart" name="DateStart" type="datetime" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="DateStart" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="DateCompleted">DateCompleted</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field DateCompleted must be a date." id="DateCompleted" name="DateCompleted" type="datetime" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="DateCompleted" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
</form>
<div>
Back to List
</div>
<hr />
<footer>
<p>© 2018 - Logged in as Ardent-HP\Ardent</p>
</footer>
</div>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
{"appName":"Chrome","requestId":"ca5d6b107cc64804abbd651be07c37d8"}
</script>
<script type="text/javascript"
src="http://localhost:54821/a94212cdd4c04322a8b3d6a88ccab368/browserLink"
async="async"></script>
<!-- End Browser Link -->
</body>
</html>
Related
i want to pass All Input values of View to My Partial View(Passing User Order to Show Order Summary) but all values got null in partial View Below is My Code.
Submit
<div id="myModal_#Model.CustRef" class="modal fade" role="dialog">
<div class="modal-dialog" style="position:absolute; left:10%;">
<!-- Modal content-->
<div class="modal-content" style="width:80vw;">
<div class="modal-header ">
<h4 class="modal-title"><i class="fas fa-shopping-cart"></i> Order Summary</h4>
<button type="button" class="close" data-dismiss="modal">Back</button>
</div>
<div class="modal-body">
...Disabled Inputs...
</div>
</div>
</div>
</div>
My Create Order View
<form asp-action="Create">
....
#*<partial name="~/Views/Order/OrderSummary.cshtml" model="Model" />*#
#await Html.PartialAsync("~/Views/Order/OrderSummary.cshtml", new OrderViewModel() { cus_name = Model.cus_name, cus_phone = Model.cus_phone, CustRef = Model.CustRef, Phoneid = Model.Phoneid, modelId = Model.modelId, Quantity = Model.Quantity, Address = Model.Address, CityId = Model.CityId, Date = Model.Date, store_id = Model.store_id })
</form>
Second Question
My Second Question is i have large data to pass to View(Admin Dashboard) to Complete Statistics but its taking too much time. Please tell me any other Efficient way to increase performance.
You need to pass the current input model to the controller through ajax and return
to render the new partial view.
Please refer to the following code:
Controller:
public class OrderController : Controller
{
public IActionResult Index()
{
OrderViewModel orderView = new OrderViewModel();
return View(orderView);
}
public PartialViewResult ShowParitalView(OrderViewModel orderView)
{
return PartialView("OrderSummary", orderView);
}
}
Index view:
#using WebApplication_core_mvc.Models;
#model OrderViewModel
#{
ViewData["Title"] = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section Scripts{
<script>
$(function () {
$("a").click(function () {
event.preventDefault();
$("div .modal").attr("id", "myModal_" + $("#cus_name").val());
$("a").attr("data-target", "#myModal_" + $("#cus_name").val());
$.ajax({
type: "POST",
url: "/Order/ShowParitalView",
data: $("form").serialize(),
success: function (data) {
$('#partial').html(data);
$("#myModal_" + $("#cus_name").val()).modal('show');
}
})
})
});
</script>
}
<form asp-action="Create">
<div class="form-group">
<label asp-for="cus_name" class="control-label"></label>
<input asp-for="cus_name" class="form-control" />
<span asp-validation-for="cus_name" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="cus_phone" class="control-label"></label>
<input asp-for="cus_phone" class="form-control" />
<span asp-validation-for="cus_phone" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CustRef" class="control-label"></label>
<input asp-for="CustRef" class="form-control" />
<span asp-validation-for="CustRef" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Phoneid" class="control-label"></label>
<input asp-for="Phoneid" class="form-control" />
<span asp-validation-for="Phoneid" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="modelId" class="control-label"></label>
<input asp-for="modelId" class="form-control" />
<span asp-validation-for="modelId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Quantity" class="control-label"></label>
<input asp-for="Quantity" class="form-control" />
<span asp-validation-for="Quantity" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Address" class="control-label"></label>
<input asp-for="Address" class="form-control" />
<span asp-validation-for="Address" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="CityId" class="control-label"></label>
<input asp-for="CityId" class="form-control" />
<span asp-validation-for="CityId" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Date" class="control-label"></label>
<input asp-for="Date" class="form-control" />
<span asp-validation-for="Date" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="store_id" class="control-label"></label>
<input asp-for="store_id" class="form-control" />
<span asp-validation-for="store_id" class="text-danger"></span>
</div>
<a href="#" data-toggle="modal" data-target="#myModal_#Model.CustRef"
style="border-radius: 1.5rem; margin-right:8%; margin-top: 1%; border: none;
padding:10px 2%; background: #0062cc; color: #fff; font-weight: 600; width:20%;
cursor: pointer; text-align:center; font-weight:bolder;">
Submit
</a>
<div id="myModal_#Model.CustRef" class="modal" role="dialog">
<div class="modal-dialog" style="position:absolute; left:10%;">
<!-- Modal content-->
<div class="modal-content" style="width:80vw;">
<div class="modal-header ">
<h4 class="modal-title"><i class="fas fa-shopping-cart"></i> Order Summary</h4>
<button type="button" class="close" data-dismiss="modal">Back</button>
</div>
<div class="modal-body">
<div id="partial">
</div>
</div>
</div>
</div>
</div>
</form>
OrderSummary Partial View:
#using WebApplication_core_mvc.Models;
#model OrderViewModel
<div class="form-group">
<label asp-for="cus_name" class="control-label"></label>
<input asp-for="cus_name" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="cus_phone" class="control-label"></label>
<input asp-for="cus_phone" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="CustRef" class="control-label"></label>
<input asp-for="CustRef" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Phoneid" class="control-label"></label>
<input asp-for="Phoneid" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="modelId" class="control-label"></label>
<input asp-for="modelId" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Quantity" class="control-label"></label>
<input asp-for="Quantity" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Address" class="control-label"></label>
<input asp-for="Address" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="CityId" class="control-label"></label>
<input asp-for="CityId" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="Date" class="control-label"></label>
<input asp-for="Date" class="form-control" disabled/>
</div>
<div class="form-group">
<label asp-for="store_id" class="control-label"></label>
<input asp-for="store_id" class="form-control" disabled/>
</div>
Here is the result:
For the second question, there are too many SQL query statements in your code, you can try to improve performance by referring to this.
<div class="row">
<div class="col-md-6 my-3">
<div class="card card-outline-secondary">
<div class="card-body">
<form class="form" role="form" autocomplete="off">
<div class="form-group row">
<label class="col-md-3 col-form-label form-control-label">First Name</label>
<div class="col-md-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Last name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Middle name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Name Extension</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Date of Birth</label>
<div class="col-lg-9">
<input class="form-control" type="date" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Gender</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label"></label>
<div class="col-lg-9">
<input type="reset" class="btn btn-secondary" value="Cancel">
<input type="button" class="btn btn-primary" value="Save Changes">
</div>
</div>
</form>
</div><!-- card body -->
</div> <!-- card-outline -->
</div>
</div>
I want to make the textbox appear in full-width. I did my research and found out that the width is in default to appear in full-width but in my work it appears in a fixed size.
Your <form> is nested inside the card;
Your card is nested inside col-md-6 of the row;
Hence on media(min-width: 992px), your form-controls will only get
1/2 * 9/12 = 37.5% of the full width.
Your form labels and inputs are already using full width of the card. The problem is, the card is not using full width of the container.
To fix that, you can either remove <div class="row"> and <div class="col-md-6 my-3"> completely, or just change <div class="col-md-6 my-3"> to <div class="col-md-12 my-3">
Fiddle: http://jsfiddle.net/aq9Laaew/86873/
You need to define parent div with full with
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12 my-6">
<div class="card card-outline-secondary">
<div class="card-body">
<form class="form" role="form" autocomplete="off">
<div class="form-group row">
<label class="col-md-3 col-form-label form-control-label">First Name</label>
<div class="col-md-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Last name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Middle name</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Name Extension</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Date of Birth</label>
<div class="col-lg-9">
<input class="form-control" type="date" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label">Gender</label>
<div class="col-lg-9">
<input class="form-control" type="text" value="" readonly />
</div>
</div>
<div class="form-group row">
<label class="col-lg-3 col-form-label form-control-label"></label>
<div class="col-lg-9">
<input type="reset" class="btn btn-secondary" value="Cancel">
<input type="button" class="btn btn-primary" value="Save Changes">
</div>
</div>
</form>
</div><!-- card body -->
</div> <!-- card-outline -->
</div>
</div>
</div>
</body>
</html>
Try adding this to your css:
input, select, textarea {max-width: 100% !important;}
I am just trying to have a horizontal form with labels on top. keep in mind I am going to add validation so grouping is important
I am looking for something like this
Name email ID
Mike Mike#hotmail.com something
code
<div class="col-lg-12">
<div class="row">
<div class="page-content">
<div class="panel panel-primary">
<form name="searchform" role="form" >
<fieldset>
<legend></legend>
<div class="form-horizontal">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-horizontal">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-horizontal">
<label for="exampleInputPassword1">Employee ID</label>
<input type="text" class="form-control" id="exampl">
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
this worked for me...let me know if there is a better solution
<form name="searchform" role="form" novalidate>
<fieldset>
<legend></legend>
<div class="col-lg-12">
<div class="row">
<div class="form-group col-xs-3 col-md-3">
<label for="Name" class="control-label"> Name</label>
<input type="text" value='' class="form-control" id="Name" placeholder="Name">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="associateID" class="control-label">Associate ID</label>
<input type="text" value='' class="form-control" id="associateID" placeholder="Associate ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="ID" class="control-label">ID</label>
<input type="text" value='' class="form-control" id="ID" placeholder="Racf ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="Role" class="control-label">Gateway Role</label>
<p-autoComplete [(ngModel)]="RoleVal" [suggestions]="iRole" name="gatewayRole" placeholder="Gateway Role" (completeMethod)="searchRole($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
</div>
</div>
<div class="row">
<div class="form-group col-xs-3 col-md-3">
<label for="Name" class="control-label">Location</label>
<input type="text" value='' class="form-control" id="Name" placeholder=" Name">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="associateID" class="control-label">Associate ID</label>
<input type="text" value='' class="form-control" id="associateID" placeholder="Associate ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="racfID" class="control-label">ID</label>
<input type="text" value='' class="form-control" id="ID" placeholder="ID">
</div>
<div class="form-group col-xs-3 col-md-3">
<label for="gatewayRole" class="control-label">Role</label>
<p-autoComplete [(ngModel)]="RoleVal" [suggestions]="iRole" name="Role" placeholder="Role" (completeMethod)="searchyRole($event)" [style]="{'width':'85%'}" [inputStyle]="{'width':'85%'}" field="name" dataKey="id" [dropdown]="true"></p-autoComplete>
</div>
</div>
</div>
</fieldset>
</form>
I have created a master page for my application and then the master application has been displayed in every page, but I have created a content page and I have created a separate CSS style design for this page and I have called to that particular page but the style for this page is not displayed.
#model MedeilMVC_CLOUD.Models.Company
#{
ViewBag.Title = "Add Company";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" />
<div class="page-content">
<div class="container-fluid">
<section class="box-typical box-panel mb-4">
<header class="box-typical-header">
<div class="tbl-row">
<div class="tbl-cell tbl-cell-title">
<h3>Form steps example</h3>
</div>
</div>
</header>
<div class="box-typical-body">
<form id="example-form" action="#" class="form-wizard">
<div>
<h3>Account</h3>
<section>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Confirm Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
</section>
<h3>Profile</h3>
<section>
<div class="form-group">
<label for="exampleInputEmail1">Address</label>
<input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter text" required>
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
</section>
<h3>Hints</h3>
<section>
<ul>
<li>Foo</li>
<li>Bar</li>
<li>Foobar</li>
</ul>
</section>
<h3>Finish</h3>
<section>
<div class="form-group">
<div class="checkbox">
<input type="checkbox" id="agree" class="required" required>
<label for="agree">Terms and Conditions</label>
</div>
</div>
</section>
</div>
</form>
</div><!--.box-typical-body-->
</section>
</div>
</div>
<script src="~/js/lib/jquery-validation/jquery.validate.min.js"></script>
<script src="~/js/lib/jquery-steps/jquery.steps.min.js"></script>
<script>
$(function () {
$("#example-basic ").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
autoFocus: true
});
var form = $("#example-form");
form.validate({
rules: {
agree: {
required: true
}
},
errorPlacement: function errorPlacement(error, element) { element.closest('.form-group').find('.form-control').after(error); },
highlight: function (element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function (element) {
$(element).closest('.form-group').removeClass('has-error');
}
});
form.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex) {
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function (event, currentIndex) {
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function (event, currentIndex) {
alert("Submitted!");
}
});
$("#example-tabs").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
enableFinishButton: false,
enablePagination: false,
enableAllSteps: true,
titleTemplate: "#title#",
cssClass: "tabcontrol"
});
$("#example-vertical").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
stepsOrientation: "vertical"
});
});
</script>
Style Sheet Link
<link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" />
And also javascript file also not working
you can use section directive in layout.
In layout write in that place where you want insert section (head/fooret etc...)
#RenderSection("styles", false)
Then in view set the content to this section:
#section styles{
<link href="~/css/separate/vendor/jquery-steps.min.css" rel="stylesheet" />
}
Name of this section may be any. But in view you can use each section only one time in any place.
I'm building my first JQM site so I think I'm missing some simple little thing that's causing me a bunch of problems.
I have setup the page, header, content and footer and a panel for the menu. Then I have I have a js file with the following:
$(document).on('pageinit', function (event) {
alert('this works every time you navigate to another page');
$("#menu-panel").panel("open");//this works the first time only
$("#new-lump-sum").popup("open");//this never works
});
Can anyone tell me why I'm getting this behaviour instead of both the panel and the popup opening every time you navigate to another page?
I also can't open them programmatically from the browser console (using chrome)
This is my HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cashflow - IFA Portal</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="/Styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link href="/Styles/System.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.7.1.min.js"></script>
<script src="/Scripts/jquery.mobile-1.3.1.min.js"></script>
<script src="/Scripts/highcharts.js"></script>
<script src="/Scripts/System.js"></script>
</head>
<body class="computer android">
<div id="page-wrapper">
<div data-role="page" class="page ui-responsive-panel"><!-- Start Page -->
<div data-role="panel" id="menu-panel" data-position="left" data-display="reveal" data-theme="a" data-dismissible="false" class="">
<ul data-role="listview" data-filter="true" data-filter-placeholder="Search Items..." data-theme="a" data-filter-theme="a">
<li><img src="/Images/Icons/home.png" alt="" class="ui-li-icon"/>Home</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Tools</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Cashflow</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Clients</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Proposals</li>
<li><img src="/Images/Icons/icon.png" alt="" class="ui-li-icon"/>Funds</li>
</ul>
</div>
<div id="header" data-role="header" data-theme="d">
<div id="top-border"></div>
<div class="floatleft">
</div>
<div id="logo">
<img src="/Images/AllanGray-Logo.png" />
</div>
<div class="floatleft header-toolbar" data-role="controlgroup" data-type="horizontal">
Favourites
<img src="/Images/Icons/179-notepad.png" class="ui-li-icon small-icon" />Notes
Display Settings
</div>
<div id="logout">
<section id="login">
Log In
</section>
</div>
<div id="display-options" data-role="popup" class="ui-content">
Close
<form>
<fieldset id="theme-options" data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Theme</legend>
<input type="radio" name="theme" id="theme-1" value="android" checked="checked" />
<label for="theme-1" class="theme-option">Android</label>
<input type="radio" name="theme" id="theme-2" value="apple" />
<label for="theme-2" class="theme-option">Apple</label>
<input type="radio" name="theme" id="theme-3" value="windows" />
<label for="theme-3" class="theme-option">Windows</label>
</fieldset>
<br />
<fieldset id="size-options" data-role="controlgroup" data-mini="true" data-type="horizontal">
<legend>Screen Size</legend>
<input type="radio" name="size" id="size-1" value="computer" checked="checked" />
<label for="size-1" class="size-option">Computer</label>
<input type="radio" name="size" id="size-2" value="tablet" />
<label for="size-2" class="size-option">Tablet</label>
<input type="radio" name="size" id="size-3" value="phone" />
<label for="size-3" class="size-option">Phone</label>
</fieldset>
</form>
</div>
</div>
<div id="content" data-role="content">
<h2>Cashflow Calculator</h2>
<div class="ui-grid-a">
<div class="ui-block-a" style="padding-right:5px;">
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Investment Assumptions</h3>
<div data-role="fieldcontain" class="narrow">
<label for="time">Time horizon (years)</label>
<input type="range" name="time" id="time" value="20" min="0" max="100" data-highlight="true" style="width"/>
<label for="nominal">Nominal return after unit trust fees (%)</label>
<input type="text" name="nominal" id="nominal" value="" />
<label for="inflation">Inflation rate p.a. (%)</label>
<input type="text" name="inflation" id="inflation" value="" />
<label for="administration-fees">Net platform administration fees (%)</label>
<input type="text" name="administration-fees" id="administration-fees" value="" />
<label for="advisor-fees">Financial advisor fees (%)</label>
<input type="text" name="advisor-fees" id="advisor-fees" value="" />
</div>
</div>
Add Contributions or Withdrawals
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Contributions & Withdrawals </h3>
<ul id="lump-sums" data-role="listview" data-split-icon="delete" data-split-theme="d">
<li>
<a>
<h3>Contribution: R20 000</h3>
<p class="topic"><strong>Recurres: 6 times</strong></p>
<p class="ui-li-aside"><strong>Start Date: 01/08/2013</strong></p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Contribution: R5000</h3>
<p class="ui-li-aside"><strong>Start Date: 01/06/2013</strong></p>
</a>
Delete
</li>
<li>
<a href="#demo-mail">
<h3>Withdrawal: -R25 000</h3>
<p class="ui-li-aside"><strong>Start Date: 01/06/2013</strong></p>
</a>
Delete
</li>
</ul>
</div>
<div data-role="popup" id="new-lump-sum" class="ui-content">
Close
<form>
<fieldset id="lump-sum-type" data-role="controlgroup" data-type="horizontal">
<legend>Add New</legend>
<input type="radio" name="lump-sum-type" id="contribution" value="contribution" checked="checked" />
<label for="contribution" class="">Contribution</label>
<input type="radio" name="lump-sum-type" id="withdrawal" value="withdrawal" />
<label for="withdrawal" class="">Withdrawal</label>
</fieldset>
<label for="lump-sum-amount">Amount (R)</label>
<input type="text" name="lump-sum-amount" id="lump-sum-amount" value="" />
<label for="lump-sum-date">Date</label>
<input type="text" name="lump-sum-date" id="lump-sum-date" value="" />
<a data-role="button" data-theme="b" onclick="addLumpSum()">Add</a>
</form>
</div>
</div>
<div class="ui-block-b" style="padding-left:5px;">
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c">
<h3>Future Value Graph</h3>
<div id="container" style="width:100%; height:400px;">fgjfjfgjh</div>
<script type="text/javascript">
</script>
</div>
</div>
</div>
</div>
<div id="footer" data-role="footer">
<div id="bottom-border"></div>
<p>Copyright © 2013 Allan Gray. All Rights Reserved.</p>
</div>
<div data-role="panel" id="right-panel" data-position="right" data-display="overlay" data-theme="b">
<h3>Favourites</h3>
<div id="search-box">
<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" placeholder="Search..." />
</div>
</div>
<script>
</script>
</div><!-- End Page -->
</div>
</body>
</html>
Popups and dialogs are tricky when it comes to opening them right after a page event occurs. To fix this issue, you need to use setTimeout to open a dialog or a popup.
$(document).on('pageinit', function() {
setTimeout(function () {
$('#new-lump-sum').popup('open');
}, 100); // delay above zero
});