Bind Form from javascript Play framework - javascript

Is there a way to use this code:
Form<StatusSolicitacao> status = form(StatusSolicitacao.class).bindFromRequest();
But the data coming from a javascript?
--- More information ---
First i show the list:
<div id="backtabela">
<div id="tabela">
<table>
<tr><td>Cadastrar Status</td></tr>
<tr>
<td id="cabecalho">Descrição</td>
<td id="cabecalho">Acoes</td>
</tr>
#for(status <- lista){
<tr>
<td>#status.getDescricao()</td>
<td><img src="#routes.Assets.at("img/edit.png")" alt="" title="Editar"/>
<img src="#routes.Assets.at("img/erase.png")" alt="" title="Remover"/>
</td>
</tr>
}
</table>
</div>
</div>
Then i click on the Cadastrar Status to register a new data.
The form:
#(status: Form[StatusSolicitacao])
#import helper._
#implicitFieldConstructor = #{ FieldConstructor(formPattern.f) }
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head>
<fieldset id="fieldset">
<legend>Novo Status</legend>
<div id="form">
<br/><br/><br/><br/><br/>
#form(routes.StatusController.cadastrarStatus()) {
<br/><br/><br/><br/><br/>
#inputText(status("descricao"), '_label -> "Descrição", '_help->"")
<div class="actions">
<input type="submit" value="Cadastrar" class="btn primary" id="botao">
</div>
</div>
</fieldset>
Cancelar
}
Note: All this content is inside the div nova in this html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Solicitação Compra</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("css/geral.css")">
<link rel="shortcut icon" type="img/png" href="#routes.Assets.at("img/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/init.js")" type="text/javascript"></script>
</head>
<body>
<div id="geral-flow">
<div id="topo">
<div id="logo" style="display:none;">
<img src="#routes.Assets.at("img/logotipo-pequeno.png")" alt="titulo" id="tituloPequeno"/>
</div>
<div id="acessos">
<div id="pesquisa">
<input type="text" name="search" id="search" value="Pesquisa"
onfocus="this.value=''" onblur="this.value='Pesquisa'"></input>
<ul></ul>
</div>
<div id="acessoRapido" >
</div>
</div>
</div>
<div id="conteudo">
<div id="titulo">
<ul>
<li style="background-position:-2px -107px;"><h2>Solicitações</h2></li>
</ul>
</div>
<div id="separador"></div>
<div id="menu">
<ul>
<li class="solicitacao">Solicitaçoes<br /></li>
<li class="departamento">Departamentos<br /></li>
<li class="responsavel">Responsavel<br /></li>
<li class="status">Status<br /></li>
</ul>
</div>
<div id="nova"></div>
<div class="clear"></div>
</div>
</div>
</body>
</html>
but when I save my new record on the bench in the back that html does not appear.

javaScript or not basically its a post request if your name attributes coincide the StatusSolicitacao attributes i believe it will work
else just use the following String attribute = Form.form().bindFromRequest().get("attribute");

Related

How do have my page fill the username and password on an external site?

