I keep getting this syntax error on the browser. I am not sure what am I missing here.
Basically I am trying to make a request to an external web api which takes an array of checked check box values as parameters passed in query parameter.
Here is my javascript.
function lookup() {
var query = document.getElementById("sform").value;
// var res = PageMethods.lookupfromjs_Click(query, onSuccess, onError);
var dttypeList;
$('#Button1').click(function() {
$('input[type=\"checkbox\"]').each(function(){
dttypeList.push(this.name);
alert( $.toJSON(dttypeList));
});
});
}
Here is the html
<!DOCTYPE html>
<head runat="server">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/lookup.js" type="text/javascript"></script>
<script src="Scripts/getdatatype.js" type="text/javascript"></script>
</head>
<body>
<section class="webdesigntuts-workshop">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" >
</asp:ScriptManager>
<div>
<asp:TextBox type="search" name="search" id="sform" placeholder="What are you looking for?" runat="server" />
<asp:TextBox type="search" name="hdnText" id="hdnText" runat="server" />
<button id="Button1" onclick="lookup()" type="button">Search</button>
</div>
<div>
<p> </p>
</div>
<div>
<button id="Getdtbtn" type="button" onclick="getDatatypes()">Get Datatypes</button>
</div>
</form>
</section>
</body>
</html>
Does the lookup function even need to be declared? With the limited HTML snippet you posted, I tried to cobble something closer together resembling what you may have been trying to achieve:
var query = document.getElementById('sform').value;
var dtypeList = [];
$('#Button1').click(function() {
$('input[type="\checkbox\"]').each(function() {
dtypeList.push(this.name);
alert(JSON.stringify(dtypeList));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="sform">
<label for="Hello">Hello</label>
<input type="checkbox" name="Hello">
<label for="World">World</label>
<input type="checkbox" name="World">
<button id="Button1" type="button">Search</button>
</form>
This still loops through all of the checkboxes and spits them out to an alert once you click the button.
Also, please refer to this post about $.toJSON(): https://stackoverflow.com/a/7759630/3611025
Related
I am trying to implement bootstrap file input form GitHub in asp.net.
Below is my .aspc file code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/bootstrap.min.js"></script>
<script src="bootstrap-fileinput/js/fileinput.js"></script>
<link href="bootstrap-fileinput/css/fileinput.css" rel="stylesheet" />
<title></title>
<script>
$("#input-id").fileinput({
'showUpload': false,
'maxFileCount': 5,
'showPreview': false,
'mainClass': "input-group-lg"
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="input-id" type="file" class="file-loading" multiple>
</div>
</form>
</body>
</html>
It works. But I need to customize it.
I do not want preview of files ('showPreview': false)
I do not want to show Upload button ('showUpload': false)
I want to limit number of files ('maxFileCount': 5)
I have used required plugins for customization.
But Still I get default preview/output.
Can someone help with this?
Thanks for your help.
Your code has minor errors. You need to add "multiple" directive to your input tag and change class to: "file-loading".
<form id="form1" runat="server">
<div>
<input id="input-id" type="file" class="file-loading" multiple>
</div>
</form>
And here is a working demo: https://jsfiddle.net/16jut54d/
Here is the master page code:
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
}
function showPosition(position) {
document.getElementById("Long").value = position.coords.longitude;
document.getElementById("Lat").value = position.coords.latitude;
}
}
</script>
</head>
<body onload="getLocation()">
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<input type="hidden" id="Long" name="Long" value="" runat="server" />
<input type="hidden" id="Lat" name="Lat" value="" runat="server" />
</form>
</body>
Here is the server side page load code:
Context.Response.Write(((HtmlInputHidden)Page.Master.FindControl("Long")).Value)
I have inspected the dom elments after load and this is what i see:
<input name="ctl00$Long" type="hidden" id="Long" value="34.7574951">
<input name="ctl00$Lat" type="hidden" id="Lat" value="32.003683900000006">
But when T try to retrieve them as shown above (C# pageload) I get string empty.
Server side executes first, then sends the resulting markup to the client, where any client side scripts run. Therefore, your idea of order of execution is wrong.
You will need use AJAX or some other technique such as web sockets or SignalR in this situation.
This is a part of my page:
<link href="scripts/jquery-ui.css" rel="stylesheet" />
<link href="scripts/jquery-ui.theme.css" rel="stylesheet" />
<script type="text/jscript" src="scripts/jquery.js"></script>
<script type="text/jscript" src="scripts/jquery-ui.js"></script>
<script type="text/jscript" src="scripts/jquery-2.1.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server" enctype="multipart/form-data" method="post">
<div>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/HeaderBar.png" CssClass="header" />
<asp:Image ID="Image2" runat="server" ImageUrl="~/images/title.PNG" CssClass="Title" />
<img alt="" class="logo" src="Images/ECON_76px.png" />
<asp:Label ID="Label2" runat="server" CssClass="VersionText" Text="Version {0}"></asp:Label>
<asp:LinkButton ID="lbLogOff" runat="server" CssClass="lbLogOff" ToolTip="Close your current session">Log off</asp:LinkButton>
<asp:LinkButton ID="lbReset" runat="server" CssClass="lbReset" OnClientClick="ShowDialog();" ToolTip="Restart your session as if you would just have logged in">Restart</asp:LinkButton>
<asp:Label ID="lblTestDB" runat="server" CssClass="lblTestDB" Text="CONNECTED TO TEST DATABASE"></asp:Label>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" ViewStateMode="Enabled">
</asp:ContentPlaceHolder>
</div>
<div id="dialog" title="Restart">
<p>This will clear all data of the current session (as if you would have just logged in)!</p>
<p>Are you sure?</p>
<input id="yes" type="button" value="Yes" />
<input id="no" type="button" value="No" />
</div>
<script type="text/jscript">
function ShowDialog() {
$("#dialog").dialog({
buttons:
{
"Yes": function () { $("#dialog").dialog("close"); return false; }
, "No": function () { return true; }
}
}).prev().find(".ui-dialog-titlebar-close").hide();
}
</script>
</form>
</body>
The idea is to show a dialog when the restart button is clicked as I don't like the alert box of Chrome.
Why does it not work?
Kind of took it straight from an example in a book.
You aren't loading any jQuery UI CSS libraries, and you are loading 2 versions of normal jQuery. As a quick test, try removing your own jQuery libraries and link to Google to get you started. You can then gradually place yours back:
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
A side note, you are mixing type "jscript" and "javascript". As of HTML5, you can simply leave off specifying type declarations. It will be assumed to be CSS or JavaScript.
There it needs some changes in your code. Try this:
<script type="text/javascript">
$(document).ready(function(){
$("#dialog").dialog({
buttons:
{
"Yes": function () { $("#dialog").dialog("close"); return false; }
, "No": function () { return true; }
}
}).prev().find(".ui-dialog-titlebar-close").hide();
});
function ShowDialog() {
$("#dialog").dialog('open');
}
</script>
If i have an asp control that has a particular Validation grop
<asp:CustomValidator ID="myRequiredValidator" runat="server" ControlToValidate="myDropDown" ClientValidationFunction="myClientSideValidationFunction" ValidateEmptyText="True" Display="None" ValidationGroup="group A"></asp:CustomValidator>
How can i change the group in javascript?
<script type="text/javascript" language="javascript">
function changeValidationGroup(validator) { validator.ValidationGroup("group B"); }
Or something like that?
Thanks
In ASP.NET validation controls become <span> tags when rendered as HTML, simply change the validationGroup attribute of the required span to a new value:
<head runat="server">
<title>Validation</title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript">
</script>
<script type="text/javascript">
function ChangeGroupName() {
var groupName = $("#txtGroupName").val();
if (groupName != '') {
$("#validator").attr('validationGroup', groupName);
}
};
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="text" id="txtGroupName" />
<asp:CustomValidator ID="validator" runat="server" ErrorMessage="Error" ValidationGroup="Group1"></asp:CustomValidator>
<input type="button" value="OK" id="btnChangeGroup" onclick="ChangeGroupName()" />
</form>
</body>
Totally n00b question, Im making my first ASP.NET website, with the added twist of using IUI framework that makes things look nice on the iPhone.
How do I hookup the whitebutton to go and verify the user and password on the database?
How do I make the brower go to a different window if the password was good else...
How do I append a message like "password incorrect" on the current page?
I am a c# programmer by default and totally lost in this new field. Please not I cannot make an it doesnt seem to work with IUI.
Master
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Cover_Plus.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<meta name="viewport" id="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0" />
<link href="iui/iui.css" rel="stylesheet" type="text/css" />
<link title="default" href="iui/t/default/default-theme.css" rel="stylesheet" type="text/css" />
<script type="application/x-javascript" src="iui/iui.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="img/touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="img/touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="img/touch-icon-iphone4.png" />
<link rel="apple-touch-startup-image" href="img/startup.png" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server"> </asp:ContentPlaceHolder>
</head>
<body>
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</body>
</html>
Default.aspx
<%# Page Title="Cover Plus" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Cover_Plus._Default" %>
<%--Header--%>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script type="text/javascript">
</script>
</asp:Content>
<%--Body--%>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div class="toolbar">
<h1 id="pageTitle">System Login</h1>
</div>
<div class="panel" selected="true" id="loginPanel">
<h2>Login to Cover Plus</h2>
<fieldset>
<div class="row">
<label>Name</label>
<input type="text" name="ident" text="hhh" placeholder="Your login" />
</div>
<div class="row">
<label>Password</label>
<input type="password" name="password" placeholder="Your password" />
</div>
</fieldset>
<form id="Form1" title="Index" name="formname" method="POST">
<a class="whiteButton" type="submit" href="javascript:formname.submit()">Login me in!</a>
</form>
</div>
</asp:Content>
UPDATE :
I think a screenshot may be helpful.
The problem is that "whitebutton" seems to be what I have to use, its not like an asp.net server side button, thus I cannot simply double click to hookup the click event.
I tried Humpty Dumptys method, but it doesnt call the Verify() method in my .CS file at all. I tried with just onclick="Login();" instead of Javascript:Login(); both dont work.
UPDATE 2:
The works at the bottom, but as soon as I replace the Input to Textbox see what happens ...
Many Thanks In Advance
Final Solution :
<div class="toolbar">
<h1 id="pageTitle">Login</h1>
</div>
<div id="pnlLogin" class="panel" selected="true" >
<h2>Login Details</h2>
<form ID="fLogin" runat="server" class="panel" selected="true" >
<fieldset>
<div class="row">
<label>Name</label>
<asp:TextBox id="txtUserName" runat="server" placeholder="Your username" />
</div>
<div class="row">
<label>Password</label>
<asp:TextBox id="txtPassword" textmode="Password" runat="server" placeholder="Your password" />
</div>
</fieldset>
<asp:LinkButton id="btnLogin" class="whiteButton" text="Log me in!" runat="server" onclick="Login_Clicked" />
</form>
</div>
Basically the form was decorated with "class=panel" and the asp: style controls were used to connect to the backend.
You have to validate the user details on your buttonclick event.
If you have a database fields to username and password you can create a function which accept username and password and verify against the database.
eg. in your button click event you can do something similar
var status = verifyUser(username,password);//might return Boolean value
if(!status)
somelable.text = "username or password incorrect";
else
// do something - redirect to some page may be
also have a read at this article about Validating ASP.NET Server Controls and if you willing to use asp.net membership provider,Use Membership in ASP.NET and Validating User Credentials Against the Membership User
if use still not understand ...
modify your code something similar to this
your fronted
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<fieldset>
<div class="row">
<label>Name :</label>
<asp:TextBox ID="txbUserName" runat="server"></asp:TextBox>
</div>
<div class="row">
<label>Password :</label>
<asp:TextBox ID="txbPassword" runat="server"></asp:TextBox>
</div>
<div class="row">
<asp:Button ID="btnLogin" runat="server" Text="Button" CssClass ="whiteButton"
onclick="btnLogin_Click" />
<asp:Label ID="lblError" runat="server" Text="Label"></asp:Label>
</div>
</fieldset>
</asp:Content>
Your Backend
protected void btnLogin_Click(object sender, EventArgs e)
{
var username = txbUserName.Text;
var password = txbPassword.Text;
if(!string.IsNullOrEmpty(username) && !string.IsNullOrEmpty(password))
{
if(!VerifyUser(username,password))
{
lblError.Text = "username or password incorrect";
}
}
}
// I recommend this function to be in a separate class but for example
public static Boolean VerifyUser(string username,string password)
{
//
return true or false
}
WebForms, as it appears you're using, generally has a page-wide <form runat="server">. This will usually be defined as part of the MasterPage (~/Site.master in your case) and can usually be found just a few lines after the <body> tag.
If your site has this form, communication with the server is then handled through server-side Controls (marked with runat="server"):
<asp:TextBox ID="Username" Text="hhh" runat="server"
placeholder="Your Login" />
<asp:TextBox ID="Password" TextMode="Password" runat="server"
placeholder="Your password" />
<asp:LinkButton ID="Login" Text="Login me in!" runat="server"
CssClass="whitebutton" OnClick="Login_Clicked" />
Each server-side control represents regular HTML that it generates during rendering, so the above would become something like this:
<input id="ct100_Username" name="ct100$Username" type="text" value="hhh" placeholder="Your Login" />
<input id="ct100_Password" name="ct100$Password" type="password" placeholder="Your password" />
<a id="ct100_Login" class="whitebutton" href="javascript:__doPostBack('ct100$Login','')">Login me in!</a>
(Note: The actual client-side IDs and names may be a lot different than the examples here.)
The ID attributes of these server-side controls are generally mapped to properties/fields of the Page class, so this.Username will return the TextBox instance representing the 1st <asp:TextBox />.
With AutoEventWireup="True", as you have, you would then define the method that was specified in the OnClick of the <asp:LinkButton /> as part of the Page class:
protected void Login_Clicked(object sender, EventArgs e)
{
var user = Username.Text;
var pass = Password.Text;
if (ValidateUser(user, pass))
// etc.
}