I am developing application in MVC. I have placed one button. I displayed the div while clicking a button. On clicking a button I used toggle to show the div. Now my problem is inside the div I need to display another form or div. Is it possible?
My code is
if (button_id == "reminder_button") {
$('.reminder').toggle("slow")
{
$('#remdr').appendTo('reminder');
};
View code:
<div class="remdr" id="remdr" style="display:none">
#using (Html.BeginForm("Reminder", "Appt", FormMethod.Post, new { id = "rem" }))
{
#Html.Label("Reminder Text")
<input type="text" name="Remtitle" style="width:200px" />
#Html.Label("Notifications")
#Html.DropDownList("Reminderlist", new SelectList(listItems, "Value", "Text"))
<input type="text" name="number" style="width:200px" />
#Html.DropDownList("Reminder", new SelectList(list, "Value", "Text"))
<input type="submit" name="reminder" value="Remind me">
<div id="Addnotification" style="color:blue; font-size:15px">Add Notification</div>
}
</div>
Related
Please provide an Angular8 and above example which has the ability to create a new block every time clicking on add new button that has one checkbox, mat date picker start date, and end date.
for html Component
<button (click)="add()">add</button>
<div *ngFor="let item of list" >
<div >
<input type="text" />
<input type="date" />
<input type="date" />
</div>
</div>
for ts component:
add(){
let model = {name :'' ,startDate:'',endDate:''};
model.name = 'test';
model.startDate='';
model.endDate='';
this.list.push(this.model);
}
I have a list of "workbooks" displayed in a table. Each workbook has a "Share" button next to the workbook's title. When the user clicks on the share button a modal dialog is shown containing a form.
The form allows the user to enter a list of the recipient's emails separated by a comma which is validated on the client-side.
As the dialog is located in a partial view _ShareView.cshtml that allows me to pass a modal WorkbookShareModel that has some fields like WorkbookId and Title. The goal here is to pass the details of each workbook when the user presses the share button (i.e. construct a modal and pass it to the already rendered model).
I am not sure how to pass a model to an already rendered view?
The solution have to be done on the client (i.e. dont involve actions on the server that return the partial view provided the parameters are passed). I want to avoid unnesessary calls to the server - we have all the data on the client regarding a workbook and I need to do a POST when the user types in list of emails.
This is my index.cshtml:
#section BodyFill
{
<div id="shareFormContainer">
#{ await Html.RenderPartialAsync("_ShareView", new WorkbookShareModel());}
</div>
<div class="landing-container">
<div class="workbook-container">
<table class="table">
<tbody>
#foreach (var workbook in Model.Workbooks)
{
string trClassName, linkText;
if (workbook.Metadata.SharedBy == null)
{
trClassName = "saved-workbooks";
linkText = workbook.Name;
} else {
trClassName = "shared-with-me";
linkText = string.Format(
BaseLanguage.SharedWithMeWorkbook,
workbook.Name,
workbook.Metadata.SharedBy,
workbook.Metadata.SharedDate.ToShortDateString()
);
}
<tr class="#trClassName">
<td>#Html.ActionLink(linkText, "Open", "OpenAnalytics", new { id = Model.Id, workbook = workbook.Name })</td>
<td class="last-modified-date" title="Last Modified Date">#workbook.ModifiedDate.ToShortDateString()</td>
<td class="share">
<button title="Share" class="share-button" onclick='showSharingView("#workbook.Name", "#workbook.Id", "#Model.Id")'> </button>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
}
#section Scripts
{
<!--Load JQuery 'unobtrusive' validation -->
#await Html.PartialAsync("_ValidationScriptsPartial")
<script type="text/javascript">
// hide the modal as soon as the page loads
$('#shareFormModal').modal("hide");
function showSharingView(title, workbookId, id) {
$('#shareFormModal').modal("show");
// how to pass a WorkbookShareModel to my partial view from here?
}
function hideDialog() {
var form = $("#partialform");
// only hide the dialog if the form is valid
if (form.valid()) {
activateShareButtons();
$('#shareFormModal').modal("hide");
}
}
// Helper method that validates list of emails
function IsEmailValid(emailList, element, parameters) {
var SPLIT_REGEXP = /[,;\s]\s*/;
var EMAIL_REGEXP =
/^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+##[a-z0-9](?:[a-z0-9-]*[a-z0-9])?(?:\.[a-z0-9](?:[a-z0-9-]*[a-z0-9])?)+$/i;
var emails = emailList.split(SPLIT_REGEXP);
for (var i = emails.length; i--;) {
if (!EMAIL_REGEXP.test(emails[i].trim())) {
return false;
}
}
return true;
}
</script>
}
That is my dialog:
#using DNAAnalysisCore.Resources
#model DNAAnalysisCore.Models.WorkbookShareModel
#* Partial view that contains the 'Share Workbook dialog' modal *#
<!-- Modal -->
<div onclick="activateShareButtons()" class="modal fade" id="shareFormModal" role="dialog">
<div class="modal-dialog modal-md">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Share Workbook - #Model.Title</h4>
</div>
#using (Html.BeginForm("ShareWorkbook", "Home", FormMethod.Post, new { #id = "partialform" }))
{
<div class="modal-body">
<label>#BaseLanguage.Share_workbook_Instruction_text</label>
<div class="form-group">
<textarea class="form-control" asp-for="Emails" rows="4" cols="50" placeholder="#BaseLanguage.ShareDialogPlaceholder"></textarea>
<span asp-validation-for="Emails" class="text-danger"></span>
</div>
<input asp-for="Title" />
<input asp-for="Id" />
<input asp-for="WorkbookId"/>
</div>
<div class="modal-footer">
<button onclick="hideDialog()" type="submit" class="btn btn-primary">Share</button>
<button onclick="activateShareButtons()" id="btnCancelDialog" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
}
</div>
</div>
</div>
There are two solutions to solve your problem :
Option 1 :
Since you have got the parameters(title, workbookId, id) , you can call server side function using AJAX to render the partial view , then replace the DIV contained in the partial view with the updated contents in the callback function of AJAX .
You can click here for code sample .
Option 2 :
Directly update related input/area using Jquery . For example , the input tag helper :
<input asp-for="<Expression Name>">
generates the id and name HTML attributes for the expression name specified in the asp-for attribute. So you can set the value using Jquery like :
$("#Title").val("Title")
Please click here for Tag Helpers in forms in ASP.NET Core
With Option 2 , you need to clear the Emails area firstly after user click the share button ; With Option 1 , you don't need to care that since the HTML will replace entirely .
I have a form with two radio buttons which is enabled only when a checkbox is checked.
My problem is when I check the checkbox and click the submit button, the radio value is not getting posted. But after I click on the checkbox and then click on one of the radio buttons then the value is posted.
How to fix this issue?
This is the code I have tried:
HTML
<form [formGroup]="filterProductTargetForm" (ngSubmit)="onSubmitFilterDataList(filterProductTargetForm.value)">
<div class="row">
<div class="col-md-10">
<input type="checkbox" [ngModel]="isProductTypeChecked" formControlName="checkProductType" (change)="onProductTypeChange($event)" />
<label>Select A or B</label>
</div>
</div>
<div class="row">
<label class="col-md-2 uni-label"></label>
<div class="col-md-10 prduct-type-radio">
<fieldset [disabled]="!isProductTypeChecked">
<input type="radio" [checked]="isProductTypeChecked == true" value="A" formControlName="productTypeSelected" [(ngModel)]="productTypeSelected">
<span>B</span>
<br>
<input type="radio" value="B" formControlName="productTypeSelected" [(ngModel)]="productTypeSelected">
<span>B</span>
</fieldset>
</div>
</div>
<button class="uni-button def" [disabled]="!filterProductTargetForm.valid">OK</button>
</form>
TS
ngOnInit() {
this.filterProductTargetForm = this.formBuilder.group({
'checkProductType': '',
'productTypeSelected': ''
});
}
public filterProductTargetForm: FormGroup;
public isProductTypeChecked = false;
onProductTypeChange(event: any) {
this.isProductTypeChecked = !this.isProductTypeChecked;
if(!this.isProductTypeChecked)
this.filterProductTargetForm.controls['productTypeSelected'].reset();
}
First remove all ngModel from your template when using reactive forms.
When the checkbox value changes, in your onProductTypeChange function set the productTypeSelected value
this.filterProductTargetForm.controls['productTypeSelected'].setValue('A');
Working StackBlitz DEMO
I have got some hidden buttons on the page. When I click on text input, one of these buttons shows on the page. Before:
<div field='login'>
<input type="text">
<button class="submit" style="display: none">Save</button>
</div>
<div field='name'>
<input type="text">
<button class="submit" style="display: none">Save</button>
</div>
After click on second input:
<div field='login'>
<input type="text">
<button class="submit" style="display: none">Save</button>
</div>
<div field='name'>
<input type="text">
<button class="submit">Save</button>
</div>
So I try to interact with second button by next selectors in my test:
static content = {
submitButton { $("button.submit") }
}
but I have next error:
isorg.openqa.selenium.ElementNotVisibleException: Element is not currently visible and so may not be interacted with
If I write:
static content = {
submitButton { $("button.submit", 1) }
}
it works, but I need to work with one first visible button on the page. What is wrong?
Unfortunately there is no css selector to find visible elements but you can use displayed property of Navigator and its findAll() method to find the button that is visible:
static content = {
submitButton { $("button.submit").findAll { it.displayed } }
}
I have a Form and i want to disable the entire form on click of a Button ,please see this code
<div dojoType="dijit.form.Form" id="myForm" jsId="myForm" encType="multipart/form-data"
action="" method="">
<table>
<input type="text" id="name" name="name" required="true" dojoType="dijit.form.ValidationTextBox"
<input type="text" id="dob" name="dob" dojoType="dijit.form.DateTextBox"
</table>
<button dojoType="dijit.form.Button" type=button onClick="console.log(myForm.getValues())">
Get Values from form!
</button>
<button dojoType="dijit.form.Button" type="submit" name="submitButton"
value="Submit">
Submit
</button>
<button dojoType="dijit.form.Button" type="reset">
Reset
</button>
<button dojoType="dijit.form.Button" onClick="callMe()">
Disable IT
</button>
</div>
I have written a function callMe to disable this
function callMe()
{
dijit.byId('myForm').disabled=true;
}
Dijit forms do not have a property "disabled", but rather you have to overwrite the onSubmit event:
dijit.byId('myForm').onSubmit = function () {
// If we return false here, the form will not be submitted.
return myMagicEnabledFlag;
};
Note that you cannot use dojo.connect as you have to modify the return value of the event and not just connect to it.
For disabling the entire form elements, use the "getChildren()" function of the dijit form, which would return the array of all the field widgets of that corresponding form. Then, you need to disable the widgets of that array. See below sample:-
dijit.byId('myForm').onSubmit = function () {
var widgets = dijit.byId('myForm').getChildren();
for(var i=0;i<widgets.length;i++) {
widgets[i].set('disabled', true);
}
//if you need to prevent the form submission & just disable, return false,
//else ignore the following return stmt
return false;
};