I have a jquerymobile multipage document.
With this layout
#using ParadigmaNet.Infraestructure;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title</title>
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="#Url.Content("~/css/ParadigmaNTouch.css")" />
#Styles.Render("~/Content/mobileCss", "~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
#Scripts.Render("~/Scripts/paradigmaN_Ajax.js")
<script type="text/javascript">
var Wres = $(window).width();
var Hres = $(window).height();
document.cookie = "ScreenRes=" + Wres + "x" + Hres;
</script>
if (IsSectionDefined("scripts"))
{
#RenderSection("scripts", false)
}
</body>
</html>
And a document with two pages
#model ParadigmaNet.Areas.Documentos.Models.Merlin_MovimientoDocumentosFacturacion_Enc
#using ParadigmaNet.Infraestructure
#using ParadigmaNet.Areas.Items.Models
#using ParadigmaNet.Areas.Documentos.Models
#using ParadigmaNet.Areas.Items.Controllers;
#{
Layout = "~/Views/Shared/_LayoutMobile.cshtml";
}
#*Pagina principal de pedidos*#
<div id="DocumentoPedidoPrincipal" data-role="page" data-theme="b">
<div data-role="header" data-position="fixed" >
#Html.ActionLink("Cancelar", "DocsCancelar", "Docs", new { area = "Documentos" }, new { StrIdDocumento = "", data_icon="delete" })
<h1 id="NombreItem">Ubicacion: #SessionBag.Current.IntIdUbicacion</h1>
#Html.ActionLink("Grabar", "DocsGuardar", "Docs", new { area = "Documentos", StrIdDocumento = SessionBag.Current.StrIdDocumento }, new { data_icon="check" })
<div style="padding:2px;">
#if (ViewBag.ParaEdicion)
{
#MyHelpers.menu("MenuItemEnPedido", new System.Collections.ArrayList { #Html.ActionLink("Detalle", "DocsDetalle", "Docs", new { area = "Documentos", StrIdDocumento = SessionBag.Current.StrIdDocumento }, new { #class = "no-Ajax ui-btn ui-btn-up-a" }) })
}
else
{
string detalle = "<a id=" + ParadigmaNTouchHelpers.quote("MostrarDetallePedido") + " href=" + ParadigmaNTouchHelpers.quote("#") + " onclick=" + ParadigmaNTouchHelpers.quote("mostrarDetallePedido(true);") + " data-role=" + ParadigmaNTouchHelpers.quote("button") + " data-theme=" + ParadigmaNTouchHelpers.quote("e") + ">";
string condiciones = "<a id=" + ParadigmaNTouchHelpers.quote("ItemCondiciones") + " href=" + ParadigmaNTouchHelpers.quote("#CondicionesDocumento") + " data-role=" + ParadigmaNTouchHelpers.quote("button") + " data-theme=" + ParadigmaNTouchHelpers.quote("e") + ">Condiciones</a>";
#MyHelpers.menu("MenuItemEnPedido",
new System.Collections.ArrayList
{
#Html.ActionLink("Adiciones", "DocsDetalle", "Docs", new { area = "Documentos", StrIdDocumento = SessionBag.Current.StrIdDocumento }, new { data_role="button", data_ajax = "false" ,data_theme="a" , id="ItemAdiciones" , #class="ui-disabled"})
,#Html.ActionLink("Componentes", "DocsDetalle", "Docs", new { area = "Documentos", StrIdDocumento = SessionBag.Current.StrIdDocumento }, new { data_role="button", data_ajax = "false" ,data_theme="c" , id="ItemComponentes" , #class="ui-disabled"})
,#MvcHtmlString.Create(condiciones) //#Html.ActionLink("Condiciones", "", "", new {}, new { data_role="button", data_ajax = "false" ,data_theme="e" , id="ItemCondiciones" , #class="ui-disabled" , onclick="mostrarCondiciones(true)"})
,#Html.ActionLink("Eliminar", "DocsDetalle", "Docs", new { area = "Documentos", StrIdDocumento = SessionBag.Current.StrIdDocumento }, new { data_role="button", data_ajax = "false" ,data_theme="d" , id="ItemEliminar" , disable="true",#class="ui-disabled"})
,#Html.ActionLink("Detalle", "", "", new {} , new { data_role="button", id = "MostrarDetallePedido", data_ajax = "false" ,data_theme="b", onclick="mostrarDetallePedido(true)"})
}
, 1, "c")
}
</div>
</div>
<div id="BodyContent" data-role="content" data-theme="a" style="height:auto; min-height:90%; width:100%;position:absolute;overflow:visible;">
<div id="LineasTouchContainer">
#ParadigmaNTouchHelpers.TouchContainer(ViewBag.LineasList, ViewBag.LineasTouchContainer);
</div>
<div id="ItemsTouchContainer">
#ParadigmaNTouchHelpers.TouchContainer(ViewBag.ItemsList, ViewBag.ItemsTouchContainer)
</div>
<div id="GruposTouchContainer">
</div>
<div id="QuickList">
#ParadigmaNTouchHelpers.TouchContainer(ViewBag.QList, ViewBag.QuickListAccess)
</div>
<div data-role="collapsible-set" data-mini="true" data-inset="true" data-filter="true" id="DetalleDocumento" class="ParadigmaNDetallePedidoHide">
<div data-role='button' onclick="mostrarDetallePedido(false)" data-theme="b">Ocultar Detalle</div>
<div data-role="collapsible-set" data-mini="true" data-inset="true" data-filter="true" id="DetallePedidoRegistros">
#if (1==1){
Merlin_MovimientoDocumentosFacturacion_Enc DatosDoc = (Merlin_MovimientoDocumentosFacturacion_Enc)SessionBag.Current.DocEditar;
<div data-role="collapsible" data-collapsed="false">
<h3>Datos del Pedido</h3>
Abierto por #DatosDoc.StrUsuarioGenera<br />
A las #DatosDoc.DatFechaDocumento<br />
Mesa: #DatosDoc.IntIdMesa
</div>
}
</div>
#foreach (Merlin_Movimientos_Pedidos Item in SessionBag.Current.DocEditar.Merlin_MovimientoDocumentos_Pedidos_Enc.Merlin_Movimientos_Pedidos)
{
Html.RenderPartial("DocsDetalleTransaccionPedido", Item);
}
</div>
</div>
</div>
#*Pagina de condiciones*#
<div id="CondicionesDocumento" data-role="page" data-theme="b">
<div data-role="header" data-position="fixed" >
Volver
<h1 id="TituloCondiciones">Editando condiciones</h1>
#if (1 == 1)
{
<a>Hola Mundo</a>
}
</div>
<div data-role="content" data-theme="a" style="height:auto; min-height:90%; width:100%;position:absolute;overflow:visible;">
<div class="ui-grid-a">
<div class="ui-block-a" style="width:50%; top:1em; position:relative;left:0em;" data-theme="a" >
<ul id ="CondicionesDocumentoDisponibles" data-role="listview" data-filter="true" data-inset="true">
</ul>
</div>
<div class="ui-block-b" style="width:48%;position:relative; left:1%;">
<ul id ="CondicionesDocumentoSeleccionadas" data-role="listview" data-filter="false" data-inset="true" style="left:51%;top:1em;postion:relative;" >
</ul>
</div>
</div>
</div>
</div>
#section scripts {
<script type="text/javascript">
$('#CondicionesDocumentoDisponibles').listview();
$('#CondicionesDocumentoSeleccionadas').listview();
$('#DetalleDocumento').listview();
</script>
}
The document is called by redirecttoaction() into a controller method, until here everything is ok.
The problem is that the second page id="CondicionesDocumento" don't render into _Layout
I don't see any place that the page "CondicionesDocumento" gets loaded or linked to... Am I missing something? You need to explicitly link to the page:
Second Page
Or load the page via JavaScript:
$.mobile.changePage("CondicionesDocumento);
The problem is that jQUery mobile render all pages only for the firs call, other calls only render the first page on the document.
After the first call only one page must be included per document.
Related
Im writing an application that connects to an API and allows users to do CRUD operations
In the Frontend.
I Have a button on each row in a table that is called 'View' once clicked, it should copy the info from the row that it was clicked on, into text fields for updating user details.
Table with button
Update Filed after click
I have a debugger under the FillStudentInfo: function (studentId) {} Method and when I debug i can see that the correct record is in the json response, but it doestn seem to add it to the text fields for some reason
Debugger
As you can see, the update field is blank.
StudentSummary.js
var StudentSummaryManager = {
GetAllStudents: function () {
var obj = "";
var serviceUrl = "https://localhost:5001/api/student";
AjaxManager.GetAPI(serviceUrl, onSuccess, onFailed);
function onSuccess(jsonData) {
obj = jsonData;
}
function onFailed(error) {
alert(error.statusText);
}
return obj;
},
GetStudentById: function (studentId) {
var obj = "";
var serviceUrl = "https://localhost:5001/api/student/" + studentId;
AjaxManager.GetAPI(serviceUrl, onSuccess, onFailed);
function onSuccess(jsonData) {
obj = jsonData;
}
function onFailed(error) {
alert(error.statusText);
}
return obj;
}
};
var StudentSummaryHelper = {
InitStudentSummary: function () {
StudentSummaryHelper.LoadStudent();
},
LoadStudent: function () {
$("#Table tbody tr").remove();
var studentList = StudentSummaryManager.GetAllStudents();
$.each(studentList, function (i, item) {
var rows = "<tr>" +
"<td>" + item.StudentId + "</td>" +
"<td>" + item.FirstName + "</td>" +
"<td>" + item.LastName + "</td>" +
"<td>" + item.DateofEnrollment + "</td>" +
"<td>" + item.Active + "</td>" +
"<td><button class='btn btn-info' onClick='StudentSummaryHelper.FillStudentInfo(" + item.StudentId + ")'>View</button></td>" +
"</tr>";
$("#Table tbody").append(rows);
});
},
FillStudentInfo: function (studentId) {
debugger;
var studInfo = StudentSummaryManager.GetStudentById(studentId);
$("#btnSave").text("Update");
$("#divDetails").show();
$("#divSummary").hide();
$("#txtStudentFirstName").val(studInfo.FirstName);
$("#txtStudentLastName").val(studInfo.LastName);
$("#txtStudentDate").val(studInfo.DateofEnrollment);
$("#txtStudentActive").val(studInfo.Active);
}
}
StudentSummary.cshtml
<script src="~/js/Student/StudentSummary.js"></script>
<div class="row">
<div class="col-12">
<h4>Summary of all students</h4>
</div>
<div class="col-md-12">
<button class="btn btn-success" id="btnAdd">Add Student</button>
<table class="table table-striped" id="Table">
<thead>
<tr>
<th>StudentId</th>
<th>FirstName</th>
<th>LastName</th>
<th>DateofEnrollment</th>
<th>Active</th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
StudentDetails.js
var StudentDetailsManager = {
SaveStudent: function () {
var obj = StudentDetailsHelper.CreateStudObj();
var objStudent = JSON.stringify(obj);
var serviceUrl = "https://localhost:5001/api/student/AddStudent"
AjaxManager.PostApi(serviceUrl, objStudent, onSuccess, onFailed)
function onSuccess(jsonData) {
if (jsonData.FirstName !== "") {
$("#divDetails").hide();
$("#divSummary").show();
StudentSummaryHelper.LoadStudent();
alert("Saved Successfully");
}
else {
alert(jsonData);
}
}
function onFailed(error) {
alert(error.statusText);
}
}
};
var StudentDetailsHelper = {
InitStudentDetails: function () {
$("#btnAdd").click(function () {
$("btnSave").text("Save");
$("#divDetails").show();
$("#divSummary").hide();
StudentDetailsHelper.ClearForms();
});
$("#btnSave").click(function () {
StudentDetailsManager.SaveStudent();
});
},
CreateStudObj: function () {
debugger;
var obj = new Object();
obj.FirstName = $("#txtStudentFirstName").val();
obj.LastName = $("#txtStudentLastName").val();
obj.DateofEnrollment = $("#txtStudentDate").val();
if ($("#txtStudentActive").is(":checked")) {
obj.Active = "true"
} else {
obj.Active = "false"
}
return obj;
},
ClearForms() {
$("#txtStudentFirstName").val("");
$("#txtStudentLastName").val("");
$("#txtStudentDate").val("");
$("txtStudentActive").val(null);
}
}
StudentDetails.cshtml:
<script src="~/js/Student/StudentDetails.js"></script>
<div class="col-6">
<div class="form-group">
<input type="hidden" id="hdnStudentId" value="0" />
<label class="col-md-3 col-xl control-label" for="txtStudentFirstName">First Name:</label>
<div class="col-md-7 col-xs-7">
<input type="text" class="form-control" id="txtStudentFirstName" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xl control-label" for="txtStudentLastName">Last Name:</label>
<div class="col-md-7 col-xs-7">
<input type="text" class="form-control" id="txtStudentLastName" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xl control-label" for="txtStudentDate">Enrollment Date:</label>
<div class="col-md-7 col-xs-7">
<input type="date" class="form-control" id="txtStudentDate" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 col-xl control-label" for="txtStudentActive">Active:</label>
<div class="col-md-7 col-xs-7">
<input type="checkbox" class="form-control" id="txtStudentActive" />
</div>
</div>
<div class="row">
<div class="spacer5"></div>
<div class="col-md-12 col-xs-12">
<ul class="list-group">
<li class="list-group-item centerAlign">
<button id="btnSave" class="btn btn-success" type="button">Save</button>
</li>
</ul>
</div>
</div>
</div>
So for some reason in the FillStudentInfo: function (studentId) {}
Method I needed to ad a $.each even though the response was only 1 Student.
Heres the fixed method that works:
FillStudentInfo: function (studentId) {
debugger;
var studInfo = StudentSummaryManager.GetStudentById(studentId);
$("#btnSave").text("Update");
$("#divDetails").show();
$("#divSummary").hide();
$.each(studInfo, function (i, studInfo) {
$("#txtStudentFirstName").val(studInfo.FirstName);
$("#txtStudentLastName").val(studInfo.LastName);
$("#txtStudentDate").val(studInfo.DateofEnrollment);
$("#txtStudentActive").val(studInfo.Active);
});
}
I'm working with selenium chromedriver. So far I have been able to log on, check a check box, navigate to another web page. I've hit a brick wall though when I get to the upload file page.
The form has 4 or 5 buttons that will open up a dialog box to pick a file off of the local hard drive. There is no input to put in directly. I think that when you click one of the buttons it executes a javascript function that choose a file.
Please look at the source code of this page and see if you have any ideas how to accomplish this:
^^^`enter code here<head><link rel="shortcut icon" href="/favicon.ico"/><title>NYWB-ECF v10.5.2 NextGen Production Database</title>
<script type="text/javascript">document.cookie = "PRTYPE=aty; path=/;"</script> <script>var default_base_path = "/"; </script> <link rel="stylesheet" type="text/css" href="/css/default.css"><script type="text/javascript" src="/lib/core.js"></script><script type="text/javascript" src="/lib/autocomplete.js"></script><script type="text/javascript" src="/lib/DisableAJTALinks.js"></script><script type="text/javascript">if (top!=self) {top.location.replace(location.href);}</script><script>var default_base_path = "/"; </script></head><body BGCOLOR=ffffff TEXT=000000 onLoad='SetFocus()'>
<div class="noprint">
<div id="topmenu" class="yuimenubar"><div class="bd">
<img id="cmecfLogo" class="cmecfLogo" src="/graphics/logo-cmecf-sm.png" alt="CM/ECF" title="" />
<ul class="first-of-type">
<li class="yuimenubaritem" ><a class="yuimenubaritemlabel" href='/cgi-bin/DisplayMenu.pl?BankruptcyEvents&id=492888'>Ban</u>kruptcy <div class='spritedownarrow'></div></a></li>
<li class="yuimenubaritem" ><a class="yuimenubaritemlabel" href='/cgi-bin/DisplayMenu.pl?AdversaryEvents&id=492888'>A</u>dversary <div class='spritedownarrow'></div></a></li>
<li class="yuimenubaritem" ><a class="yuimenubaritemlabel" href='/cgi-bin/iquery.pl'>Q</u>uery</a></li>
<li class="yuimenubaritem" ><a class="yuimenubaritemlabel" href='/cgi-bin/DisplayMenu.pl?Reports&id=492888'>R</u>eports <div class='spritedownarrow'></div></a></li>
<li class="yuimenubaritem" ><a class="yuimenubaritemlabel" href='/cgi-bin/DisplayMenu.pl?Utilities&id=492888'>U</u>tilities <div class='spritedownarrow'></div></a></li>
<li class="yuimenubaritem" ><a class="yuimenubaritemlabel" href='javascript: CMECF.MainMenu.searchPrompt();'>Searc</u>h</a></li>
<li class="yuimenubaritem" ><a class="yuimenubaritemlabel" onClick="CMECF.MainMenu.showHelpPage(''); return false">Help</a></li>
<li class="yuimenubaritem"><a class="yuimenubaritemlabel" href='/cgi-bin/login.pl?logout'>Log Out</a></li><li class='yuimenubaritem' id='placeholderForAlertsIcon'></li>
</ul></div>
<hr class="hrmenuseparator"></div></div>
<script type="text/javascript">
callCreateMenu=function(){
var fn = "CMECF.MainMenu.renderSimpleMenu";
if(typeof CMECF.MainMenu.renderSimpleMenu == 'function') {
CMECF.MainMenu.renderSimpleMenu();
}
}
if (navigator.appVersion.indexOf("MSIE")==-1){window.setTimeout( function(){ callCreateMenu(); }, 1);}else{CMECF.util.Event.addListener(window, "load", callCreateMenu());}</script> <div id="cmecfMainContent"><input type="hidden" id="cmecfMainContentScroll" value="0"><SCRIPT LANGUAGE="JavaScript">
var IsForm = false;
var FirstField;
function SetFocus() {
if(IsForm) {
if(FirstField) {
var ind = FirstField.indexOf('document.',0);
if(ind == 0)
{
eval(FirstField);
}
else
{
var Code = "document.forms[0]."+FirstField+".focus();";
eval(Code);
}
} else {
var Cnt = 0;
while(document.forms[0].elements[Cnt] != null) {
try {
if(document.forms[0].elements[Cnt].type != "hidden" &&
!document.forms[0].elements[Cnt].disabled &&
!document.forms[0].elements[Cnt].readOnly) {
document.forms[0].elements[Cnt].focus();
break;
}
}
catch(e) {}
Cnt += 1;
}
}
}
return(true);
}
</SCRIPT>
<div id="main-page-title" style="margin-bottom: .5em">
<font face="arial,helvetica" color="0000cc" size="4"><b><span id="main-page-title-content">Open New Bankruptcy Case</span></b></font>
</div> <FORM ENCTYPE='multipart/form-data' method=POST action="/cgi-bin/Dispatch.pl?127734820136425">
<!-ShowPage(CaseUpLoad.htm)->
<!-- RPM Packages: ao-bkecf-web-* -->
<!-- RPM Permissions: 444 -->
<!-- RPM Owner: nobody -->
<!-- RPM Group: nobody -->
<!-- RPM Flags: configure -->
<script src="/lib/CommonLib.js" language="Javascript"></script>
<SCRIPT LANGUAGE="JavaScript">
function CheckCreditorMatrix(input,lower,upper,field) {
var strng = "" + input;
var len = strng.length;
if (len < lower || len > upper) {
var msg = "The List of Creditors is empty or does not exist";
alert(msg);
if (field) {
field.focus();
field.select();
}
return 0;
} else if (len == 0) { return 2; }
else return 1;
}
</script>
<table cellpadding="5"><tr>
<td><b>Case information</b><br/>
<input name="case_1" type="file" size="40" />
<font size = "-1">c:\Debtor.txt</font>
</td>
</tr><tr>
<td><b>Petition</b><br/>
<input name="file_1" type="file" size="40" />
<font size = "-1">c:\Petition.pdf</font>
</td>
</tr><tr>
<td><b>List of creditors</b><br/>
<input name = "creditorMatrixFilename" type="hidden" />
<input name="file_1_MTX" type="file" size="40" onChange="document.forms[0].creditorMatrixFilename.value = this.value"/>
<font size = "-1">c:\Creditor.txt</font>
</td>
<script>
var numEvents = 1;
// record the names so we know if the user tried to upload a file, even if it is invalid
function AssignHiddenValues() {
document.forms[0].creditorMatrixFilename.value = document.forms[0].file_1_MTX.value;
for (var i = 0; i <= numEvents; i++) {
if(document.forms[0]["configured_file_"+i])
document.forms[0]["configured_filename_"+i].value = document.forms[0]["configured_file_"+i].value;
}
return 1;
}
</script>
</tr><tr>
<td><b>Chapter 13 plan (<em>chapter 13 only</em>)</b><br/>
<input name = "configured_filename_0" type="hidden" />
<input name="configured_file_0" type="file" size="40"
onChange="document.forms[0].configured_filename_0.value = this.value" />
<font size = "-1">c:\Plan.pdf</font>
</td>
</tr><tr>
<td><b>Certificate of credit counseling </b><br/>
<input name = "configured_filename_1" type="hidden" />
<input name="configured_file_1" type="file" size="40"
onChange="document.forms[0].configured_filename_1.value = this.value" />
<font size = "-1">c:\CCC.pdf</font>
</td>
</tr></table>
<script>numEvents = 2</script>
<SCRIPT LANGUAGE="JavaScript">
document.cookie = "DPFFuncs='CaseUpLoadCollectCaseInfo-'; path=/; |";
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
var timerId;
var BeenHere = 0;
IsForm = true;
function empty(s) {
var whitespace = " \ \
\
";
if(s == null || s.length == 0) {
return(true);
}
// Is s only whitespace characters?
for (var i = 0; i < s.length; i++) {
var c = s.charAt(i);
if (whitespace.indexOf(c) == -1) return false;
}
return(true);
}
function ClearTimer() {
BeenHere = 0;
clearTimeout(timerId);
return(true);
}
var FormId = 0;
function ProcessForm() {
if(BeenHere == 1) {
return(false);
}
if( ! AssignHiddenValues() ) {return false}
if( ! CheckString(document.forms[0].case_1.value, 1, 1000, document.forms[0].case_1) ) {return false}
if( ! CheckString(document.forms[0].file_1.value, 1, 1000, document.forms[0].file_1) ) {return false}
if( ! CheckCreditorMatrix(document.forms[0].file_1_MTX.value, 1, 1000, document.forms[0].file_1_MTX) ) {return false}
BeenHere = 1;timerId=setTimeout("ClearTimer()",5000);document.forms[FormId].submit();return true }
function RunAfterClear() {
}
</SCRIPT>
<TABLE><TR> <TD><INPUT NAME="button1" Value='Next' TYPE= "button" ONCLICK="ProcessForm()" > <TD> <TD> <INPUT NAME="reset" TYPE="RESET" VALUE="Clear" onClick="setTimeout('RunAfterClear()',100)"></TD> </TR></TABLE></FORM></div></body></html>
}
You can click the choose file button , and use sendkeys to give your location of the file.
WebElement upload = driver.findElement(By.linkText("Upload a Document:( .tex, .txt, .doc, .docx, .odt, .pdf, .rtf )"));
upload.sendKeys("C:\path\File.txt");
Checkout this code.
I am trying to set a master page Employee Qualifications, this master page will include other views suck as work experience, employee skills, education.
In each partial view i have an ajax get method that brings the data and returns on success to render the partial view. the problem is that the method LoadWorkExperiences(); never gets fired when i navigate to the master page and hence the data is never loaded in view.
I am doing it this way because i want to open an edit popup window by clicking of the button. there for loading directly to master page is not my option.
Thanks for your help.
I tried calling "HumanResourse/WorkExperience/DisplayWorkExperience/15" and it also does not fire the Ajax call.
the Master View cshtml HERE.
#{
ViewBag.Title = "Display";
Layout = "~/Areas/HumanResourse/Views/Shared/_LayoutHRUB.cshtml";
int EmpId = ViewBag.EmployeeId;
}
<h2>Qualifications</h2>
<div>
<p>Work Experience</p>
#Html.Action("DisplayWorkExperience", "WorkExperience", new { id = EmpId })
</div>
<div>
<p>Education</p>
#Html.Action("DisplayEducation", "Education", new { id = EmpId })
</div>
the sub view code DisplayWorkExperience HERE.
#model SaaS.Areas.HumanResourse.Models.HR_Emp_WorkExperience_ViewModel
#{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<title>DisplayWorkExperience</title>
</head>
<body>
<input class="hidden" id="EmpId" value="#ViewBag.EmployeeId" />
<div class="container">
<label>Work Experiences</label>
Add New Work Experience <br /><br />
<table id="tblWorkExperience" class="table table-striped">
<thead>
<tr>
<th>Company</th>
<th>Position</th>
<th>From</th>
<th>To</th>
<th>Comment</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
#*Create A Popup Modal With Registration Form For Add Or Edit Student Record*#
<div class="modal fade" id="MyModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
×
<h4 id="ModalTitle"></h4>
</div>
<div class="modal-body">
<form id="form">
<fieldset id="SubmitForm">
#Html.HiddenFor(m => m.HR_Emp_WorkExperienceId, new { #id = "WorkExperienceId" })
<div class="form-group">
#Html.TextBoxFor(m => m.CompanyName, new { #id = "CompName", #class = "form-control", #placeholder = "Company Name*" })
</div>
<div class="form-group">
#Html.TextBoxFor(m => m.Position, new { #id = "Position", #class = "form-control", #placeholder = "Position*" })
</div>
<div class="form-group">
#Html.TextBoxFor(m => m.From, new { #id = "DateFrom", #class = "form-control" })
</div>
<div class="form-group">
#Html.TextBoxFor(m => m.To, new { #id = "DateTo", #class = "form-control" })
</div>
<div class="form-group">
#Html.TextBoxFor(m => m.Comment, new { #id = "Position", #class = "form-control", #placeholder = "Comment" })
</div>
<div class="form-group">
Save
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
#section scripts
{
<script type="text/javascript">
$(Document).ready(function () {
$("#LoadingStatus").html("Loading....");
LoadWorkExperiences();
});
//Start LoadWorkExperiences
function LoadWorkExperiences() {
$("#tblWorkExperience tbody tr").remove();
var EmpId = $("#EmpId").val();
$.ajax({
type: "POST",
url: '#Url.Action("GetEmpWorkExperiences", "WorkExperience", new {id = "ID"})'.replace("ID", EmpId),
dataType: "json",
success: function (data) {
$.each(data, function (i, item) {
var rows = "<tr>"
+ "<td class='h5'>" + item.CompanyName + "</td>"
+ "<td class='h5'>" + item.Position + "</td>"
+ "<td class='h5'>" + item.From + "</td>"
+ "<td class='h5'>" + item.To + "</td>"
+ "<td class='h5'>" + item.Comment + "</td>"
+ "<td>" + "<a href='#' class='btn btn-warning' onclick='EditWorkExperience(" + item.HR_Emp_WorkExperienceId + ")' ><span class='glyphicon glyphicon-edit'></span></a>" + "</td >"
+ "<td>" + "<a href='#' class='btn btn-danger' onclick='DeleteWorkExperience(" + item.HR_Emp_WorkExperienceId + ")'><span class='glyphicon glyphicon-trash'></span></a>" + "</td>"
+ "</tr>";
$("#tblWorkExperience tbody").append(rows);
$("#LoadingStatus").html(" ");
});
},
error: function (ex) {
var r = jQuery.parseJSON(Response.text);
alert("Message: " + r.Message);
alert("StackTrace: " + r.StackTrace);
}
});
};
</script>
}
The Controller Code HERE.
public class WorkExperienceController : Controller
{
ApplicationDbContext Db;
public WorkExperienceController()
{
Db = new ApplicationDbContext();
}
// GET: HumanResourse/WorkExperience
public ActionResult Index()
{
return View();
}
public ActionResult DisplayWorkExperience(int? id)
{
TempData["EmployeeId"] = id;
ViewBag.EmployeeId = id;
return View();
}
public JsonResult GetEmpWorkExperiences(int? id)
{
if (id == null)
{
throw new HttpException(404, "Bad Request");
}
var EmpQualification = Db.HR_Emp_Qualifications.SingleOrDefault(p => p.HR_Emp_QualificationId == id);
if (EmpQualification == null)
{
throw new HttpException(404, "Not Found");
}
List<HR_Emp_WorkExperience_ViewModel> EmpWorkExpList = EmpQualification.HR_Emp_WorkExperiences.Select(x => new HR_Emp_WorkExperience_ViewModel
{
HR_Emp_WorkExperienceId = x.HR_Emp_WorkExperienceId,
CompanyName = x.CompanyName,
Position = x.Position,
From = x.From,
To = x.To,
Comment = x.Comment
}).ToList();
return Json(EmpWorkExpList, JsonRequestBehavior.AllowGet);
}
}
i am getting now this error
Failed to construct 'Document': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
I think you can rework what you have here, and it should work, like so:
Index.cshtml:
#{
ViewBag.Title = "Display";
Layout = "~/Areas/HumanResourse/Views/Shared/_LayoutHRUB.cshtml";
int EmpId = ViewBag.EmployeeId;
}
#section scripts
{
<script>
$(function () {
$("#LoadingStatus").html("Loading....");
LoadWorkExperiences();
});
//Start LoadWorkExperiences
function LoadWorkExperiences() {
$("#tblWorkExperience tbody tr").remove();
var EmpId = $("#EmpId").val();
$.ajax({
type: "POST",
url: '#Url.Action("GetEmpWorkExperiences", "WorkExperience")/' + EmpId,
dataType: "json",
success: function (data) {
$.each(data, function (i, item) {
var rows = "<tr>"
+ "<td class='h5'>" + item.CompanyName + "</td>"
+ "<td class='h5'>" + item.Position + "</td>"
+ "<td class='h5'>" + item.From + "</td>"
+ "<td class='h5'>" + item.To + "</td>"
+ "<td class='h5'>" + item.Comment + "</td>"
+ "<td>" + "<a href='#' class='btn btn-warning' onclick='EditWorkExperience(" + item.HR_Emp_WorkExperienceId + ")' ><span class='glyphicon glyphicon-edit'></span></a>" + "</td >"
+ "<td>" + "<a href='#' class='btn btn-danger' onclick='DeleteWorkExperience(" + item.HR_Emp_WorkExperienceId + ")'><span class='glyphicon glyphicon-trash'></span></a>" + "</td>"
+ "</tr>";
$("#tblWorkExperience tbody").append(rows);
$("#LoadingStatus").html(" ");
});
},
error: function (ex) {
var r = jQuery.parseJSON(Response.text);
alert("Message: " + r.Message);
alert("StackTrace: " + r.StackTrace);
}
});
};
</script>
}
<h2>Qualifications</h2>
<div>
<p>Work Experience</p>
#Html.Action("DisplayWorkExperience", "WorkExperience", new { id = EmpId })
</div>
<div>
<p>Education</p>
#Html.Action("DisplayEducation", "Education", new { id = EmpId })
</div>
DisplayWorkExperience.cshtml (displayed as a partial view):
<input class="hidden" id="EmpId" value="#ViewBag.EmployeeId" />
<div class="container">
<label>Work Experiences</label>
Add New Work Experience <br /><br />
<table id="tblWorkExperience" class="table table-striped">
<thead>
<tr>
<th>Company</th>
<th>Position</th>
<th>From</th>
<th>To</th>
<th>Comment</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
#*Create A Popup Modal With Registration Form For Add Or Edit Student Record*#
<div class="modal fade" id="MyModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
×
<h4 id="ModalTitle"></h4>
</div>
<div class="modal-body">
<form id="form">
<fieldset id="SubmitForm">
#Html.HiddenFor(m => m.HR_Emp_WorkExperienceId, new { #id = "WorkExperienceId" })
<div class="form-group">
#Html.TextBoxFor(m => m.CompanyName, new { #id = "CompName", #class = "form-control", #placeholder = "Company Name*" })
</div>
<div class="form-group">
#Html.TextBoxFor(m => m.Position, new { #id = "Position", #class = "form-control", #placeholder = "Position*" })
</div>
<div class="form-group">
#Html.TextBoxFor(m => m.From, new { #id = "DateFrom", #class = "form-control" })
</div>
<div class="form-group">
#Html.TextBoxFor(m => m.To, new { #id = "DateTo", #class = "form-control" })
</div>
<div class="form-group">
#Html.TextBoxFor(m => m.Comment, new { #id = "Position", #class = "form-control", #placeholder = "Comment" })
</div>
<div class="form-group">
Save
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
With a few changes to the controller:
public class WorkExperienceController : Controller
{
// ... the rest of your code
[ChildActionOnly] // An attribute which will prevent this action from being called by anything but Html.Action()
public ActionResult DisplayWorkExperience(int? id)
{
TempData["EmployeeId"] = id;
ViewBag.EmployeeId = id;
return PartialView(); // this needs to return a partial view
}
}
This is untested, but if I'm understanding the end result you're after, this should work. Basically:
Move the #section to the full view, Index.cshtml, so that it actually gets rendered. It doesn't matter where in the page you have that - I prefer to put #section calls at the top of the view, but it doesn't affect where that code is injected into the layout.
Change the return type of DisplayWorkExperience to PartialViewResult, so that it doesn't try to render the layout
Add the ChildActionOnlyAttribute to DisplayWorkExperience (optional) - this is purely to indicate that DisplayWorkExperience is only for rendering an embedded view, and will throw an exception if an attempt is made to navigate to that action.
From there, the jQuery code you have should work as I think you intended.
When I am using this code as web view, it works fine, but when with developer option in Chrome I select Mobile View, FormCollection shows empty strings in the controller
VIEW (Edit updtaed)
<div class="page product-details-page deal-product-details-page">
#using (Html.BeginForm("AddProductToCart_Details", "DealProduct", new { productId = Model.Id, shoppingCartTypeId = 1 }, FormMethod.Post))
{
<div class="page-body">
#using (Html.BeginRouteForm("Product", new { SeName = Model.SeName }, FormMethod.Post, new { id = "product-details-form" }))
{
#{
var dataDictAttributes = new ViewDataDictionary();
dataDictAttributes.TemplateInfo.HtmlFieldPrefix = string.Format("attributes_{0}", Model.Id);
#Html.Partial("~/Views/Product/_ProductAttributes.cshtml", Model.ProductAttributes, dataDictAttributes)
}
<!--gift card-->
#{
var dataDictGiftCard = new ViewDataDictionary();
dataDictGiftCard.TemplateInfo.HtmlFieldPrefix = string.Format("giftcard_{0}", Model.Id);
#Html.Partial("~/Views/Product/_GiftCardInfo.cshtml", Model.GiftCard, dataDictGiftCard)
}
<!--rental info-->
#{
var dataDictRental = new ViewDataDictionary();
dataDictRental.TemplateInfo.HtmlFieldPrefix = string.Format("rental_{0}", Model.Id);
#Html.Partial("~/Views/Product/_RentalInfo.cshtml", Model, dataDictRental)
}
<!--price & add to cart-->
#{
var dataDictPrice = new ViewDataDictionary();
dataDictPrice.TemplateInfo.HtmlFieldPrefix = string.Format("price_{0}", Model.Id);
#Html.Partial("~/Views/Product/_ProductPrice.cshtml", Model.ProductPrice, dataDictPrice)
#Html.Partial("~/Views/Product/_ProductTierPrices.cshtml", Model.TierPrices)
}
<!--wishlist, compare, email a friend-->
<!--attributes-->
#{
var item = #Model.AssociateProductAttributesList.Where(x => x.Item1 == data.Id).Select(x => x.Item2).ToList()[0];
bool isAttributes =false;
}
<div class="popup" data-popup="popup-#data.Id">
<div class="popup-inner">
<h2>#data.Name</h2>
<p>#data.ShortDescription</p>
<br />
#foreach (System.Collections.DictionaryEntry value in item)
{
var val = data.Id + "_" + value.Key.ToString();
isAttributes = true;
#*<div class="attributes">*#
<dl>
<dt id="product_attribute_label_19">
<label class="text-prompt">
#value.Key.ToString()
</label>
</dt>
<dd id="product_attribute_input_19" class="product_attribute_inputdiv_#val">
#Html.DropDownList("Attributes," + data.Id + "," + value.Key.ToString(), new SelectList((System.Collections.IEnumerable)value.Value, "Id", "Name"), "--- Please select ---")
</dd>
</dl>
#*</div>*#
}
<br />
<div onclick="ImageBlur('div_#data.Id')" class="buttons" style="text-align:left;">
<input class="button-1" data-popup-close="popup-#data.Id" type="button" value="Add to back" />
</div>
<a class="popup-close" data-popup-close="popup-#data.Id" href="#">x</a>
</div>
</div>
#if (item.Count == 0)
{
#Html.Hidden("Attributes," + data.Id + ",", "0")
<div class="popup" data-popup="popup-#data.Id">
<div class="popup-inner">
<h2>#data.Name</h2>
<p>#data.ShortDescription</p>
<div onclick="ImageBlur('div_#data.Id')" class="buttons" style="text-align:left;">
<input class="button-1" data-popup-close="popup-#data.Id" type="button" value="Add to back" />
</div>
<a class="popup-close" data-popup-close="popup-#data.Id" href="#">x</a>
</div>
</div>
}
#if (isAttributes)
{
<a style="color: blue;" data-popup-open="popup-#data.Id" href="#">
<img id="imgdiv_#data.Id" src="~/Themes/Playground/Content/img/dealselectattribut.png" class="select-atr-img" style="width: 50%; margin-bottom: 10px;"/>
</a>
}
</div>
}
</div>
<div>
</div>
#{
var dataDictAddToCart = new ViewDataDictionary();
dataDictAddToCart.TemplateInfo.HtmlFieldPrefix = string.Format("addtocart_{0}", Model.Id);
<div class="overview" style="width:100%; margin-left:auto">
#Html.Partial("~/Views/Product/_AddToCart.cshtml", Model.AddToCart, dataDictAddToCart)
</div>
}
</div>
}
</div>
}
</div>
Controller
public ActionResult AddProductToCart_Details(int productId, int shoppingCartTypeId, FormCollection form)
{
if (_productService.IsDealProducts(productId))
{
if (!IsCompleteSelected(form))
{
return Json(new
{
success = false,
message = " Plese select all associated product attribute "
});
}
}
//more code here
}
Normal View (Web View)
Mobile View
Form in form is not allowed. This is your issue.
I built a dynamic jquery menu c# (VS2013) with bootstrap 3.0 that works fine on load but when I cliked on link item menu by using calling ajax the cursor pass in action view of controller but doesn't render it. I tried using Ajax.Actionlink and this menu simple clear after clicked on link menu item.
This is my _layout, and I build menuClever:
<body>
<div class="navmenu navmenu-default navmenu-fixed-left">
<div class="scrollable">
<div class="col-lg-12">
<div id="menuClever">
</div>
</div>
</div>
</div>
<div class="canvas">
<div class="navbar navbar-default navbar-fixed-top">
<button type="button" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="container fluid">
<div class="container body-content" id="funcaoContainer">
#Html.Partial("_LoginPartial")
<p></p>
<p>#RenderBody()</p>
</div>
</div>
</div>
#RenderSection("scripts", required: false)
</body>
And this is my jquery Menu:
$.fn.menuClever = function (atributos, opcoes) {
var defaults = {
propriedades: {}
};
var r = {
registros: atributos
};
var p = {
registros: []
};
if (opcoes) {
$.extend(defaults, opcoes);
var titulo = '';
titulo += '<h4>';
titulo += defaults.tituloMenu;
titulo += '</h4>';
$('#menuClever').prepend(titulo);
var menuItem = '';
var idFuncionalidadeAnterior = 0;
var nivelAnterior = 0;
var qtdItems = 0;
if (r.registros.length > 0) {
idFuncionalidadeAnterior = r.registros[0]['IdFuncionalidadeAnterior'];
nivelAnterior = r.registros[0]["Nivel"];
}
for (var i = 0; i < r.registros.length; i++) {
if (r.registros[i]['Nivel'] > nivelAnterior) {
menuItem += '<ul>';
}
else
if (r.registros[i]['Nivel'] < nivelAnterior) {
menuItem += '</ul> </li> </ul> ';
if (r.registros[i]['IdTipoFuncionalidade'] == 1) {
menuItem += '<ul>';
}
}
if (r.registros[i]['IdTipoFuncionalidade'] == 1) {
menuItem += '<li>' + r.registros[i]['Funcionalidade'] + '<span class="glyphicon arrow"></span>';
}
else {
if (r.registros[i]['Parametros'] != null) {
menuItem += '<li><a class="funcaoClever" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#funcaoContainer" href="' +
r.registros[i]['Url'] + r.registros[i]['Parametros'] + '">' + r.registros[i]['Funcionalidade'] + '</a></li>';
}
else {
menuItem += '<li><a class="funcaoClever" data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#funcaoContainer" href="' +
r.registros[i]['Url'] + '">' + r.registros[i]['Funcionalidade'] + '</a></li>';
}
}
nivelAnterior = r.registros[i]['Nivel'];
idFuncionalidadeAnterior = r.registros[i]['IdFuncionalidadeAnterior'];
}
menuItem += '</ul>';
$('#menuClever').append(menuItem);
}
}
})(jQuery);
I made a test with this ajax too:
$.ajax({
type: "GET",
url: a_href,
crossDomain: true,
error: function (result) {
alert('Oh no: ' + result.responseText)
}
});