I have a Popup in my aspx page that i want to open based on criteria that has to be met by javascript. The problem i am having is that i cannot seem to get the modalpopupextender to work no matter what i try.
I have tried using PageMethods, _doPostBack() and $Find(PopupClientId).Show();
None of the above seem to work and i cannot figure out why.
This is my JavaScript.
function RequotePopup(popup, status) {
if (status = true) {
var thePopup = document.getElementById(popup);
thePopup.style.visibility = "visible";
} else {
alert("Please select a record for Re-Quote");
}
}
function checkGridView() {
var hdnCheckboxIDs = document.getElementById("ctl00_ContentPlaceHolder1_hdnCheckboxID");
var arrCheckboxIDs = hdnCheckboxIDs.value.split(",");
var checked = false;
for (var i = 0; i < arrCheckboxIDs.length; i++) {
if (arrCheckboxIDs[i] != "") {
var ckbItem = document.getElementById(arrCheckboxIDs[i]);
if (ckbItem != null) {
if (ckbItem.checked == true) {
checked = true;
}
}
}
}
if (checked == true) {
//var modal = $find('<%= ReQuoteBtn_ModalPopupExtender.ClientID %>');
//modal.show();
PageMethods.ShowExtender();
ShowPopup('RequotePopup');
} else {
alert("Please select a record for Re-Quote");
}
}
And This is my ASP.Net.
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<asp:Button ID="ReQuoteBtn" runat="server" Text="Re-Quote" OnClientClick="Javascript:checkGridView()"
CssClass="Sales" />
<asp:ModalPopupExtender ID="ReQuoteBtn_ModalPopupExtender" runat="server" DynamicServicePath=""
BackgroundCssClass="modalBackground" Enabled="True" BehaviorID="RequoteModal" PopupControlID="RequotePopup"
TargetControlID="ReQuoteBtn" OnCancelScript="cmdCancelrq">
</asp:ModalPopupExtender>
I'm not sure if you have tried this, but it should work if you find the ModalPopupExtender by BehaviorID.
As your BehaviorID is RequoteModal, let try this sample:
To show the popup
$find('RequoteModal').show();
To hide the popup
$find('RequoteModal').hide();
Edit:
I just noticed that you set Enabled="False" for the ModalPopupExtender, this will not allow the modal to call show() method, you may got error message such "Unable to get property 'show' of undefined or null reference".
Please remove that setting and try again.
Related
My validations are not working when redirecting from one page to another on passing query string as a parameter with response.redirect or with windows.location.href.
When I am redirecting from one page to another page with this:
<asp:Button ID="New" runat="server" Text="New" OnClientClick="Transfer()" />
function Transfer() {
window.location.href = "Abc.aspx?flag=yes"; //when adding query string my validation doesnt work
//window.location.href = "Abc.aspx";// When removing query string my validation successfully works
}
Then I have tried from server side like this:
<asp:Button ID="New" runat="server" Text="New" OnClick="New_Click" />
protected void btnNewApplicant_Click(object sender, EventArgs e)
{
Response.Redirect("Abc.aspx?flag=yes", false); //again not working with this.
}
When I click on this New button i am getting error in console:
Is this error has to do anything with this option: EnableEventValidation="false" as you can see in my code?
Note: I need to pass parameter as query string for some reason.
Abc.aspx:
<%# Page Title="" Theme="---" Language="C#" MasterPageFile="---" AutoEventWireup="true" CodeBehind="---" EnableEventValidation="false" Inherits="---" %>
<asp:TextBox ID="txt1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rf1" runat="server" ErrorMessage="require" ForeColor="Red" ControlToValidate="txt1" Display="None" ValidationGroup="validate"></asp:RequiredFieldValidator>
<asp:TextBox ID="txt2" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rf2" runat="server" ErrorMessage="require" ForeColor="Red" ControlToValidate="txt2" Display="None" ValidationGroup="validate"></asp:RequiredFieldValidator>
<asp:Button ID="btnSubmit" runat="server" Text="Save" ValidationGroup="validate" OnClick="btnSubmit_Click" UseSubmitBehavior="true" OnClientClick="checkvalidation()"/> //on click of this i want to perform validation but it is not working.
<telerik:RadCodeBlock ID="radcodeblock1" runat="server" EnableViewState="true">
<script type="text/javascript">
function checkvalidation() {
window.Page_ClientValidate('validate');
var counter= 0;
var val= '';
for (var i = 0; i < window.Page_Validators.length; i++) {
if (!window.Page_Validators[i].isvalid && typeof (window.Page_Validators[i].errormessage) == "string") {
counter= 1;
val+= '- ' + window.Page_Validators[i].errormessage + '<br>';
}
}
if (counter== 1) {
//My validation pop up to display validations alert because this counter value remains 0 so this part is not executed.
}
}
</script>
</telerik:RadCodeBlock>
Now when I click on submit button then my server side code event is fired but my validation pop up doesn't appear.
I have even put this line in web.config:
<add key="ValidationSettings:UnobtrusiveValidationMode" value="None"></add>
But this is still not working as removing query string from response.redirect or from windows.location.href then my validation pop up successfully appears and it is working fine.
If, as you say, window.Page_Validators[i].isvalid is false and typeof (window.Page_Validators[i].errormessage) is true, then we must go into the 'if' condition. The counter must be set to 1, and then must go into the 'if' later on.
I've changed the checks a little bit and have added the console logging to help you. In case anyone doesn't know, you can view these messages by hitting F12 in the browser and clicking "Console".
function checkvalidation() {
window.Page_ClientValidate('validate');
var counter= 0;
var val= '';
for (var i = 0; i < window.Page_Validators.length; i++) {
if ( (window.Page_Validators[i].isvalid === false) && typeof (window.Page_Validators[i].errormessage) == "string") {
console.log("Inside the if condition");
console.log(window.Page_Validators[i]);
counter = 1;
val+= '- ' + window.Page_Validators[i].errormessage + '<br>';
}
}
if (counter === 1) {
//My validation pop up to display validations alert because this counter value remains 0 so this part is not executed.
}
}
i have to validate a radio button using javascript. it should show a message if none of the option is selected.
my radio button code is:
<asp:RadioButtonList ID="welldata" runat="server" RepeatDirection="Horizontal" Width="100px">
<asp:ListItem></asp:ListItem>
<asp:ListItem></asp:ListItem>
</asp:RadioButtonList>
and the submit button is:
<asp:Button ID="next2" runat="server" Text=">>" Width="46px"
OnClientClick="return next2()"/>
the corresponding javascript function is :
function next2() {
var listItemArray = document.getElementById('<%=welldata.ClientID %>');
var isItemChecked = false;
var length1 = listItemArray.length;
for (var i=0; i<length1; i++)
{
var listItem = listItemArray[i];
document.write(listItem);
if ( listItem.checked )
{
alert(listItem.value);
isItemChecked = true;
}
}
if ( isItemChecked == false )
{
alert('Nothing is checked for welldata!');
return false;
}
return true;
}
while debugging i noticed thaat function is executed but doesn't enter the for loop.
also i tried
document.write(isItemChecked);
document.write(listItemArray);
document.write(length1);
and the output was :
false [object HTMLTableElement] undefined
The wellData RadioButtonList ASP.NET server control will render in the browser as a table with a number of input type="radio" controls under it, each with the same name.
So, you need to get the input tags inside the table tag first:
var wellData = document.getElementById('<%=welldata.ClientID %>');
var listItemArray = wellData.getElementsByTagName('input');
This is, of course, if you are doing this manually for some odd reason. You can do it automatically with a RequiredFieldValidator control.
<asp:RadioButtonList ID="welldata" runat="server" RepeatDirection="Horizontal" Width="100px">
<asp:ListItem></asp:ListItem>
<asp:ListItem></asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="rfvWellData" runat="server" ControlToValidate="wellData" Display="Dynamic" ErrorMessage="Pick yourself some well data" />
You are using a RadiobuttonList which is rendered as table per default. If you select the dom element by id document.getElementById('<%=welldata.ClientID %>') then you are selecting the table and not the RadioButtonList. If you want to select the radio buttons then you have to loop through the childNodes of listItemArray to get the radio buttons. Alternatively you could use jquery to select the radio buttons, as their ids will start with the id of your radio button list (they will look like welldata_0 or welldata_1).
This line of jquery code will get the your radio buttons
var listItemArray = $("input[id^='welldata']")
Try this:
function next2() {
if(document.getElementById('<%=welldata.ClientID %>').checked==false)
{
alert('Nothing is checked for welldata!');
return false;
}
return true;
}
or
Use RequiredFieldValidator
<asp:RequiredFieldValidator
ID="ReqiredFieldValidator1"
runat="server"
ControlToValidate="welldata"
ErrorMessage="Select your welldata!"
>
Check these below links
http://asp-net-example.blogspot.in/2009/02/aspnet-requiredfieldvalidator-example.html
http://www.itechies.net/tutorials/jscript/jsexample.php-pid-jform.htm#rb
http://www.codeproject.com/Questions/499602/RequiredplusFieldplusValidatorplusForplusRadioplus
var rblItems = document.getElementById('<%=radioBtnListId.ClientID %>').getElementsByTagName('input');
var checkedItems = true;
for (var i = 0; i < rblItems.length; i++) {
if (rblItems[i].checked) {
checkedItems = true;
break;
}
else {
checkedItems = false;
}
}
if (!checkedItems) {//Hence No items checked
alert("Nothing is checked");
return false;
}
I am having two radio buttons and two textbox. When I click on first checkbox, both texbox should not be readonly. But when I select second radio button it should make both text box readonly. I googled and found many solutions but don't know why none is not working in my code.
Html:
<asp:RadioButton ID="mailNew" Text="New" runat="server" GroupName="mail_select" onclick="showHide(1)" ClientIDMode="Static" /><br />
<asp:RadioButton ID="mailExisting" Text="Existing" runat="server" GroupName="mail_select" onclick="showHide(2)" ClientIDMode="Static" />
<asp:TextBox ID="txtPromotion" runat="server" Width="77px" ></asp:TextBox><br />
<asp:TextBox ID="txtSubject" runat="server" Width="288px"></asp:TextBox><br />
Javascript:
function showHide(val) {
var txtpid=document.getElementById(<% = txtPromotion %>)
var txtsub= document.getElementById('<% = txtSubject.ClientID %>');
if (val == 2) {
txtpid.readOnly = false;
txtsub.readOnly = false;
}
if (val == 1) {
txtsub.setAttribute("readOnly.true");
txtpid.setAttribute("readOnly,true");
}
}
I see two issues:
You're not using ClientID for txtPromotion.
You're calling setAttribute with an incorrect attribute name and no value at all.
Just use the reflected property consistently in your code:
function showHide(val) {
var txtpid=document.getElementById('<% = txtPromotion.ClientID %>')
var txtsub= document.getElementById('<% = txtSubject.ClientID %>');
if (val == 2) {
txtpid.readOnly = false;
txtsub.readOnly = false;
}
else if (val == 1) {
txtsub.readOnly = true;
txtpid.readOnly = true;
}
}
Note that your code assumes val will never be anything other than 1 or 2, because it doesn't update readOnly unless it's one of those two values. With that in mind, this might be cleaner:
function showHide(val) {
document.getElementById('<% = txtPromotion.ClientID %>').readOnly = val == 1;
document.getElementById('<% = txtSubject.ClientID %>').readOnly = val == 1;
}
I have 2 check boxes where only one or none may be checked.
Since I can't do a postback I tried this with Javascript.
The Javascript finds the element (tested it with an alert).
But the value won't change.
Any Idea how I can do this with Javascript?
The Javascript:
function mrcAndNbbFilterChanged(mrcOrNbb)
{
alert("er in");
if(mrcOrNbb == 0)
{
document.getElementById("ctl00_contentHolder_cb_mrcFilter").checked=true;
document.getElementById("ctl00_contentHolder_cbNoBackBilling").checked=false;
alert(document.getElementById("ctl00_contentHolder_cbNoBackBilling"));
alert("0");
}
else
{
if(mrcOrNbb == 1)
{
alert("1");
document.getElementById("cb_mrcFilter").checked=false;
document.getElementById("cbNoBackBilling").checked=true;
}
}
}
The ASP code:
<asp:CheckBox ID="cb_mrcFilter" runat="server" Text="Only MRC" OnClick="mrcAndNbbFilterChanged(0)" />
<asp:CheckBox ID="cbNoBackBilling" runat="server" Text="No back billing" OnClick="mrcAndNbbFilterChanged(1)" />
ASP.NET applies that ctl00_-esque string to IDs when using ASP controls to ensure they are unique. You can get the ASP-modified ID value using:
document.getElementById("<%= cb_mrcFilter.ClientID %>").checked=false;
document.getElementById("<%= cbNoBackBilling.ClientID %>").checked=true;
Also, as a side note, you can use else if { ... }, rather than else { if { ... } } when only dealing with one alternative:
if(mrcOrNbb == 0) {
...
}
else if(mrcOrNbb == 1) {
...
}
I am trying for a simple validation which consist of a RadioButtonList rblstPallet. I tried the below code:
javascript
var rblstPallet = document.getElementById('rblstPallet');
var counter = 0;
for (var intCount = 0; intCount < rblstPallet.length; intCount++) {
if (rblstPallet[intCount].checked) { //this step is not working
console.log(intCount); //I checked using this step
counter++;
}
}
if (counter == 0) {
//MSG: please select any item
}
else {
// Redirect to next page function
}
.aspx
<asp:RadioButtonList ID="rblstPallet" runat="server" RepeatDirection="Horizontal">
<asp:ListItem>Wood</asp:ListItem>
<asp:ListItem>Plastic</asp:ListItem>
<asp:ListItem>None</asp:ListItem>
</asp:RadioButtonList>
The problem is that if I even select one of the Radio Button, then also the counter value is remaining same. when I debugged the code, I came to know that the line
if (rblstPallet[intCount].checked) {
is not even executing nor even showing any errors in console. I am going through this link. I tried this link(not working).
Please help.
RadioButtoList is converted in radio buttons having id similar to radiobuttonlist id, you need to iterate through DOM to find the matching elements.
function getRadioButtonListSelections(radioButtonListName)
{
int selectionCount = 0;
for(i=0;i<document.forms[0].length;i++)
{
e=document.forms[0].elements[i];
if (e.id.indexOf(radioButtonListName) != -1 && e.checked)
selectionCount++;
}
return selectionCount;
}
alert(getRadioButtonListSelections('rblstPallet'));
Either use:
var rblstPallet = document.getElementById('<%=rblstPallet.ClientID=>');
Or
set the client id mode to static:
<asp:RadioButtonList ID="rblstPallet" runat="server" RepeatDirection="Horizontal" ClientIDMode="static">
And find and loop through each radio button:
var rblstPallet = document.getElementById('rblstPallet');
rblstPallet = rblstPallet.querySelectorAll('input[type="radio"]')
Replace
var rblstPallet = document.getElementById('rblstPallet');
By
var rblstPallet = document.getElementById('<%= rblstPallet.ClientID %>');
If you want to validate your radiobuttonlist why don't you use a validator control ?
<asp:RequiredFieldValidator ID="rfvPallet" runat="server"
ControlToValidate="rblstPallet" ErrorMessage="RequiredFieldValidator">
</asp:RequiredFieldValidator>