I am using a Modal for the first time and need some help I have this Modal
<div id="User_Modal" class ="container">
<div class ="row">
<div class="col-xs-12">
<div class="modal" id="viewUserModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Enter You Pin To Continue</h4>
</div>
<div class="modal-body">
<div>
<label for="inputPinNumber">Pin Number</label>
<br />
<input class="form-control" placeholder="Enter Your Pin #" type="number" id="txtUserPin" runat="server"/>
</div>
</div>
<div class="modal-footer">
<asp:Button runat="server" CssClass="btn btn-primary" ID="btnUser" Text="Go" OnClick="btnUser_Click" />
<button class =" btn btn-primary" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I open or call the Modal using this C# code on the btnUser_Click method with this C# code
ScriptManager.RegisterStartupScript(this, GetType(), "Show Modal", "$('#viewUserModal').modal('show');", true);
After the user enters the Pin number I want to get that value check it against my data and then close the Modal. I trying to do that with this code:
protected void btnUser_Click(object sender, EventArgs e)
{
string strUserPin = txtUserPin.Value.ToString();
if (strUserPin.Length > 0)
{
Session["SessionPinEntered"] = strUserPin;
string strUser = Email.GetUser(strUserPin);
bool bolIsManager = true;//CheckUser(strUser);
if (bolIsManager)
{
ScriptManager.RegisterStartupScript(this, GetType(), "Close Modal", "$('#viewUserModal').modal('close');", true);
pnlGrid.Visible = true;
}
else
{
}
}
}
The code runs but the Modal does not close and my hidden asp Panel is not shown.
Can someone explain why this is not working?
UPDATE:
I was able to figure out how to hide the Modal with this code change:
ScriptManager.RegisterStartupScript(this, GetType(), "Hide Modal", "$('#viewUserModal').modal('hide');", true);
But the C# code to make the asp Panel visible is still not working. In debug I can watch the code being called and steps over put does not run? What's going on with that and how can I get this fixed
The solution to the problem was to rebind the grid after I changed the panel from being hidden. Once I did that the radgrid shows the data
Related
I am trying to automate my application and i am unable to perform any actions on the modal window.
Below is the HTML code of that modal window.
<div class="modal fade bs-modal-lg in" id="homeModal" tabindex="-1" style="display: block; padding-left: 16px;" aria-hidden="false"><div class="modal-backdrop fade in" style="height: 958px;"></div>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header modal-header-dl " id="homeModalHeader">
<a href="javascript:void(0)" onclick="ClosepopupModal()" class="pull-right dl-padding-top-10 dl-padding-right-20" role="button" title="Close">
<i class="zbox-button close"></i>
</a>
<h4 class="modal-title">XDS Authentication</h4></div>
<div class="modal-body " id="homeModalBody"><div class="form-group dl-padding-bottom-20 dl-mg-left-right-5px">
<input type="text" class="form-control" id="id-number" name="IDNumber" placeholder="SA ID number" value="" maxlength="13" onpaste="return onPaste(event)" onkeydown="return onKeyPress(event)" onkeyup="return onKeyUp(event)" onkeypress="return checkNumberAndClearTextBox('account-number')" onblur="checkLength(this, 13)">
<small><span id="id-number-error" class="error-msg"> </span></small>
<div>
<button type="button" id="register-btn" class="btn pull-right dl-button-primary dl-margin-right-0" onclick="GetClientDetails(event)">Retrieve Authentication Questions</button>
</div>
</div>
I have to enter value on text box and click on a button in that modal window but unable to do it.
Window handles method doesn't worked.Getting unable to locate element error.
driver.SwitchTo().Window(driver.WindowHandles[1]);
IWebElement IDnumber = driver.FindElement(By.Id("id-number"));
IDnumber.SendKeys("123456");
IWebElement Authenticate = driver.FindElement(By.CssSelector(".btn.pull-right.dl-button-primary.dl-margin-right-0"));
Authenticate.Click();
IWebElement Skipbutton = driver.FindElement(By.CssSelector(".btn.pull-right.dl-button-secondary"));
Skipbutton.Click();
What is the right way to do it?
Most modals do not require a SwitchTo. You should be able to interact with them directly.
If you have to use handles, please try this.
public static string SwitchToPopup()
{
var mainHandle = driver.CurrentWindowHandle;
var handles = driver.WindowHandles;
foreach (var handle in handles)
{
if (mainHandle == handle)
{
continue;
}
driver.SwitchTo().Window(handle);
break;
}
var result = Url;
return result;
}
I have two submit buttons and a few textboxes on my page. When I enter details in the textbox and hit the enter button the form should actuate the start new button. But the form is actuating the old button. I don't want to add on click to button because I am checking some conditions and redirecting from my controller. What do I have to do to avoid my form from actuating by default for old value button on hitting the enter button any suggestions, please?
controller :
public ActionResult Index(MyModel model, string new, string old)
{
if (new == "new")
{
if (rows > 0)
{
return ProcessAction();
}
else
{
return ProcessAction();
}
}
if (old == "old")
{
if (rowsAmount > 0)
{
//do something
}
else
{
//do something
}
}
return View();
}
View:
#using (Html.BeginForm("Index", "Application", FormMethod.Post))
{
#Html.AntiForgeryToken()
<div class="col aligncenter">
<div class="form-row topMargin">
<div class="col-md-6 form-group">
#Html.TextBoxFor(model => model.Email)
</div>
<div class="col-md-4 form-group">
#Html.TextBoxFor(model => model.FirsttName)
</div>
<div class="col-md-2 form-group">
#Html.TextBoxFor(model => model.LastName)
</div>
</div>
<div class="form-row">
<div class="col-md-9 form-group text-right">
<button class="btn" type="submit" name="old" value="old">Get History</button>
</div>
<div class="col-md-3 form-group text-right">
<button class="btn" type="submit" name=newr" value="new">Start New</button>
</div>
</div>
</div>
}
to cange form submitting through old button just Change button type from type="submit" to type="button"
<div class="form-row">
<div class="col-md-9 form-group text-right">
<button class="btn" type="btn" name="old" value="old">Get History</button>
</div>
<div class="col-md-3 form-group text-right">
<button class="btn" type="submit" name=newr" value="new">Start New</button>
</div>
</div>
update
you can give Get History button a click event you can make an Ajax call through javascript function and give that to get history or bind your controller action in the anchor link and
Your buttons have type="submit" which means they will submit the form when pressed. Instead use type="button" to avoid submitting the form. You can also use type="reset" if you want to provide a way to reset the form inputs.
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
<button type="button">Just a button</button>
<button type="submit">Submit</button>
<button type="reset">Reset the form</button>
</form>
I have input form in Bootstrap model popup. I want to show error message in div when submit button for saving. My model popup is in update panel. I am trying to do and its not working.
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">SMTP Configuration</h4>
</div>
<div class="modal-body">
Here is a input form
<div id="ErrorDiv" class="required" runat="server">
This is a div where i want to show content
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<asp:Button ID="btnEdit" runat="server" Text="Save" OnClick="Save" class="btn btn-success" ValidationGroup="Group1" />
</div>
</div>
</div>
</div>
Below is the server side method to show content.
public void ShowError(string Message)
{
ErrorDiv.InnerHtml = Message;
upModal.Update();
}
How can I show error content to div?
To open error model popup from Server side.
You need to update your Server side function ShowError to this.
public void ShowError(string Message)
{
ErrorDiv.InnerHtml = Message;
upModal.Update();
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ErrorModel", "$('#myModal').modal('show');", true);
}
for this you have to put the div with id myModal, into update panel.
This will trigger jQuery function on Client side after server side execution complete and the model open manually.
Other way to do this
If you don't want to put model div into update panel then follow this way.
Update your Model div like below
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">SMTP Configuration</h4>
</div>
<div class="modal-body">
Here is a input form
<div id="ErrorDiv" class="required">
This is a div where i want to show content
</div>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
</div>
</div>
</div>
</div>
Add JavaScript function as below into aspx file.
function showError(error){
$("#ErrorDiv").html(error);
$('#myModal').modal('show');
}
And call the JavaScript function from server side like this
public void ShowError(string Message)
{
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "ErrorModel", "ShowError('"+Message+"');", true);
}
Here, you can explore more about ScriptManager.RegisterStartupScript Method
When I click a link button within a ASP.NET listview, a modal popup activates that contains a textbox (lbCBody).
The textbox property does not get set, even though when I put a breakpoint at lbCBody.Text this is set.
Any ideas what is going on here?
protected void lvCalendar_ItemCommand(object sender, ListViewCommandEventArgs e)
{
ScriptManager.RegisterStartupScript(this, typeof(Page), "ajaxScript", "showCalendar();", true);
//cast the postback causing control respectively, LinkButton/Button:
System.Web.UI.WebControls.LinkButton btn = e.CommandSource as System.Web.UI.WebControls.LinkButton;
//get the ListViewItem:
ListViewItem item = btn.NamingContainer as ListViewItem;
HiddenField hfViewCalID = item.FindControl("hfViewCalTodayID") as HiddenField;
int sID = Convert.ToInt32(hfViewCalID.Value);
UserCalendar selC = context.UserCalendars.FirstOrDefault(a => a.ID == sID);
//lbCHeading.Text = selC.EventName;
lbCBody.Text = selC.Description;
}
Modal Popup
<div id="viewCalendarModel" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
<asp:HiddenField ID="hfViewCal" ClientIDMode="Static" runat="server" />
<div class="modal-header">
<h3>
<asp:Label ID="lbCHeading" runat="server"></asp:Label></h3>
</div>
<div class="modal-body">
<div class="control-group">
<div class="controls controls-row">
<asp:TextBox ID="lbCBody" runat="server"></asp:TextBox>
</div>
</div>
</div>
<%--<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
</div>--%>
</div>
This was caused by the calendar being inside an update panel, but the modal popup being outside the update panel.
I have the following code for a webpage;
<div class="toolbox">
<div class="toolboxNest" align="left">
<div class="clear"> </div>
<div class="gap"> </div>
<label for="j_username">
<input id="j_username" type="text" name="j_username">
<div class="clear"> </div>
<div class="gap"> </div>
<label for="j_password">
<input id="j_password" type="password" name="j_password">
</div>
<div class="clear"></div>
<div class="gap"></div>
<div align="center">
<input class="formButtonGreen" type="submit" value="Login">
</div>
<div class="clear"></div>
<div class="gap"></div>
<div class="infoText">
I am able to click and enter text for the username and password, but I cant work out how to press the submit button, if it were just an element then that would be fine, but it's in a class and I'm unsure how to do it.
This is my code...
var x = webBrowser1.Document.All.GetElementsByName("j_username");
x[0].InnerText = "xxxxx";
var y = webBrowser1.Document.All.GetElementsByName("j_password");
y[0].InnerText = "xxxxxxxx";
//This part is not working....
var s = webBrowser1.Document.GetElementById("formButtonGreen");
s[0].InvokeMember("click");
Any one got any ideas?
Please note: I don't own the website so can't make changes to code behind webpage...
Thanks,
David
You should try using .Document.Body.GetElementsByTagName("input") which should help you get the button element and later you can use InvokeMember("click") on that element.
This will return a collection of matching elements, so if there are more than one you will have to identify it from the attributes by looping over it and then trigger for the one you need.
Instead of clicking the button, just submit the form itself.
jQuery wise, this is:
$("#my_form").submit();
Or you coulkd use any other means to select that Form. By class, parent element, tag name, ...