I am trying to make an HTML page, that when users access, it will take them to a 3rd party external site (I have no control over), and fill in the username and password fields, and log them in.
This is the source of the external site, which I got from my browser.
<!DOCTYPE html>
<html><head>
<title>Omitted | Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript">
var areActiveModsSelected = false;
var areInactiveModsSelected = false;
function SetActiveSelection()
{
var checkboxes = document.ActiveMods.getElementsByClassName("ModSelection");
areActiveModsSelected = !areActiveModsSelected;
SetSelection(checkboxes, areActiveModsSelected);
}
function SetInactiveSelection()
{
var checkboxes = document.InactiveMods.getElementsByClassName("ModSelection");
areInactiveModsSelected = !areInactiveModsSelected;
SetSelection(checkboxes, areInactiveModsSelected);
}
function SetSelection(checkboxes, isSelected)
{
for(var i=0, n=checkboxes.length;i<n;i++)
{
checkboxes[i].checked = isSelected;
}
}
function checkSavegame()
{
var e = document.getElementById("savegame");
if (e != null) {
var savegame = e.options[e.selectedIndex].text;
var isEmpty = isEmptySavegame(savegame);
document.getElementById("mapSelector").disabled = !isEmpty;
document.getElementById("difficultySelector").disabled = !isEmpty;
}
}
function isEmptySavegame(value)
{
var ret = value.match(/SAVEGAME \d\d* - Empty/g) || value.match(/SPIELSTAND \d\d* - Leer/g) || value.match(/SAUVEGARDE \d\d* - Vide/g);
return ret != null;
}
window.onload = function()
{
checkSavegame();
}
</script>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/monitor.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<script type="text/javascript" src="js/all.js"></script>
</head>
<body>
<div class="white-bg clearfix">
<header class="main-header" role="banner" data-module="sticky">
<div class="header-bar clearfix"> <div class = "row column"> <div class = "top-bar-right"> <ul class = "menu float-left"><li><a target="_newTwitter" href="https://twitter.com/url"><span class="icon icon-twitter"></span></a></li><li><a target="_newFacebook" href="https://www.facebook.com/giants.farming.simulator"><span class="icon icon-facebook"></span></a></li><li><a target="_newYoutube" href="http://www.youtube.com/user/giantssoftware"><span class="icon icon-youtube"></span></a></li><li><a target="_newGoogleolus" href="https://plus.google.com/109211762279175256996"><span class="icon icon-google"></span></a></li> </ul>
<ul class="dropdown menu float-right"><li class="is-dropdown-submenu-parent is-down-arrow menu-flags"><img src="img/icons/flag-en.png" alt="lang"><ul class="menu submenu is-dropdown-submenu first-sub vertical"><li><img style="border:1px solid #000;" src="img/icons/flag-en.png" alt="English"><span class="country">English</span> <span>(en)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-de.png" alt="Deutsch"><span class="country">Deutsch</span> <span>(de)</span></li><li><img style="border:1px solid #000;" src="img/icons/flag-fr.png" alt="Francais"><span class="country">Francais</span> <span>(fr)</span></li></ul></li></ul> </div>
</div>
</div>
<div class="top-bar"> <div class="row column"> <div class="top-bar-left"> <img src="img/logo.png"> </div> <div class="top-bar-right"> <ul class="menu float-left"> <li><span>HOME</span></li>
<li><span>SAVEGAMES</span></li>
<li><span>MODS</span></li>
<li><span>JOURNAL</span></li>
<li><div class="status-indicator online"><span>ONLINE</span></div></li></ul></div></div></div></header><section class="content-wrap"><div class="row"> <div class="medium-8 columns">
<img src="template/gsfs.png"><br/><br/><h2>Login to server</h2>
<p>Please enter your login credentials</p>
<div class="row column">
<form name="input" action="index.html?lang=en" method="POST"><div class="table2"><div class="row column table-even"><div class="medium-3 columns column-label">Username</div><div class="medium-9 columns"><input type="text" name="username" value=""></div></div><div class="row column table-odd"><div class="medium-3 columns column-label">Password</div><div class="medium-9 columns"><input type="password" name="password" value=""></div></div><div class="row column table-even text-right">
<input class="button button-form-submit" name="login" type="submit" value="Login"></div></div></form><br />
<h2>Dedicated Server Mobile App (Free)</h2><div><a class="itunesbadge" href="https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1135922781&mt=8" style="display:inline-block;overflow:hidden;background:url(https://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg) no-repeat;width:135px;height:40px;background-position: center;"></a><a class="googleplaybadge" href="https://play.google.com/store/apps/details?id=com.giantssoftware.fs17_dedi_app" style="margin-left: 5px; display:inline-block;overflow:hidden;background:url(https://play.google.com/intl/en_us/badges/images/apps/en-play-badge-border.png) no-repeat;width:141px;height:40px;background-size: cover;background-position-x: -4px;background-position-y: -3px;"></a></div></div>
</div>
<div class="medium-4 columns">
<div class="social-wrapper">
<div class="social-header clearfix">
<div class="title-wrap clearfix" style="line-height: 62px;">
<i class="icon icon-twitter"></i><span>Twitter</span>
</div>
Follow
</div>
<!-- Load from cache: ../cached/fs17_dedi_twitter_cache_farmingsim_4.json-->
<div class="social-news-block">
<p>RT hi: Come and meet us at E3 at booth West Hall #4512 to learn more about Farming Simulator 19, the next game in the successf…</p>
<span class="post-date">about 1 hour ago</span>
</div>
<div class="social-news-block">
<p>Are you are bale stacking champion? Are you at #blank ? Then show us your skills. The… <a target="_blank" href="blank">nothing</a></p>
<span class="post-date">4 days ago</span>
</div>
<div class="social-news-block">
<span class="post-date">11 days ago</span>
</div>
<div class="social-news-block">
<p>RT #url: We are glad to announce our plans for further expansion by moving to bigger office spaces for our two existing studios…</p>
<span class="post-date">12 days ago</span>
</div>
</div>
</div>
</div>
</section>
<div class="partners clearfix text-center"> <div class="row"> <div class="columns">
<img style="vertical-align:text-top;" src="template/image_11.gif" /> </div> </div> </div> <footer class="main-footer clearfix">
<div class="row">
<div class="medium-8 columns">
<div class="copyright"><img class="copyright__logo" src="img/logos/footer-logo.png"><div>© 2016 GIANTS Software GmbH Alle Rechte vorbehalten.<br>Alle anderen Warenzeichen sind das Eigentum ihrer jeweiligen Besitzer.</div></div> </div>
<div class="medium-4 small-12 columns">
<ul class="menu menu-footer float-right">
<li>7.0.5.0</li>
</ul>
</div>
</div>
</footer>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/frontend.js"></script>
<script>$(document).foundation();</script>
</div>
</body>
</html>
I tried this, but it simply redirects to the page without filling any of the fields.
<DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
window.onload = function() {
document.getElementById('loginForm').submit();
};
</script>
</head>
<body>
<form id="loginForm" action="URL of site" method="POST">
<input type=hidden name="username" value="moo"/>
<input type=hidden name="password" value="boo"/>
</form>
</body>
</html>
What is wrong with my code, and how can I achieve my goal?
Thank you.

