I've created Modal Dialog box declaratively in dojo, and I want to show it to the user on page load, but I don't understand why the following code is not displaying anything on the browser on page load. Could anyone please tell me what wrong am I doing?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Dijit!</title>
<!-- load Dojo -->
<link rel="stylesheet" href="../lib/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="../../css/style.css">
<script src="../lib/dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
<script>
require(["dojo/ready","dojo/parser","dijit/Dialog", "dijit/form/ComboBox", "dijit/Menu", "dijit/MenuItem", "dojox/form/PasswordValidator","dijit/form/ValidationTextBox","dijit/form/Form","dijit/form/SimpleTextarea","dijit/form/Button"]);</script>
</script>
</head>
<!-- set the claro class on our body element -->
<body class="claro">
<div data-dojo-id ="dialogOne" data-dojo-type = "dijit.Dialog" title = "Create Users" style="display: none">
<div class="dijitDialogPaneContentArea">
<div class = "formQuestion">
<span>Personal Details</span>
</div>
<div>
<label class = "firstLabel" for="Pname">Name </label>
<input type ="text" id ="Pname" data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props = "required :'true', invalidMessage:'',ucfirst:'true'" tabindex = '1'/>
<label class = "secondLabel" for = "combo">Role </label>
<Select id="combo" data-dojo-type="dijit.form.ComboBox" tabindex = '2'>
<option>Admin</option>
<option>User</option>
</Select><br>
<label class = "firstLabel" for="Pemail">Email</label>
<input type="text" id="Pemail" name="address"
data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props = "placeHolder:'(will be the username)',
trim:'true',
ucfirst : 'true'" tabindex = '3'/>
<label class = "secondLabel" for="Pmobile">Mobile</label>
<input type="text" id="Pmobile" name="address" tabindex = '4'
data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props = " trim : 'true',
regExp : '(\\d){10}',
invalidMessage : 'Mobile number is invalid',
ucfirst : 'true'" /><br>
<div dojoType="dojox.form.PasswordValidator"
name="password">
<div><label class = "firstLabel" for ="pass">Password </label><input type="password" id ="pass"
pwType="new" tabindex = '5'/>
<label class = "secondLabel" for ="confirm">Confirm Password </label><input type="password"
pwType="verify" tabindex = '6'/></div>
</div><br>
<div class ="dijitDialogPaneActionBar">
<button data-dojo-type = "dijit.form.Button" type ="submit" tabindex = '10' id = "ok" onClick="return dialogOne.isValid();">OK</button>
<button data-dojo-type = "dijit.form.Button" type = "button" tabindex = '11' onClick = "dialogOne.onCancel();" id = "cancel">Cancel</button>
</div>
</div>
<!-- This event is not firing -->
<script type="dojo/method" data-dojo-event="onLoad" >
dialogOne.show();
</script>
</div>
</body>
</html>
Try the below code. Make changes to the loading dojo part to point to correct path of your dojo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Dijit!</title>
<!-- load Dojo -->
<link rel="stylesheet" href="../dijit/themes/claro/claro.css">
<script src="../dojo/dojo.js" data-dojo-config="isDebug: true, async: true, parseOnLoad: true"></script>
<script>
require(["dojo/ready","dijit/Dialog", "dijit/form/ComboBox", "dijit/Menu", "dijit/MenuItem", "dojox/form/PasswordValidator","dijit/form/ValidationTextBox","dijit/form/Form","dijit/form/SimpleTextarea","dijit/form/Button","dojo/domReady!"]
, function(ready){
ready(function(){
console.debug("Ready!");
dialogOne.show();
});
});
</script>
</head>
<!-- set the claro class on our body element -->
<body class="claro">
<div data-dojo-id ="dialogOne" data-dojo-type = "dijit.Dialog" title = "Create Users" style="display: none">
<div class="dijitDialogPaneContentArea">
<div class = "formQuestion">
<span>Personal Details</span>
</div>
<div>
<label class = "firstLabel" for="Pname">Name </label>
<input type ="text" id ="Pname" data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props = "required :'true', invalidMessage:'',ucfirst:'true'" tabindex = '1'/>
<label class = "secondLabel" for = "combo">Role </label>
<Select id="combo" data-dojo-type="dijit.form.ComboBox" tabindex = '2'>
<option>Admin</option>
<option>User</option>
</Select><br>
<label class = "firstLabel" for="Pemail">Email</label>
<input type="text" id="Pemail" name="address"
data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props = "placeHolder:'(will be the username)',
trim:'true',
ucfirst : 'true'" tabindex = '3'/>
<label class = "secondLabel" for="Pmobile">Mobile</label>
<input type="text" id="Pmobile" name="address" tabindex = '4'
data-dojo-type="dijit.form.ValidationTextBox"
data-dojo-props = " trim : 'true',
pattern : '(\\d){10}',
invalidMessage : 'Mobile number is invalid',
ucfirst : 'true'" /><br>
<div dojoType="dojox.form.PasswordValidator"
name="password">
<div><label class = "firstLabel" for ="pass">Password </label><input type="password" id ="pass"
pwType="new" tabindex = '5'/>
<label class = "secondLabel" for ="confirm">Confirm Password </label><input type="password"
pwType="verify" tabindex = '6'/>
</div>
</div><br>
<div class ="dijitDialogPaneActionBar">
<button data-dojo-type = "dijit.form.Button" type ="submit" tabindex = '10' id = "ok" onClick="return dialogOne.isValid();">OK</button>
<button data-dojo-type = "dijit.form.Button" type = "button" tabindex = '11' onClick = "dialogOne.onCancel();" id = "cancel">Cancel</button>
</div>
</div>
</div>
</div>
</body>
</html>
Try call the dialogOne.show() in the callback of the require function, change the "dojo/ready" into "dojo/domReady!" and place it at the end of the module array
Related
controller not sending to view . I m trying to send request from controller to view , but its not redirecting . controller always redirect to index page. when i summit the form . its always redirecting same index page ,
controller not sending to view .controller not sending to view
My controller is sending to another view. but its not working .
public IActionResult userLogin([FromBody] Users user)
{
string apiUrl = "https://localhost:44331/api/ProcessAPI";
var input = new
{
email = user.email,
password = user.password
};
string inputJson = (new JavaScriptSerializer()).Serialize(input);
WebClient client = new WebClient();
client.Headers["Content-type"] = "application/json";
// client.Encoding = Encoding.UTF8;
string json = client.UploadString(apiUrl + "/userLogin", inputJson);
// List<Users> customers = (new JavaScriptSerializer()).Deserialize<List<Users>>(json);
user = JsonConvert.DeserializeObject<Users>(json);
return View();
}
and the view page is
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#model myproject.Models.Users
#{
Layout = null;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Inventory Management System</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
#* <link rel="stylesheet" type="text/css" href="./includes/style.css">*#
#*<script type="text/javascript" rel="stylesheet" src="~/js/main.js"></script>*#
</head>
<body>
<div class="overlay"><div class="loader"></div></div>
<!-- Navbar -->
<br /><br />
<div class="container">
<div class="alert alert-success alert-dismissible fade show" role="alert">
#*<?php echo $_GET["msg"]; ?>*#
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
#*<?php
}
?>*#
<div class="card mx-auto" style="width: 20rem;">
<img class="card-img-top mx-auto" style="width:60%;" src="./images/login.png" alt="Login Icon">
<div class="card-body">
<form id="form_login" >
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
#*<input asp-for="Name" type="text" class="form-control" id="name" required />*#
<input asp-for="email" type="email" class="form-control" id="log_email" placeholder="Enter email">
<small id="e_error" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" name="log_password" asp-for="password" id="log_password" placeholder="Password">
<small id="p_error" class="form-text text-muted"></small>
</div>
<button type="submit" class="btn btn-primary"><i class="fa fa-lock"> </i>Login</button>
<span>Register</span>
</form>
</div>
<div class="card-footer">Forget Password ?</div>
</div>
</div>
<input type="text" id="txtName" />
<input type="button" id="btnGet" value="Get Current Time" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#form_login").on("submit", function () {
var data = {
email: $("#log_email").val(),
password: $("#log_password").val(),
// Phone: $("#phone").val()
}
// data: $("#form_login").serialize(),
// var data = $("#form_login").serialize();
console.log(data);
$.ajax({
type: 'POST',
url: '/Process/userLogin',
// window.location.href = '#Url.Action("Process", "Dashboard")';
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data),
success: function (result) {
alert('Successfully received Data ');
console.log(result);
window.location.href = "Process/Dashboard";
// window.location.href = '#Url.Content("~/User/Home")';
// window.location.href = '#Url.Action("Process", "Dashboard")';
// window.location.href = DOMAIN + "/dashboard.php";
},
error: function () {
alert('Failed to receive the Data');
console.log('Failed ');
}
})
})
});
</script>
</body>
</html>
From your code, since you want to use JQuery Ajax to submit the form data to the action method, in the form submit event, you should use the event.preventDefault() to prevent the form submit action, then you can use JQuery Ajax to submit the form.
Second, does the Index page is the Process/Dashboard page? From your code, we can see in the Ajax success function, you will use the window.location.href to change the request URL, you can change the redirect page from here.
help to make the checkbox status persist after reloading the page, thanks!
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js" type="text/javascript"></script>
<input type="checkbox" name="enable" id="enable" />Enable
<input type="text" id="name" name="name" disabled />
<script>
window.onload=function(){
document.getElementById('enable').onchange=function(){
var txt = document.getElementById('name');
txt.disabled = !this.checked;
};
};
</script>
can someone help me out with this script. I am trying to do a Formular for submit a recipe.
I want to do a dynamic ingredient formular, where i can add and remove ingredients.
Unfortunately it doesn´t work as I want. My removing function is always removing the first ingredient. How can I remove the the igredient I want to.
Here is my code so far:
function copy(objButton)
{
if(objButton.parentNode)
{
hinzufg=objButton.parentNode.cloneNode(true);
objButton.form.appendChild(hinzufg);
for(j=0;j<objButton.form.lastChild.childNodes.length;++j)
{
if(objButton.form.lastChild.childNodes[j].type=='text')
{
objButton.form.lastChild.childNodes[j].value='';
break;
}
}
}
}
function remove(objButton)
{
var entf = document.getElementById('ingredients');
entf.parentNode.removeChild(entf);
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Recipe</title>
</head>
<form action="">
<h2>Recipes</h2>
<strong>Name</strong> <br />
<input type="text" size="50" > <br /><br />
<strong>Ingredients</strong> <br />
<div id="ingredients">
<input type="text" id="AmountIngredients" name="zutatMenge1[]"> ...
<input type ="text" id="zutat" name="firstIngredient[]">
<input type="button" value="+" onclick="copy(this)">
<input type="button" value="X" onclick="remove(this)">
</div>
</form>
<body>
</body>
</html>
So, I've this form in server side:
case class Employe(id: Int, name: String)
val myForm = Form(
mapping(
"id" -> number,
"name" -> text
) (Employe.apply) (Employe.unapply)
)
So, in client side I need send three same forms to the server:
<html>
<body>
<div class="employe">
<input type="number" class="employe_id"/>
<input type="text" class="employe_name"/>
</div>
<div class="employe">
<input type="number" class="employe_id"/>
<input type="text" class="employe_name"/>
</div>
<div class="employe">
<input type="number" class="employe_id"/>
<input type="text" class="employe_name"/>
</div>
<input type="button" id="send_button"/>
</body>
</html>
and this data I send to the server via ajax with following code:
var allEmployes = $('.employe');
var addUrl = '/employes/add';
var employesArray = [];
for(var i = 0; i < allEmployes.length; i++) {
var currentRow = $(allEmployes[i]);
var emplId = currentRow.find('.employe_id').val();
var emplName = currentRow.find('employe_name').val();
var employe = {
'id' : emplId,
'name': emplName
};
employesArray.push(employe);
}
$.post(addUrl, { 'employes': employesArray })
.done(function(response){
console.log(response);
})
.fail(function(error){
console.log(error);
});
but, I don't know how to get three same forms from request (in Action of Server side)? Anybody know how to can this?
Thanks in Advance!
In controller change form mapping as
val myForm = Form(
mapping(
"id" -> list(number),
"name" -> list(text)
) (Employe.apply) (Employe.unapply)
)
and in html
<div class="employe">
<input type="number" name="id[0]" />
<input type="text" name="name[0]" />
</div>
<div class="employe">
<input type="number" name="id[1]" />
<input type="text" name="name[1]" />
</div>
<div class="employe">
<input type="number" name="id[2]" />
<input type="text" name="name[2]" />
</div>
I have a wcf service calling from mobile platfrom. When i call wcf from browser in mobile device it works.Then i convert my html to an application using phone. But this time , i can not call the wcf service. Any ideas?
Here is my html ;
<title>Mobilizm</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/Mobilizm.css" rel="stylesheet" />
<link href="css/jquery.mobile.structure-1.3.2.min.css" rel="stylesheet" />
<script src="js/JSON.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
<script>
$(document).on("pageinit", function (event) {
$('#save').click(function () {
debugger;
var typesArray = new Array();
var myType = new Object();
myType.FirstName = $("#name").val();
myType.LastName = $("#surname").val();
myType.EMailAddress1 = $("#email").val();
myType.MobilePhone = $("#cellphone").val();
typesArray.push(myType);
$.support.cors = true;
$.getJSON("http://xxxxx/Mobile/MobilizmService.svc/CreateCustomer?callback=?", { customers: JSON.stringify(typesArray), origin: 167440003, status: 167440001 })
.done(function (json) {
alert("ok");
})
.fail(function (jqxhr, textStatus, error) {
alert("false");
});
</script>
</head>
<body>
<div data-role="page">
<div data-theme="d" data-role="header">
<h3>Yeni Kullanıcıgg</h3>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="name">Ad:</label>
<input type="text" name="name" id="name" value="" data-mini="true" />
</div>
<div data-role="fieldcontain">
<label for="surname">Soyadı:</label>
<input type="text" name="surname" id="surname" value="" data-mini="true" />
</div>
<div data-role="fieldcontain">
<label for="email">E-Posta:</label>
<input type="text" name="email" id="email" value="" data-mini="true" />
</div>
<div data-role="fieldcontain">
<label for="cellphone">Cep Telefonu:</label>
<input type="text" name="cellphone" id="cellphone" value="" data-mini="true" />
</div>
<input data-theme="d" type="button" value="Kaydet" id="save" />
</div>
<div data-theme="d" data-role="footer">
<h3>Yeni Kullanıcı</h3>
</div>
</div>
After several hours searching , ı solved the problem. You have to add this tag to your config.xml file. Your origin is where you host your webservice.
<access origin="xxx" subdomains="true" />
Try my code:
var serviceUrl = 'http://' + _SERVER_ADDRESS + '/RestService.svc/' + method;
var jsonCallbackMethod = 'spycallback493285721';
$.ajax({
type : "GET",
url : serviceUrl,
jsonpCallback : jsonCallbackMethod,
data : params,
dataType : 'jsonp',
timeout : 11*1000 // Necessary in order to detect not found(404) error
})