I am new to MVC so pardon if my questions come across as stupid.
I have a main layout file (_MainLayout.cshtml) and a secondary layout file (_AdminLayout.cshtml). Both these files reside in my /Views/Shared folder.
The _MainLayout.cshtml looks like:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" type="image/x-icon" href="~/icons/favicon.ico" />
<title>U - #ViewData["Title"]</title>
<link rel="stylesheet" href="~/Content/Site.css"/>
</head>
<body>
<nav>
<div id="MainMenu" style="top:45px; height:40px; width:100%; position:fixed">
<ul style="list-style-type:none; text-align:center">
<li class="u-li-rightfloatinglink">#Html.ActionLink("Admin", "_AdminLayout", "Admin")</li>
<li class="u-li-rightfloatinglink">#Html.ActionLink("Contact", "Contact", "Home")</li>
<li class="u-li-rightfloatinglink">#Html.ActionLink("About", "About", "Home")</li>
<li class="u-li-rightfloatinglink">#Html.ActionLink("Home", "Index", "Home")</li>
</ul>
</div>
</nav>
<div id="MainBody" style="top: 80px; width:100%; text-align:center; position:fixed">
#RenderBody()
</div>
<div id="MainFooter" style="position:fixed; bottom:0px; width:100%; height:20px; background:#015da0">
<p style="display:table-cell; color:#ffffff; text-align:center; vertical-align: middle">© #DateTime.Now.Year - U</p>
</div>
#RenderSection("scripts", required: false)
</body>
The _AdminLayout.cshtml looks like:
#{
ViewBag.Title = "_AdminLayout";
Layout = "~/Views/Shared/_MainLayout.cshtml";
}
<h2>_AdminLayout</h2>
<div>
#RenderBody()
</div>
The ManageTableContent.cshtml is again supposed to be displayed in the #RenderBody section of the _AdminLayout.cshtml.
ManageTableContent.cshtml looks like:
#{
Layout = "~/Views/Shared/_AdminLayout.cshtml";
ViewBag.Title = "Manage Table Content";
}
<body>
<div class="u-div-header">
<p class="u-p-header">Manage Table Content</p>
</div>
<br />
<div style="width: 100%">
<table class="u-table-layouttable">
<tr>
<td class="u-td-description">Table Name here</td>
<td class="u-td-buttons">
<button class="u-button-addrecord" title="Add Record">
<img />
</button>
<button class="u-button-deleterecord" title="Delete Record">
<img />
</button>
<button class="u-button-clonerecord" title="Clone Record">
<img />
</button>
</tr>
<tr>
<td colspan="2">
<table id="ManagedTable" class="u-table-datatable">
<tr class="u-tr-datatable">
<td></td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 100%">
<tr>
<td>
<input id="Submit" type="submit" value="Submit" style="float: right" />
<input id="Cancel" type="reset" value="Cancel" style="float: right" />
</td>
</tr>
</table>
</div>
</body>
For some reason if I get this error when I try and open my _AdminLayout.cshtml by selecting the Admin link from my _MainLayout.cshtml:
Additional information: The file "~/Views/Shared/_AdminLayout.cshtml" cannot be requested directly because it calls the "RenderBody" method.
Controller Code:
namespace U.Controllers
{
public class AdminController : Controller
{
// GET: Admin
public ActionResult ManageTableContent()
{
return View();
}
public ActionResult _AdminLayout()
{
ViewBag.Message = "Your admin page.";
return View();
}
}
}
If I remove the #RenderBody()from my code then the _AdminLayout.cshtml loads fine.
I need the #RenderBody() in my _AdminLayout.cshtml because here I will display partial Views again.
Any help would be appreciated.
You can only have one #RenderBody() per master layout (that's where the output of a View goes to).
If _AdminLayout.cshtml is not a master layout, then you should use #RenderPartial to insert partial views there.
Based on your comment,
when you call _AdminLayout action
then it calls automatically _AdminLayout.cshtml and as it has #RenderBody() method in his view file it get error. Action controller view can not hold #RenderBody().
you can do that way. Change your ActionResult _AdminLayout name to AdminLayout.
And create another view file named AdminLayout.cshtml.
And in that cshtml you can code this way.
#{
Layout = "~/Views/Shared/_AdminLayout.cshtml";
ViewBag.Title = "Manage Table Content";
}
I hope you understand why do you get this error.
Related
Hi,
I wanted to get the text from the webpage with Cucumber & Groovy in Katalon Studio. Please find the below Step Definition which has the xpath and below is the html code.
I wanted to read the below two lines from the page which can be referred in the html code also below. The number 596 varies each time i.e., dynamic.
Create Inquiry Tracking # 596
The inquiry for system tracking # 596 has been submitted successfully
Step Definition
inquiryt1 = WebUI.getText(findTestObject(By.xpath("//td[#class='pageTitle'][1]")))
Full Page HTML :
<html lang="en">
<head>
<title>Govt Inquiry</title>
<link rel="stylesheet" type="text/css" href="?appId=gmpinquiry&flName=/uitmpl/en/css/uitmpl.css" />
<link rel="stylesheet" type="text/css" href="?appId=gmpinquiry&flName=/gmpinquiry/css/gmpinquiry.css" />
<script type="text/javascript" src="?appId=gmpinquiry&flName=/uitmpl/js/other_scripts.js"></script>
<script type="text/javascript" src="?appId=gmpinquiry&flName=/uitmpl/js/freezingHeader.js"></script>
<script type="text/javascript" src="?appId=gmpinquiry&flName=/uitmpl/js/sortTable.js"></script>
<noscript>
<style>
table.mQH {display:block;}
</style>
</noscript>
<style id="antiClickjack">body{display:none !important;}</style>
<script type="text/javascript">
if (self === top) {
var antiClickjack = document.getElementById("antiClickjack");
antiClickjack.parentNode.removeChild(antiClickjack);
} else {
top.location = self.location;
}
</script>
</head>
<body onload="uitmpl_qhPageInit()">
<!-- Skip To Main Content should be the next element immediately after body element -->
<div class="skipnav">Skip to Main Content </div>
<script type="text/javascript" src="?appId=gmpinquiry&flName=/uitmpl/js/menu_script.js"></script>
<script type="text/javascript" src="?appId=gmpinquiry&flName=/uitmpl/js/application_settings.js"></script>
<script type="text/javascript" src="?appId=gmpinquiry&flName=/uitmpl/js/global_settings.js"></script>
<script language="javascript">
application.data = {
td_1: "Home",
td_2: "Govt Inquiry",
td_3: "Create Inquiry",
td_4: "Reports/Search",
td_5: "My Preference",
url_1: "javascript:OnGMPPortalSubmit(document.frmMenuScr, '')",
url_2: "javascript:OnMenuSubmit (document.frmMenuScr, 'homepage')",
url_3: "javascript:OnMenuDispatch (document.frmMenuScr, 'setupinquiry','create')",
url_4: "javascript:OnMenuSubmit (document.frmMenuScr, 'inqsubmenu')",
url_5: "javascript:OnMenuSubmit (document.frmMenuScr, 'userpref')"
};
global.data = {
//td_1: "AT&T BusinessDirect",
td_1: "Write Us",
td_2: "Help <span class=\"offscrn\"> - Opens a PDF Document for Help</span>",
td_3: "Close",
//td_3_1: "General Help",
//td_3_2: "Application Tutorial",
//td_3_3: "<span id=\"shHd\">Show</span> Quick Help",
//url_1: "javascript:bizDirect()",
url_1: "javascript:OnMenuSubmit(document.frmMenuScr, 'compose')",
url_2: "javascript:uitmpl_popUpReg(document.frmMenuScr.action + '?appId=' + document.frmMenuScr.appId.value + '&flName=' + document.frmMenuScr.context.value + '/help/Inquiry_UG.pdf')",
url_3: "javascript:window.close();"
//url_3_1: "javascript:uitmpl_popUpReg(document.frmMenuScr.action + \\'?appId=\\' + document.frmMenuScr.appId.value + \\'&flName=\\' + document.frmMenuScr.context.value + \\'/help/Inquiry_UG.pdf\\')",
//url_3_2: "#",
//url_3_3: "javascript:uitmpl_qhPageToggle()"
};
</script>
<script type="text/javascript" src="?appId=gmpinquiry&flName=/gmpinquiry/js/script.js"></script>
<!--************ uitmplbegin: tBAN ************-->
<!--****** begin:background graphic ******-->
<table width="100%" cellspacing="0" border="0" class="tBAN">
<tr>
<td><img src="?appId=gmpinquiry&flName=/uitmpl/en/img/swoosh.gif" width="650" height="69" alt="" border="0" /></td>
</tr>
</table>
<!--****** end:background graphic ******-->
<!--****** begin:logo and company title ******-->
<div class="logoCompany">
<table width="100%" cellspacing="0" border="0" class="tBAN">
<tr>
<td class="logo"><img src="?appId=gmpinquiry&flName=/uitmpl/en/img/attbizdirect.gif" width="291" height="63" alt="AT&T | Business Direct" border="0" /></td>
<td><!-- stretchable cell --></td>
<!-- max characters for company title: 72 w/ breaks (24 per line) -->
<td class="company">ATT Gov Sol Dev<br/>rm0013
<!-- Begin Skip Top Navigation -->
<!-- <div class="skipnav">Skip to Main Content</div> -->
<!-- End Skip Top Navigation --></td>
</tr>
</table>
</div>
<!--****** end:logo and company title ******-->
<!--****** begin:application title ******-->
<table cellspacing="0" border="0" class="appTitle">
<tr>
<td>View and Analyze Govt. Bills: Govt Inquiry</td>
</tr>
</table>
<!--****** end:application title ******-->
<!--************ uitmplend: tBAN ************-->
<!--************ uitmplbegin: tNAV ************-->
<div id="glbl">
<script language="JavaScript1.3">
<!--
uitmpl_list("global");
//-->
</script>
<noscript>
<div class="globalAcc">
<table class="global_main" cellspacing="0" border="0">
<tr>
<td class="global_main_spacer"> </td>
<td>AT&T BusinessDirect</td><td class="pipe">|</td><td>Write Us</td><td class="pipe">|</td><td>Help</td>
</tr>
</table>
</div>
</noscript>
</div>
<div id="app">
<script language="JavaScript1.3">
<!--
uitmpl_list("application");
//-->
</script>
<noscript>
<div class="applicationAcc"><table class="application_main" cellspacing="0" border="0">
<tr>
<td>Home</td>
<td class="pipe">|</td>
<td>Create/Update Dispute</td>
<td class="pipe">|</td>
<td>Reports/Search</td>
<td class="pipe">|</td>
<td>My Preference</td>
<td class="pipe">|</td>
<td>User Management</td>
</tr>
</table>
</div>
</noscript>
</div>
<!--************ uitmplend: tNAV ************-->
<form name="frmMenuScr" action="/servlet/GMPGate" method="get">
<input type="hidden" name="appId" value="gmpinquiry">
<input type="hidden" name="nextScr" value="userpref">
<input type="hidden" name="methodToCall" value=""/>
<input type="hidden" name="context" value="/gmpinquiry"/>
</form>
<!--***** begin:grid *****-->
<table width="100%" cellspacing="0" border="0" class="wrap">
<tr>
<td width="100%" class="grid">
<!-- InstanceBeginEditable name="PageHeader" -->
<!--************ uitmplbegin: tPH ************-->
<!--****** begin:titles ******-->
<table cellspacing="0" border="0" class="tPH">
<!--****** begin:page title ******-->
<tr>
<td class="pageTitle">Create Inquiry Tracking # 599</td>
</tr>
<!--****** end:page title ******-->
</table>
<!--****** end:titles ******-->
<!--************ uitmplend: tPH ************-->
<!-- InstanceEndEditable -->
</td>
<td width="182" class="grid"><img src="?appId=gmpinquiry&flName=/uitmpl/en/img/pixel.gif" width="182" height="1" alt="" border="0" /></td>
</tr>
</table>
<!--***** end:grid *****-->
<!--***** begin:grid *****-->
<table width="100%" cellspacing="0" border="0" class="wrap">
<tr>
<td width="100%" class="grid">
<!--- BeginOptional name="TaskConfirmation" --->
<!-- InstanceBeginEditable name="TaskConfirmation" -->
<!--************ uitmplbegin: mTC ************-->
<table cellspacing="0" cellpadding="2" border="0" class="mTC">
<tr class="msgConfirm">
<td> <img src="?appId=gmpinquiry&flName=/uitmpl/en/img/confirmation.gif" width="29" height="29"
border="0" alt="Confirmation." /></td><td>The inquiry for system tracking # 599 has been submitted successfully. </td>
</tr>
</table>
REASON FOR FAILED WITH THE SOLUTION
2019-06-26 18:40:10.049 ERROR c.k.k.c.c.keyword.CucumberReporter
- ❌ it should displays create inquiry pages FAILED.
Reason:
groovy.lang.MissingMethodException: No signature of method: static com.kms.katalon.core.testobject.ObjectRepository.findTestObject()
is applicable for argument types: (org.openqa.selenium.By$ByXPath) values: [By.xpath: //td[#class='pageTitle'][1]]
Possible solutions: findTestObject(java.lang.String), findTestObject(java.lang.String, java.util.Map) at CreateInquiry001.it_should_displays_create_inquiry_page2(CreateInquiry001.groovy:369)
at ✽.it should displays create inquiry pages(C:/Users/vdavuluri2/Katalon Studio/Govt Inquiry/Include/features/Create Inquiry-001.feature:55)
Katalon's findTestObject() method is used for selecting an object from the object repository. It doesn't work with By class.
You can try with something like the following: create an object with the given Xpath and then use WebUI.getText() on it:
TestObject testObject = new TestObject().addProperty("xpath", ConditionType.EQUALS, "//td[#class='pageTitle'][1]")
WebUI.getText(testObject)
The element with class pageTitle looks unique so why not user
//td[#class='pageTitle']
I am fairly new to coding and took on this project to create 1000 new accounts in an internal program we have at my work. I was able to get the macro to fill in the webform and proceed through 2 pages however at the third page I was unable to get it to click the submit button.
Code:
Sub Automate1()
Dim IE As Object
Dim doc As HTMLDocument
Set IE = CreateObject("InternetExplorer.Application")
IE.Visible = True
IE.navigate "https://associate.heritagerep.com/signup/signup.asp?
SectionID=10&t=10030&guid=CB57C450-F8D2-4644-98CB-99C37DA43668"
Do While IE.Busy
Application.Wait DateAdd("s", 1, Now)
Loop
Set doc = IE.document
'First Screen'
doc.getElementsByName("sponsor")(0).Value = "kffrep"
doc.getElementById("Username").Value = "75871"
doc.getElementById("email").Value = "75871#kff.com"
doc.getElementById("zip").Value = "111111"
doc.getElementsByName("Submit")(0).Click
Do While IE.Busy
Application.Wait DateAdd("s", 1, Now)
Loop
'Second Screen'
doc.getElementById("companyName").Value = "kff1"
doc.getElementById("OccupationTy_Select").Value = 34
doc.getElementById("fname").Value = "75871"
doc.getElementById("lname").Value = "kff1"
doc.getElementById("mstreet1").Value = "1 kff st"
doc.getElementById("mcity").Value = "Mississauga"
doc.getElementById("mstate").Value = "ON"
doc.getElementById("hphone").Value = "1111111"
doc.getElementById("emailConfirm").Value = "75871#kff.com"
doc.getElementsByName("SSN")(0).Value = "000000000"
doc.getElementById("password").Value = "password1"
doc.getElementById("passwordconfirm").Value = "password1"
doc.getElementsByName("securityanswer")(0).Value = "pizza"
doc.getElementsByClassName("btn btn-primary")(0).Click
Do While IE.Busy
Application.Wait DateAdd("s", 1, Now)
Loop
'Third Screen'
Set tags = doc.getElementsByClassName("btn btn-success")
For Each tagx In tags
If tagx.Name = "submitfinish" Then
tagx.Click
End If
Next
Do While IE.Busy
Application.Wait DateAdd("s", 1, Now)
Loop
'Fourth Screen'
doc.getElementsByName("Submit3")(0).Click
'Fifth Screen'
doc.getElementsByName("CheckOrderPaid")(0).Click
doc.getElementsByName("Shipped")(0).Click'
doc.getElementsByName("subAdminOpt")(0).Click
Flag
End Sub
Below is the HTML code for the troublesome button:
<input name="submitfinish" class="btn btn-success" type="submit" value="Finish Order">
I am not sure why the actions I used in the first 2 pages to click the submit button are suddenly not working on the third page. I have tried may different iterations trying to work around the problem but have yet to find one that is successful.
Appreciate any feedback.
Additional DOM Details:
<div class="text-right">
<a class="btn btn-default" href="/default.asp?guid=651F5B01-725B-4CCD-B12E-17CD5D59C472">Continue Shopping<!--Continue Shopping--></a>
<input name="submitcalc" class="btn btn-default" type="submit" value="Re-Calculate">
<input name="submitfinish" class="btn btn-success" type="submit" value="Finish Order"><!--Finish Order -->
</div>
Entire webpage HTML:
<!DOCTYPE html>
<html lang="en" class="non-mobile">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta content='width=device-width, initial-scale=1.0, maximum-
scale=1.0, user-scalable=0' name='viewport' />
<!-- Scripts -->
<script type="text/javascript" src="//code.jquery.com/jquery-
1.11.0.min.js"></script>
<script type="text/javascript" src="/common/script.js"></script>
<script type="text/javascript" src="/common/function/script_source.js"></script>
<script type="text/javascript" src="/common/jquery/jquery.validate.min.js"></script>
<script type="text/javascript" src="/common/function/functions.js"></script>
<!-- bootstrap -->
<script type="text/javascript" src="/responsive/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/responsive/js/common.js"></script>
<script type="text/javascript" src="/common/shadowbox/shadowbox.js"></script>
<script type="text/javascript" src="/responsive/js/jquery.animate-colors-min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<script type="text/javascript" src="//unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<!-- CSS -->
<link href="/common/shadowbox/shadowbox.css" rel="stylesheet">
<link href="/responsive/css/bootstrap.css" rel="stylesheet">
<link href="/responsive/css/bootstrap-custom.css" rel="stylesheet">
<link href="/responsive/css/bootstrap-ms.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.css" rel="stylesheet">
<!-- Parent Site overrides -->
<link href="//associate.heritagerep.com/clientinc/resources/css/common.css" rel="stylesheet">
<style type="text/css">
#import url('//associate.heritagerep.com/common/templates/public/css/custom.css');
</style>
<script type="text/javascript">
$(function() {
app.init({ domain: 'associate.heritagerep.com'});
});
</script>
</head>
<body class="responsive">
<!-- This is a helper so javascript can see whether or not this is a mobile device -->
<div id="isMobile" class="visible-xs"></div>
<form method="post" name="currencyty">
<input type="hidden" name="CartId" value="439915">
<table class="table table-striped">
<thead>
<tr>
<th>ItemCode<!--ItemCode--></th>
<th>Description<!--Descr--></th>
<th>Qty<!--Qty--></th>
<th>Currency<!--Currency--></th>
<th>Price Each<!--Price Each--></th>
<th>
Volume
</th>
<th>Volume 2<!--Volume 2--></th>
<th>Price Total<!-- Total--></th>
<th>
Points Total
</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td> <!-- ITEM CODE -->
1004
</td>
<td><!-- Description -->
Initial Certification Fee
</td>
<td> <!-- QTY -->
<input name="Qty_609000021&609000020&0&-1&1004&N" type="text" value="1" size="2" onblur="WidthTest(this,1);" />
</td>
<td>CAD</td>
<td>
$25.00
</td>
<td>
0
</td>
<td>
0
</td>
<td>
$25.00
</td>
<td>
0
</td>
<td class="text-right">
Edit<!--Edit-->
</td>
</tr>
<tr>
<td colspan="100%">
<div class="pull-left">
Add Item<!--Add-->
</div>
<div class="pull-right">
<input name="adItemCode" type="text" value="Item Code" size="10" onclick="this.value = ''" onblur="WidthTest(this,1);AddTableRow('ProductItemCode')"><!--Item Code-->
Qty:<!--Qty:--> <input name="adNewQty" type="text" value="1" size="2" onblur="WidthTest(this,1);">
<span style="font-weight:bold;vertical-align: middle; float: right;">
<input type="submit" name="submitadd" value="Add Item" onclick="whichButton='add';"><!--Add Item-->
</span>
</div>
</td>
</tr>
</tbody>
</table>
<div class="pull-right">
<ul class="list-group">
<li class="list-group-item">
<strong>Volume:</strong>
0
</li>
<li class="list-group-item">
<strong>Totals<!--Totals :-->:</strong>
$25.00
</li>
</ul>
</div>
<div class="clearfix"></div>
<div class="text-right">
Continue Shopping<!--Continue Shopping-->
<input type="submit" name="submitcalc" value="Re-Calculate" class="btn btn-default">
<input type="submit" name="submitfinish" value="Finish Order" class="btn btn-success"><!--Finish Order -->
</div>
</form>
<script language="javascript">
$(function() {
$('.fancy').fancybox({
'width' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe',
'topRatio': '0.1',
'autoHeight': true
});
});
</script>
</body>
You could try and attribute = value selector to target element. Let us know if an error and if so check if there is a parent iframe/frame tag.
ie.document.querySelector("[value='Finish Order']").click
Or
ie.document.querySelector("[value='Finish Order']").FireEvent "onclick"
I am creating a website using MVC5 (we do for all our websites here) and I am trying to integrate the FlexSlider (found here: https://woocommerce.com/flexslider/) into one of my pages.
I can't seem to get it working, the page just displays nothing, yet it appears in the 'Inspect Element' with each image as being 0x0 px.
HTML:
<div class="flexslider" data-controlnav="thumbnails">
<ul class="slides">
#if (Model.CDSContent != null)
{
foreach (var item in Model.CDSContent)
{
<li>
<a href="#">
<img src="#Html.Raw(item["newsimage"])" alt="Slide 2">
<div class="flex-caption">newstitle</div>
</a>
</li>
}
}
</ul>
</div>
I also have the JS and CSS linked:
<link rel="stylesheet" type="text/css" href="http://flexslider.woothemes.com/css/flexslider.css">
<link rel="stylesheet" type="text/css" href="http://lab.mattvarone.com/projects/jquery/totop/css/ui.totop.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.easing.js"></script>
<script type='text/javascript' src="http://flexslider.woothemes.com/js/jquery.mousewheel.js"></script>
<script type='text/javascript' src="http://lab.mattvarone.com/projects/jquery/totop/js/jquery.ui.totop.js"></script>
Of course its a little bit difficult to say why your code is not working.
Have you checked what #Html.Raw(item["newsimage"]) returns ?
But...
You could use a carousel that runs on bootstrap.
The code below i made is to scan a folder for images and then i send them to the view with a viewbag.
--Controller code Start--
var GetSliderImaged = Directory.EnumerateFiles(Server.MapPath("~/Content/SlideShowIndexPage")).Select(fn => Path.GetFileName(fn));
ViewBag.Sliderimages = GetSliderImaged;
--Controller code End--
--View code Start--
<div id="myCarousel" class="carousel slide MTop10 BRadius10 unselectable" data-ride="carousel" data-interval="6000">
<ol class="carousel-indicators" style="margin-bottom: 0px;">
#{
var ii = 0;
foreach (var image in ViewBag.Sliderimages)
{
if (ii == 0)
{
<li data-target="#myCarousel" data-slide-to="#ii" class="active"></li>
}
else
{
<li data-target="#myCarousel" data-slide-to="#ii"></li>
}
ii++;
}
}
</ol>
<div class="carousel-inner " role="listbox">
#{
var i = 0;
foreach (var image in ViewBag.Sliderimages)
{
if (i == 0)
{
<div class="item active">
<img src="~/Content/SlideShowIndexPage/#image" alt="#image" title="#image" class="img-responsive AWIndexPageSlideImage" />
<div class="carousel-caption">
</div>
</div>
i++;
}
else
{
<div class="item">
<img src="~/Content/SlideShowIndexPage/#image" alt="#image" title="#image" class="img-responsive AWIndexPageSlideImage" />
<div class="carousel-caption">
</div>
</div>
}
}
}
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
--View code End--
Just so you know .. the code is not complete but its works for sure if there are images "It does not check if there are no images in the viewbag etc"
But for sure that will be easy to make it yourself.
I created a CRUD operation with JSF and PrimeFaces 6 and EJB 3.1. The findAll() method works very fine because I can see the the fetched data List on the PrimeFaces DataTable. But when i click on Add, the popup shows up, but submiting the data to the managedbean does not work, i can see that, the command button does not seem to communicate with the bean. But the same code is working in another module of the same project. I keep wondering why this problem is occurring. I have tried all solutions such as Ajax="false", I have tried process="#this", I have also tried immediate="true", but nothing seems working. I have been stranded and need a solution. Thanks
THIS IS THE XHTML FILE
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:body>
<div>
<h:form id="subjectTopForm">
<p:growl id="growl" life="2000" />
<p:commandLink id="ajax" update="growl" onclick="PF('subjectAddDialog').show();">
<span class="btn waves-effect waves-light indigo">
<h:outputText value="Add new Subject"/>
</span>
</p:commandLink>
<!-- <BEGINNING OF SAVE POPUP DIALOG>-->
<p:dialog header="Add New Subject" widgetVar="subjectAddDialog" modal="true" height="auto" width="420" styleClass="customDialog">
<f:view>
<p:panelGrid columns="2">
<p:outputLabel value="SubjectName:" for="subjectName" class="table-row-height" />
<p:inputText id="subjectName" value="#{subject.sub.subjectName}" title="SubjectName" required="true" requiredMessage="The SubjectName field is required." />
<p:outputLabel/>
<p:commandButton process="#this" immediate="true" action="#{subject.addSubject()}" value="Add Subject" update=":subjectForm">
<f:ajax execute="subjectForm" render="subjectForm:subjectDataTable" />
<p:resetInput target=":subjectForm"/>
</p:commandButton>
</p:panelGrid>
</f:view>
</p:dialog>
<!-- END OF SAVE POPUP DIALOG-->
</h:form>
</div>
<div>
<h:form id="editSubjectPopupDialog">
<!-- UPDATE FORM DIALOG-->
<p:dialog header="Edit Subject" widgetVar="subjectEditDiaglog" modal="true" height="auto" width="420" styleClass="customDialog">
<f:view>
<p:panelGrid columns="2">
<p:outputLabel value="SubjectName:" for="subjectName" class="table-row-height" />
<p:inputText id="subjectName" value="#{subject.sub.subjectName}" title="SubjectName" required="true" requiredMessage="The SubjectName field is required." />
<p:outputLabel/>
<p:commandButton action="#{subject.editSubject()}" value="Save Changes" update=":editSubjectPopupDialog">
<f:ajax execute="subjectForm" render="subjectForm:subjectDataTable" />
<p:resetInput target=":editSubjectPopupDialog"/>
</p:commandButton>
</p:panelGrid>
</f:view>
</p:dialog>
<!--END OF UPDATE FORM DIALOG-->
</h:form>
</div>
<div>
<f:view>
<h:form id="subjectForm">
<h:dataTable value="#{subject.findAll()}" var="item" id="subjectDataTable">
<h:column>
<f:facet name="header">
<h:outputText value="SubjectName"/>
</f:facet>
<h:outputText value="#{item.subjectName}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Edit"/>
</f:facet>
<p:commandLink action="#{subject.setSub(item)}" oncomplete="PF('subjectEditDiaglog').show()" update=":editSubjectPopupDialog">
<i class="mdi-editor-mode-edit">
</i>
</p:commandLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Delete"/>
</f:facet>
<h:commandLink action="#{subject.delete(item)}" onclick="return confirm('Are you sure?')">
<i class="mdi-action-delete">
</i>
<f:ajax render="subjectForm:subjectDataTable" />
</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
</f:view>
</div>
<div>
<p>
</p>
<p>
</p>
</div>
</h:body>
</html>
BELOW IS THE JSF MANAGED BEAN
package com.nan.app.controller;
import com.nan.app.crud.entityclasses.Subjects;
import com.nan.app.crud.sessionbeans.SubjectService;
import javax.enterprise.context.SessionScoped;
import java.io.Serializable;
import java.util.List;
import javax.ejb.EJB;
import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;
/**
*
* #author Nandom
*/
#ManagedBean(name = "subject")
#SessionScoped
public class SubjectController implements Serializable {
#EJB
SubjectService service;
private Subjects sub = new Subjects();
public Subjects getSub() {
return sub;
}
public void setSub(Subjects sub) {
this.sub = sub;
}
public void addSubject() {
service.create(sub);
service.findAll();
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, sub.getSubjectName(), null);
FacesContext.getCurrentInstance().addMessage(null, message);
sub = new Subjects();
}
public void editSubject() {
service.edit(sub);
service.findAll();
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Update Executed Successfully", null);
FacesContext.getCurrentInstance().addMessage(null, message);
sub = new Subjects();
}
public void delete(Subjects entity) {
service.remove(entity);
service.findAll();
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_INFO, "Deleted Successfully", null);
FacesContext.getCurrentInstance().addMessage(null, message);
}
public Subjects find(Object id) {
return service.find(id);
}
public List<Subjects> findAll() {
return service.findAll();
}
}
Pls NOTE: I have a side navigation in my mail-layout.xhtml which the links are controlled by the navigation bean as shown below.
Main Application UI with Side Navigation
THE CODE FOR THIS LAYOUT IS BELOW
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- <h:outputStylesheet name="./css/default.css"/>
<h:outputStylesheet name="./css/cssLayout.css"/>-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="msapplication-tap-highlight" content="no"/>
<meta name="description" content="Materialize is a Material Design Admin Template,It's modern, responsive and based on Material Design by Google. "/>
<meta name="keywords" content="materialize, admin template, dashboard template, flat admin template, responsive admin template,"/>
<title>School Management System</title>
<!-- Favicons-->
<link rel="icon" href="#{resource['images/favicon/favicon-32x32.png']}" sizes="32x32"/>
<!-- Favicons-->
<link rel="apple-touch-icon-precomposed" href="#{resource['images/favicon/apple-touch-icon-152x152.png']}"/>
<!-- For iPhone -->
<meta name="msapplication-TileColor" content="#00bcd4"/>
<meta name="msapplication-TileImage" content="#{resource['images/favicon/mstile-144x144.png']}"/>
<!-- For Windows Phone -->
<link href="#{resource['css/widget.css']}" type="text/css" rel="stylesheet" media="screen,projection"/>
<!-- CORE CSS-->
<link href="#{resource['css/materialize.min.css']}" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="#{resource['css/style.min.css']}" type="text/css" rel="stylesheet" media="screen,projection"/>
<!-- Custome CSS-->
<link href="#{resource['css/custom/custom.min.css']}" type="text/css" rel="stylesheet" media="screen,projection"/>
<!-- INCLUDED PLUGIN CSS ON THIS PAGE -->
<link href="#{resource['js/plugins/prism/prism.css']}" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="#{resource['js/plugins/perfect-scrollbar/perfect-scrollbar.css']}" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="#{resource['js/plugins/chartist-js/chartist.min.css']}" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="#{resource['js/plugins/data-tables/css/jquery.dataTables.min.css']}" type="text/css" rel="stylesheet" media="screen,projection"/>
<style>
.mdi-action-delete {
font-size: 25px;
}
.mdi-editor-mode-edit {
font-size: 25px;
}
.addForm {
display:inline-block;
width: 300px;
text-wrap:none;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.table-row-height {
height:30px;
}
</style>
</h:head>
<h:body>
<!-- Start Page Loading -->
<div id="loader-wrapper">
<div id="loader"></div>
<div class="loader-section section-left"></div>
<div class="loader-section section-right"></div>
</div>
<!-- End Page Loading -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START HEADER -->
<header id="header" class="page-topbar">
<!-- start header nav-->
<div class="navbar-fixed">
<nav class="navbar-color">
<div class="nav-wrapper">
<ul class="left">
<li><h1 class="logo-wrapper"><img src="#{resource['images/materialize-logo.png']}" alt="materialize logo"/> <span class="logo-text">Materialize</span></h1></li>
</ul>
<div class="header-search-wrapper hide-on-med-and-down">
<i class="mdi-action-search"></i>
<input type="text" name="Search" class="header-search-input z-depth-2" placeholder="Explore Materialize"/>
</div>
<ul class="right hide-on-med-and-down">
<li><img src="#{resource['images/flag-icons/United-States.png']}" alt="USA" />
</li>
<li><i class="mdi-action-settings-overscan"></i>
</li>
<li><a href="javascript:void(0);" class="waves-effect waves-block waves-light notification-button" data-activates="notifications-dropdown"><i class="mdi-social-notifications"><small class="notification-badge">5</small></i>
</a>
</li>
<li><i class="mdi-communication-chat"></i>
</li>
</ul>
<!-- translation-button -->
<ul id="translation-dropdown" class="dropdown-content">
<li>
<img src=" #{resource['images/flag-icons/United-States.png']}" alt="English" /> <span class="language-select">English</span>
</li>
</ul>
<!-- notifications-dropdown -->
<ul id="notifications-dropdown" class="dropdown-content">
<li>
<h5>NOTIFICATIONS <span class="new badge">5</span></h5>
</li>
<li class="divider"></li>
<li>
<i class="mdi-action-add-shopping-cart"></i> A new order has been placed!
<time class="media-meta" datetime="2015-06-12T20:50:48+08:00">2 hours ago</time>
</li>
</ul>
</div>
</nav>
</div>
<!-- end header nav-->
</header>
<!-- END HEADER -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START MAIN -->
<div id="main">
<!-- START WRAPPER -->
<div class="wrapper">
<!-- START LEFT SIDEBAR NAV-->
<aside id="left-sidebar-nav">
<ul id="slide-out" class="side-nav fixed leftside-navigation">
<li class="user-details cyan darken-2">
<div class="row">
<div class="col col s4 m4 l4">
<img src="images/avatar.jpg" alt="" class="circle responsive-img valign profile-image"/>
</div>
<div class="col col s8 m8 l8">
<ul id="profile-dropdown" class="dropdown-content">
<li><i class="mdi-action-face-unlock"></i> Profile
</li>
<li><i class="mdi-hardware-keyboard-tab"></i> Logout
</li>
</ul>
<a class="btn-flat dropdown-button waves-effect waves-light white-text profile-btn" href="#" data-activates="profile-dropdown">John Doe<i class="mdi-navigation-arrow-drop-down right"></i></a>
<p class="user-roal">Administrator</p>
</div>
</div>
</li>
<li class="bold"><i class="mdi-action-dashboard"></i> Dashboard
</li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold"><a class="collapsible-header waves-effect waves-cyan"><i class="mdi-action-view-carousel"></i> Settings</a>
<div class="collapsible-body">
<ul>
<h:form style="width:400px; margin-left:-20px;">
<f:ajax render=":content" >
<li><h:commandLink value="Register Classes" action="#{navigation.setPage('/pages/RegisterClasses.xhtml')}" class="mdi-action-dashboard" /></li>
<li><h:commandLink value="Register Subjects" action="#{navigation.setPage('/pages/RegisterSubjects.xhtml')}" class="mdi-action-dashboard" /></li>
<li><h:commandLink value="Register Teachers" action="#{navigation.setPage('/pages/RegisterTeachers.xhtml')}" class="mdi-action-dashboard" /></li>
<li><h:commandLink value="Assign Form Teachers" action="#{navigation.setPage('/pages/AssignFormTeachers.xhtml')}" class="mdi-action-dashboard" /></li>
<li><h:commandLink value="Assign Subject Teachers" action="#{navigation.setPage('/pages/AssignSubjectTeachers.xhtml')}" class="mdi-action-dashboard" /></li>
</f:ajax>
</h:form>
</ul>
</div>
</li>
</ul>
</li>
</ul>
<i class="mdi-navigation-menu"></i>
</aside>
<!-- END LEFT SIDEBAR NAV-->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START CONTENT -->
<section>
<!--start container-->
<div class="container">
<div class="divider"></div>
<ui:insert name="content">
</ui:insert>
<!-- Floating Action Button -->
<div class="fixed-action-btn" style="bottom: 50px; right: 19px;">
<a class="btn-floating btn-large">
<i class="mdi-action-stars"></i>
</a>
<ul>
<li><i class="large mdi-communication-live-help"></i></li>
<li><i class="large mdi-device-now-widgets"></i></li>
<li><i class="large mdi-editor-insert-invitation"></i></li>
<li><i class="large mdi-communication-email"></i></li>
</ul>
</div>
<!-- Floating Action Button -->
</div>
<!--end container-->
</section>
<!-- END CONTENT -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START RIGHT SIDEBAR NAV-->
<aside id="right-sidebar-nav">
<ul id="chat-out" class="side-nav rightside-navigation">
<li class="li-hover">
<i class="mdi-navigation-close"></i>
<div id="right-search" class="row">
<form class="col s12">
<div class="input-field">
<i class="mdi-action-search prefix"></i>
<input id="icon_prefix" type="text" class="validate"/>
<label for="icon_prefix">Search</label>
</div>
</form>
</div>
</li>
</ul>
</aside>
<!-- LEFT RIGHT SIDEBAR NAV-->
</div>
<!-- END WRAPPER -->
</div>
<!-- END MAIN -->
<!-- //////////////////////////////////////////////////////////////////////////// -->
<!-- START FOOTER -->
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">
<span>Copyright © 2015 <a class="grey-text text-lighten-4" href="" target="_blank">Nandom Gusen</a> All rights reserved.</span>
<span class="right"> Design and Developed by <a class="grey-text text-lighten-4" href="">Nandom Gusen</a></span>
</div>
</div>
</footer>
<!-- END FOOTER -->
<!-- ================================================
Scripts
================================================ -->
<!-- jQuery Library -->
<!-- <script type="text/javascript" src="#{resource['js/plugins/jquery-1.11.2.min.js']}"></script> -->
<!--materialize js-->
<script type="text/javascript" src="#{resource['js/materialize.min.js']}"></script>
<!--prism-->
<script type="text/javascript" src=" #{resource['js/plugins/prism/prism.js']}"></script>
<!--scrollbar-->
<script type="text/javascript" src="#{resource['js/plugins/perfect-scrollbar/perfect-scrollbar.min.js']}"></script>
<!-- chartist -->
<script type="text/javascript" src="#{resource['js/plugins/chartist-js/chartist.min.js']}"></script>
<!--plugins.js - Some Specific JS codes for Plugin Settings-->
<script type="text/javascript" src="#{resource['js/plugins.min.js']}"></script>
<!--custom-script.js - Add your own theme custom JS-->
<script type="text/javascript" src="#{resource['js/custom-script.js']}"></script>
<script type="text/javascript" src=" #{resource['js/plugins/data-tables/js/jquery.dataTables.min.js']}"></script>
<script type="text/javascript" src="#{resource['js/plugins/data-tables/data-tables-script.js']}"></script>
<script type="text/javascript">
/*Show entries on click hide*/
$(document).ready(function () {
$(".dropdown-content.select-dropdown li").on("click", function () {
var that = this;
setTimeout(function () {
if ($(that).parent().hasClass('active')) {
$(that).parent().removeClass('active');
$(that).parent().hide();
}
}, 100);
});
});
</script>
</h:body>
</html>
BELOW IS THE NAGIVATION BEAN
package com.nan.app.navigation;
import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
/**
*
* #author Nandom
*/
#ManagedBean(name = "navigation")
public class NavigationBean implements Serializable {
public static final long serialVersionUID = 1L;
public String page;
#PostConstruct
public void init() {
page = "/pages/RegisterClasses.xhtml"; // Default include.
// page = "/template/default/content-layout.xhtml?";
}
public String getPage() {
return page;
}
public void setPage(String page) {
this.page = page;
}
}
This application works well, but the first view(RegisterClassex.xhtml) is the view that will work well. Other views like RegisterSubject.xhtml will not be able to communicate with its own bean.
What could be the problem?
Thanks #Kukeltje for your contributions towards the success of this application and for helping me to solve a major error that has hindered my progress for many days. I have figured out the problem. I added the annotaion #SessionScoped to my navigation bean and it solved the problem. Below is the code that solved the problem
package com.nan.app.navigation;
import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
/**
*
* #author Nandom
*/
//#Named("navigation")
#ManagedBean(name = "navigation", eager = true)
#SessionScoped
public class NavigationBean implements Serializable {
public static final long serialVersionUID = 1L;
public String page;
#PostConstruct
public void init() {
page = "/pages/RegisterSubjects.xhtml"; // Default include.
// page = "/template/default/content-layout.xhtml?";
}
public String getPage() {
return page;
}
public void setPage(String page) {
this.page = page;
}
}
But i noticed another problem. whenever i navigate to a new view page, the Popup Dialog doesnt come up with the first click, i have to click the button the second time before the popup Dialog comes up. What could probably be the cause of this problem?
sorry about input mistakes, english its not my mother lang.
I have this code written on normal html that i managed to transform into xhtml file, i want to send the value shown on <input id="f_date"> to <h:inputText>:
<script src="../js/jscal2.js" type="text/javascript" xml:space="preserve"></script>
<script src="../js/lang/en.js" type="text/javascript" xml:space="preserve"></script>
<link rel="stylesheet" type="text/css" href="../css/jscal2.css" />
<link rel="stylesheet" type="text/css" href="../css/border-radius.css" />
<link rel="stylesheet" type="text/css" href="../css/steel/steel.css" />
<h:form id="form1">
<table>
<tr>
<td colspan="4" id="cont"></td>
</tr>
<tr>
<td>
<input style="text-align: center" name="date" id="f_date"
size="14" />
<h:inputText id="f_date" value="#{solicitud.fechaI}" maxlength="10" size="10" valueChangeListener="#{solicitud.fechaIText}">
<a4j:ajax event="keyup" render="fechaI, fIni" status="statusFI"/>
</h:inputText>
</td>
<td>
<input style="text-align: center" name="hour" id="f_hour" size="2" />
</td>
<td>
:
</td>
<td>
<input style="text-align: center" name="minute" id="f_minute"
size="2" />
</td>
</tr>
</table>
</h:form><script type="text/javascript" xml:space="preserve">//<![CDATA[
function updateFields(cal) {
var date = cal.selection.get();
if (date) {
date = Calendar.intToDate(date);
document.getElementById("f_date").value = Calendar.printDate(date, "%Y-%m-%d");
}
document.getElementById("f_hour").value = cal.getHours();
document.getElementById("f_minute").value = cal.getMinutes();
};
Calendar.setup({
cont : "cont",
showTime : 12,
onSelect : updateFields,
onTimeChange : updateFields
});
//]]></script>
Thanks in advance, best regards
You should reuse input element from <h:inputText> when setting up JS calendar. Use inputField argument to pass id of input generated by JSF. It could be form1:f_date but check html source to make sure.
EDIT:
prefix id with "form1:" in updateFields"
document.getElementById("form1:f_date")
and get rid of
<input style="text-align: center" name="date" id="f_date"
size="14" />