Write into Firebase Database on the Web

I have a file form.php,
if I enter noting into the form and click the submit button on the web and it write a dictionary into the firebase database successfully,
var dict = {
Name: writeName,
City: "111",
Country: "222",
Address: "333",
};
of course the Name is "".
But if i type something such as "Peter" or something else in the form and click submit button, most if the time it will write nothing into the database.
Please kindly help to solve this issue.
here with the form.php code.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
<link rel="shortcut icon" href="images/favicon.png" />
</head>
<body>
<!-- Wrapper -->
<div id="wrapper">
<!-- Header -->
<header id="header">
<div class="inner">
<!-- Logo -->
<a href="" class="logo">
<span class="title"></span>
</a>
</div>
</header>
<!-- Main -->
<div id="main">
<div class="inner">
<header>
</header>
<section>
<form id="form1" name="form1">
<div class="row uniform">
<div class="6u 12u$(xsmall)">
<input type="text" name="ContactName" id="ContactName" value="" required placeholder="公司名字(必填)" />
</div>
<div class="12u$">
<ul class="actions">
<center>
<li><input type="submit" name="submit" id="submit" onClick="submitClick()" class="button special fit" form="form1" value="提交"></li>
<li><input type="reset" class="button special fit" value="Reset" /></li>
</center>
</ul>
</div>
</div>
</form>
</div>
</div>
</section>
</section>
</section>
</div>
</div>
<!--
<footer id="footer">
<div class="inner">
<section>
<h2>Get in touch</h2>
<form method="post" action="#">
<div class="field half first">
<input type="text" name="name" id="name" placeholder="Name" />
</div>
<div class="field half">
<input type="email" name="email" id="email" placeholder="Email" />
</div>
<div class="field">
<textarea name="message" id="message" placeholder="Message"></textarea>
</div>
<ul class="actions">
<li><input type="submit" value="Send" class="special" /></li>
</ul>
</form>
</section>
<section>
<ul class="copyright">
<center><small>© All rights reserved ♥ Grand Production House ♥ Email</small></center>
</ul>
<ul class="icons">
<li><span class="label">Twitter</span></li>
<li><span class="label">Facebook</span></li>
<li><span class="label">Instagram</span></li>
<li><span class="label">Dribbble</span></li>
<li><span class="label">GitHub</span></li>
<li><span class="label">500px</span></li>
<li><span class="label">Phone</span></li>
<li><span class="label">Email</span></li>
</ul>
</section>
</div>
</footer>
-->
</div>
<!-- Scripts -->
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "zzzzzzzzzzzzz",
authDomain: "zzzzzzzzzzz",
databaseURL: "zzzzzzzzzzzz",
projectId: "zzzzzzzzzz",
storageBucket: "zzzzzzzzzzzzzzzzzz",
messagingSenderId: "zzzzzzzzzzzzzzzzzz"
};
firebase.initializeApp(config);
</script>
<script>
function submitClick() {
var name = document.getElementById("ContactName");
var writeName = name.value;
var dict = {
Name: writeName,
City: "111",
Country: "222",
Address: "333",
};
firebase.database().ref().child("SUBMIT").push().set(dict);
}
</script>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</body>
</html>
Change:
<li><input type="submit" name="submit" id="submit" onClick="submitClick()" class="button special fit" form="form1" value="提交"></li>
to this:
<li><input type="button" name="btn" id="btn" onClick="submitClick()" class="button special fit" form="form1" value="提交"></li>
Also refer to this:
Submit and onclick not working together
onClick didn't work inside form?

