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>
Related
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
In my web form I have an ASP Hidden field as such:
<asp:HiddenField ID="HiddenField1" runat="server" OnValueChanged="HiddenField1_ValueChanged" /> I am current setting the value of this field client side as such
document.getElementById("ContentPlaceHolder1_HiddenField1").value = type + pngUrl;
Then I call
document.forms[0].submit(); to post the page.
The changed value of the hidden field successfully posts in both chrome and firefox, but in IE the DOM Viewer says the data is inside the hidden field but on inspection of the post the area for the hidden field is totally empty.
(This is in IE 11)
EDIT: Fixed But example code of the before an after, looking for an explanation on why this fixed it.
Working version
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script src="webcam.min.js"></script>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" />
<div id="CameraDivtest"></div>
<input type="button" id="start" value="startCamera" onclick="videoCall('test')" />
<input type="button" value="take picture" id="picButtonKey" />
</div>
</form>
<script>
var c;
var v;
var con;
function videoCall(type) {
Webcam.set({
width: 600,
height: 420
});
Webcam.attach('#CameraDiv' + type);
function goingGrey() {
Webcam.snap(function (data_uri, canvas, context) {
var pngUrl = data_uri
document.getElementById("<%=HiddenField1.ClientID%>").value = type + pngUrl;
document.forms[0].submit();
});
}
document.getElementById("picButtonKey").addEventListener("click", function (e) {
goingGrey();
});
}
</script>
</body>
</html>
Broken version
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<script src="webcam.min.js"></script>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:HiddenField ID="HiddenField1" runat="server" />
<div id="CameraDivtest"></div>
<input type="button" id="start" value="startCamera" onclick="videoCall('test')" />
<input type="button" value="take picture" id="picButtonKey" />
</div>
</form>
<script>
var c;
var v;
var con;
function videoCall(type) {
Webcam.set({
width: 600,
height: 420
});
Webcam.attach('#CameraDiv' + type);
function goingGrey() {
Webcam.snap(function (data_uri, canvas, context) {
var pngUrl = data_uri
document.getElementById("<%=HiddenField1.ClientID%>").value = type + pngUrl;
});
}
document.getElementById("picButtonKey").addEventListener("click", function (e) {
goingGrey();
document.forms[0].submit();
});
}
</script>
</body>
</html>
Any one please tell me how to set the value of textbox.
function moreFieldsEditFunction(ExtraFname, ExtraFvalue) {
document.getElementById('<%= TextBox1.ClientID %>').value =ExtraFvalue;
}
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
It is not working
I don't think that you are a million milles off to be honest, I have taken your code and put it into a web form with a button that can be clicked to call the function and it works, without seeing your mark up it will be difficult to diagnose but it should look something like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript">
function moreFieldsEditFunction(ExtraFname, ExtraFvalue) {
document.getElementById('<%= TextBox1.ClientID %>').value = ExtraFvalue;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" onclick="moreFieldsEditFunction('TEST', 'TEST2')" value="Click Me" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>
This should work.
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>
This is code for Firefox.
Default.aspx:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="pop.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Hidden1" type="hidden" runat="server" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Popup" />
</div>
</form>
</body>
</html>
Default.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
TextBox1.Text = "Hello";
Button1.Attributes.Add("onClick", "javascript:InvokePop('" + TextBox1.ClientID + "');");
}
PopupWin.aspx:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="pop.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtValue" runat="server"></asp:TextBox><br />
<br />
<input type="button" id="btnReturnValue" value="Return value back" onclick="ReturnValue();" />
</div>
</form>
</body>
</html>
pop.js:
function InvokePop(fname)
{
val = document.getElementById(fname).value;
retVal = window.open("PopupWin.aspx?Control1=" + fname, 'Show Popup Window', 'height=90,width=250,resizable=yes,modal=yes');
retVal.focus();
}
function ReturnValue()
{
var newValue = document.getElementById("txtValue").value;
if ((window.opener != null) && (!window.opener.closed))
{
window.opener.document.getElementById("TextBox2").value = newValue;
}
window.close();
}
In this case I click button on Default.aspx page and open Popup.aspx as popup window. I enter some value to text box in Popup.aspx and press button. The new value appears in second text box on Default.aspx page.
That works, but how can I pass the new value entered in Popup.aspx page to some handler in Default.aspx page and use it further? For example, I can have another ASPX button on Default.aspx page and when I click it I can use the value entered in Popup.aspx page.
Well what you can do is the following:
Add a hiddenField on the first page. Im calling it "hfPopupValue".
In pop.js u are currently doing this:
window.opener.document.getElementById("TextBox2").value = newValue;
You can change this to:
window.opener.document.getElementById("hfPopupValue").value = newValue;
Afterwards you can just read the value from the hiddenField.
This should solve your problem.
Have you thought of using jQueryUI's Dialog, which lets you keep all controls on the same page, meaning cleaner code.
It also doesn't look as nasty as a JavaScript popup window.