Error in jQuery DatePicker

I need a DatePicker element in my page. I have the below code already in place:
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
#{
ViewBag.Title = "Check Printing";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h3>Define Check Batch</h3>
<table>
<tr>
<td>Check Type:</td>
<td>#Html.DropDownList("list", ViewData["list"] as SelectList)</td>
</tr>
<tr>
<td>Pay Period:</td>
<td>12/17/2014 - 01/08/2015</td>
</tr>
<tr>
<td>Check Date:</td>
<td><input type="text" id="datepicker" /></td>
</tr>
<tr>
<td>Starting Check Number:</td>
<td></td>
</tr>
</table>
#section scripts
{
<script type="text/javascript">
$(document).ready(function () {
$("#datepicker").each(function () {
$(this).datepicker();
});
});
</script>
}
However, when i run this code, it gives me the following error:
Unhandled exception at line 126, column 17 in http://localhost:53130/CheckPrinting/CheckPrinting
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'datepicker'
I'm not sure what's happening, everything looks like it's set up right?
Thanks
Edit: Here is the "Dynamic" code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=Edge">
<title>Check Printing - SAAS</title>
<meta name="description" content="Student Accounting and Allotment System" />
<link href="/Content/Site.less" rel="stylesheet"/>
<link href="/Content/custom/custom.less" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.8.3.js"></script>
</head>
<body>
<!--Masthead-->
<div class="masthead">
<!--Utility Bar-->
<div class="navbar">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="navbar-header" style="margin-left:30px; margin-top:20px;">
<object data="/Content/images/US-JobCorps-Logo.svg" type="image/svg+xml" width="60" height="60" style="float:left; margin-right:5px;"></object>
<div style="float:right; margin-top:-20px;">
<h2>SAAS</h2>
<h6>Student Accounting and Allotment System</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
John Doe <b class="caret" style="margin-left:20px;"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--Main Navigation-->
<div class="navbar navbar-primary">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="margin-bottom:0px; padding-bottom:0px;">
<li></i> Check Register</li>
<li></i> Reconcile</li>
<li></i> Student Info</li>
<li></i> Check Printing</li>
<li></i> Reissues</li>
<li></i> Centers</li>
<li></i> Reports</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid body-content" style="margin-top:-39px;">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<h3>Define Check Batch</h3>
<table>
<tr>
<td>Check Type:</td>
<td><select id="list" name="list"><option value="0">- Select -</option>
<option value="1">Payroll</option>
<option value="2">Termination</option>
<option value="3">Allotment</option>
<option value="4">Bonus</option>
</select></td>
</tr>
<tr>
<td>Pay Period:</td>
<td>12/17/2014 - 01/08/2015</td>
</tr>
<tr>
<td>Check Date:</td>
<td><input type="text" id="datepicker" /></td>
</tr>
<tr>
<td>Starting Check Number:</td>
<td></td>
</tr>
</table>
<hr />
</div>
<script src="/Scripts/jquery-2.1.1.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/respond.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#datepicker").each(function () {
$(this).datepicker();
});
});
</script>
</body>
</html>
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="IE=Edge">
<title>#ViewBag.Title - SAAS</title>
<meta name="description" content="Student Accounting and Allotment System" />
#Styles.Render("~/bundles/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<!--Masthead-->
<div class="masthead">
<!--Utility Bar-->
<div class="navbar">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="navbar-header" style="margin-left:30px; margin-top:20px;">
<object data="~/Content/images/US-JobCorps-Logo.svg" type="image/svg+xml" width="60" height="60" style="float:left; margin-right:5px;"></object>
<div style="float:right; margin-top:-20px;">
<h2>SAAS</h2>
<h6>Student Accounting and Allotment System</h6>
</div>
</div>
</div>
<div class="col-md-3">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
John Doe <b class="caret" style="margin-left:20px;"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--Main Navigation-->
<div class="navbar navbar-primary">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" style="margin-bottom:0px; padding-bottom:0px;">
<li class="#Url.MakeActive("", "CheckRegister")"></i> Check Register</li>
<li class="#Url.MakeActive("About", "Home")"></i> Reconcile</li>
<li class="#Url.MakeActive("Student")"></i> Student Info</li>
<li class="#Url.MakeActive("About", "Home")"></i> Check Printing</li>
<li class="#Url.MakeActive("About", "Home")"></i> Reissues</li>
<li class="#Url.MakeActive("About", "Home")"></i> Centers</li>
<li class="#Url.MakeActive("About", "Home")"></i> Reports</li>
</ul>
</div>
</div>
</div>
</div>
<div class="container-fluid body-content" style="margin-top:-39px;">
#RenderBody()
<hr />
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#*#Scripts.Render("~/bundles/dataTables")*#
#*#Scripts.Render("~/bundles/custom")*#
#*#Scripts.Render("~/bundles/StudentAllotments")*#
#RenderSection("scripts", required: false)
</body>
</html>
It's working fine here.
I used your code in this example, just remove a lot of the menu stuff to keep it simple. If this example is not working for you, then it may be an error specific to your development environment and/or browser.
$(document).ready(function () {
$("#datepicker").datepicker();
});
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<h3>Define Check Batch</h3>
<table>
<tr>
<td>Check Type:</td>
<td><select id="list" name="list"><option value="0">- Select -</option>
<option value="1">Payroll</option>
<option value="2">Termination</option>
<option value="3">Allotment</option>
<option value="4">Bonus</option>
</select></td>
</tr>
<tr>
<td>Pay Period:</td>
<td>12/17/2014 - 01/08/2015</td>
</tr>
<tr>
<td>Check Date:</td>
<td><input type="text" id="datepicker" /></td>
</tr>
<tr>
<td>Starting Check Number:</td>
<td></td>
</tr>
</table>
I'm assuming that you're using Visual Studio (based on your code) - there's a lot of options to be able to debug your code and see exactly where the error is happening.
Check simple things - make sure jQuery is loaded first before jQuery UI, jQuery should only be loaded one time on the page. Are there scripts interfering with jQuery in some way? If all of these are okay, then start inserting breakpoints and step through it until you find the problem.
If you can create a fiddle or a snippet that reproduces your exact problem, then I'd be happy to look into it further for you, but without being on your machine - I can't reproduce this problem that you're having.
I think if you just do that, it should work :
$(document).ready(function () {
$("#datepicker").datepicker();
});
Since #datepicker is an id

jquery-ui dialog does not show HTML server error message

I want to show a html page which is saved in a string with jquery-ui dialog. Unfortunately no dialog opens.
This is my code:
$(failedRequest.responseText).dialog();
The error message in the js console says:
Uncaught TypeError: Cannot read property 'display' of undefined
I also tried
$('<html><body><h1>A title</h1>And some text.</body></html>').dialog();
which works fine.
I assume there's something in the HTML code which causes .dialog() to fail. This is the compelente HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>EAI Configuration Web :: Status page</title>
<link href="/EAIConfig/styles/design.css" rel="stylesheet" type="text/css" media="all" />
<link href="/EAIConfig/styles/print.css" rel="stylesheet" type="text/css" media="print" />
<link rel="shortcut icon" type="image/x-icon" href="/EAIConfig/img/favicon.ico" />
<link rel="icon" type="image/x-icon" href="/EAIConfig/img/favicon.ico" />
<script type="text/javascript">
function onChangeAutoSessionClose() {
var checked = document.getElementById('autoSessionClose').checked;
$.post("autoSessionClose.action", {autoSessionClose: checked});
};
</script>
</head>
<body id="page-home">
<div id="maincontainer">
<div id="header">
<div class="headerTop">
<div class="logo">
<img src="/EAIConfig/img/galenicaLogo.gif"
title="" />
</div>
<div id="blockMainPopup" style="float:right">
<form id="logout" name="logout" action="logout" method="post">
<a class="item" href="javascript:print()"><img
src="/EAIConfig/img/iconPrint.gif"
alt="Print Page" /> title.print</a>
login.as : ugxnbpluse
<input type="submit" id="logout_logout" name="action:logout" value=""/>
</form>
</div>
<div class="row"></div>
</div>
</div>
<div id="content">
<div class="leftcontent">
<br/>
<ul>
title.mappingDefinition
<li> title.mapping</li>
<li>
title.businessServiceDefinition</li>
<li> title.dataStoreEntity</li>
<li> title.valueConversion</li>
<li> title.conditionalValueConversion</li>
</ul>
<br/>
<ul>
title.messageTypeDefinition
<li>
title.taskMessageType</li>
<li> title.messageType</li>
<li> title.outputConfiguration</li>
<li> title.configurationHeader</li>
<li>
title.startTaskContent</li>
</ul>
<br/>
<ul>
title.administration
<li>
title.contractorDefinition
</li>
<li>
title.partnerGroupList
</li>
<li>
title.holidayCalendar
</li>
<li>
title.exportImport
</li>
<li>
title.lastChange
</li>
<li>
title.translation
</li>
</ul>
<br/>
<ul>
title.reports
<li>
title.reports.partner
</li>
</ul>
</div>
<div class="rightcontent">
<div id="pagetitle">
<h1>
title.eaiConfiguration
-
Status page
</h1>
<h2>
</h2>
</div>
<div class="row">
</div>
<br/><br/><br/>
<p style="font-size: 1.2em;font-weight: bold;margin: 1em 0px;">Internal Server Error</p>
<p>Internal Server Error</p>
<p>You can get technical details here.<br>
Please continue your visit at our home page.
</p>
</div>
</div>
</div>
</body>
</html>
Any ideas about how to get this HTML shown in a dialog?

Custom Javascript not being loaded into mvc 4 view on initial page load

I have a MVC 4 application which uses jquery mobile, i also have my own .JS file where all my functionality is stored.
When i run the application and navigate to my selected view and view my page source all of the scripts files are loaded except my custom script :/ i have tried placing this script in different places within my view and im still having no success.
If i F5 the page then my custom script files are loaded and everything works as it should, how would i get my custom script to load into my page on the initial page load?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi; width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Index</title>
<link href="~/Scripts/jquery.mobile-1.4.4.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/jquery.mobile-1.4.4.min.js"></script>
<script src="~/Scripts/CustomScript/questions.js"></script>
</head>
<body>
<div data-role="page">
<form id="InspectionForm" method="post">
<input id="LoggedUserName" type="hidden" value="#Request.Cookies["UserInfo"]["UserName"]" />
<div data-role="navbar">
<ul>
<li>Back</li>
</ul>
</div>
<div id="QuestionBuilder" style="padding: 10px 5px;">
<div data-role="collapsible-set">
#foreach (var item in Model)
{
<div data-role="collapsible" data-theme="d" id="expandable-#item.QuestionID">
<h3 onclick="checkQuestion(#item.QuestionID)">#Html.DisplayFor(modelItem => item.QuestionNumber) . #Html.DisplayFor(modelItem => item.Question)</h3>
<table width="100%">
<tr>
<td>
<div class="containing-element">
<style>
.containing-element .ui-slider-switch
{
width: 8em;
}
</style>
<select name="QuestionOptional-#item.QuestionID" id="QuestionOptional-#item.QuestionID" data-role="slider" data-questionid="#item.QuestionID"
onchange="SetQuestionOptional(#item.QuestionID,#item.SectionID,#item.SubSectionID)">
<option value="off">Optional</option>
<option value="on">Mandatory</option>
</select>
</div>
</td>
<td style="text-align: right;">
<a onclick="ShowDetails(#item.QuestionID)" href="#DetailsM" data-rel="dialog" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Details</a>
<a onclick="ShowComments(#item.QuestionID)" href="#CommentsM" data-rel="dialog" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Comments</a>
<a onclick="ShowActions(#item.QuestionID)" href="#ActionsM" data-rel="dialog" class="ui-shadow ui-btn ui-corner-all ui-btn-inline ui-mini">Actions</a>
</td>
</tr>
<tr>
<td colspan="2">
#if (item.QuestionTypeID == Convert.ToInt32(questionType.SingleSelect))
{
<fieldset data-role="controlgroup">
<input type="hidden" id="rBtnCheckedState" />
#foreach (var opt in item.Options)
{
<input type="radio" name="radio-choice" id="radio-choice-#opt.OptionID" value="#opt.QuestionText" data-mandatoryaction="#opt.IsMandatoryActions"
data-mandatorycomment="#opt.IsMandatoryComments" />
<label for="radio-choice-#opt.OptionID">#opt.QuestionText</label>
}
</fieldset>
}
</td>
</tr>
</table>
</div>
}
</div>
</div>
</form>
</div>
<div id="DetailsM" data-role="dialog">
</div>
<div id="ActionsM" data-role="dialog">
</div>
<div id="CommentsM" data-role="dialog">
</div>
</body>
</html>
Give your full path addresses in below references
<link href="~/Scripts/jquery.mobile-1.4.4.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/jquery.mobile-1.4.4.min.js"></script>
<script src="~/Scripts/CustomScript/questions.js"></script>

Categories