I want to show/hide a div when I select a date in the datepicker, or when the textbox associated changes its value.
I'm trying to intercept with jquery the selection, but it just won't fire. I attach some code to make myself clear.
Here's the html with the textbox and the datepicker div:
<div class='input-box margin-top10 div-data-and' data-role="data-input-div">
<div class="icona calendario-img"></div>
#Html.TextBoxFor(m => m.DepartureDate, new
{
#class = "inp-data-and",
placeholder = HttpUtility.HtmlDecode(Html.DisplayName(Resx.Index.DepartureDate).ToHtmlString()),
data_role = "data-input",
#readOnly = "true"
})
</div>
<div class="ui-datepicker-div" data-role="data-div"></div>
Looks also like I can't use $ as selection for Jquery but I assume I can do with 'jq11' the same thing, seeing that this code below actually works:
jq11(document).ready(function () {
init('#lcid');
initLocalEvents();
window.loader.hide();
selectionTrigger('#ViewBag.Selection');
});
Thanks in advance.
Related
How do I stop an Html.EditorFor element from displaying previous entered values in a drop down when I click in it. Below the html for this element I am using:
#Html.EditorFor(model => model.CreateDate,
new
{
htmlAttributes = new
{
#class = "form-control datepicker",
#id = "id-CreateDatePicker"
}
})
The automatic dropdown of previous values keeps covering the popup calendar which is preventing a user from selecting a date. The below picture shows the drop down of previous values that I need to stop showing when a user clicks in the box:
Thanks in advance.
When a user starts typing in an HTML form field, browsers, by default, enable the autocomplete feature. Numerous users let their browsers collect form data allowing using autocomplete in forms in the future.
To disable or enable autocomplete of text in forms, use the autocomplete attribute of <input> and <form> elements. This attribute contains two values:
on (specifies that autocomplete is enabled, this is the default
value)
off (specifies that autocomplete is disabled)
This can be done in a <form> for a complete form or for specific <input> elements:
Add autocomplete="off" onto the <form> element to disable autocomplete for the entire form.
Add autocomplete="off" for a specific <input> element of the form.
Example :
#Html.EditorFor(model => model.CreateDate,
new
{
htmlAttributes = new
{
#class = "form-control datepicker",
#id = "id-CreateDatePicker",
#autocomplete="off"
}
})
I have a modal and I want a progress bar to be shown while the data for modal display is being fetched by the service call. But in this case, progress bar is being fetched first and then the modal which makes the progress bar to be displayed under the modal. How to fix this ?
this.service.searchMembers(memSearchJson).subscribe((response: any) => {
// some function
}
<modal id="custom-modal-2">
<div class="modal">
</div>
<div id="memberSearchBar" class="class-hide">
<mat-spinner></mat-spinner>
Finding Member IDs..
</div>
</modal>
If document.getElementById("memberSearchBar").className = 'loading-div'; is called before the service call, it throws error as className null. Where should I call this to display progress bar on modal?
I would recommend using *ngIf, as mentioned above. For a better understanding, I add a link to the perfect tutorial.
Loading spinner
For example: in ts:
showSpinner: boolean = true;
ngOnInit() {
this.spinnerShow();
}
if you need show spinner before you get data like from service.
spinnerShow(){
this.workflowService.getData().subscribe(()=>
this.showSpinner = false);
}
And in HTML
<div *ngIf="showSpinner"></div>
Sorry for my terrible english, but i hope this will help you. :)
Instead of doing document.getElementById("memberSearchBar").className = 'loading-div' you can take advantage of Angular's *ngIf and [class.class-name]="expression"
Try something like this instead
displayModalAndSearchMembers(){
// using only isLoading should be sufficient, but I wanted to show how you could use [class.classname]="expression" in the html template as well.
this.isLoading = true;
this.showSpinner = true;
this.displayModal = true;
this.service.searchMembers(memSearchJson).subscribe((response: any) => {
// some function
this.isLoading = false;
this.showSpinner = false;
}
}
<modal id="custom-modal-2">
<div *ngIf="displayModal" class="modal"> <!-- added *ngIf -->
</div>
<div id="memberSearchBar" *ngIf="showSpinner" [class.loading-div]="isLoading">
<mat-spinner></mat-spinner>
Finding Member IDs..
</div>
</modal>
EDIT
You could also use *ngIf="displayModal" on the modal as well, in case you have some display: none on that one as well.
I added some ts code as well. I am not 100% sure what the desired behaviour OP wants, but I am assuming that she wants to show/hide the spinner, and set a class name on it.
This can be simplified by using only *ngIf="isLoading":
<div id="memberSearchBar" class="loading-div" *ngIf="showSpinner">
I have a checkboxfor and a textboxfor. If a user enters text into the textboxfor I would like the corresponding checkboxfor to be automatically checked for the user. With the option of course to un-check it if they change their mind.
#Html.CheckBoxFor(m => m.FirstPledge)
#Html.TextBoxFor(m => m.FirstPledgeText, new { #class = "textBoxSize" })
You may listen to the keyup event, check the content in textbox is valid and set the checked property of the checkbox to true.
Here is the code to do so using jQuery.
$(function () {
$("#FirstPledgeText").keyup(function () {
if($.trim($(this).val())!=="")
{
$("#FirstPledge").prop("checked", true);
}
});
})
If you want to uncheck the checkbox when the textbox is empty, add an else part to the if condition and set false for the checked property.
You can do the same in vanilla JavaScript as well if you prefer that.
I have an html form ( ) , I want that it is displayed when I click on a button.
the declaration of the form is the following :
<div id = "formulaire" class="gl" >
and the button is :
Edit
I use angularjs in my code . Please help me.
It better to use a simple variable than a function in this case. I would also recommend using controller scope when setting variables instead of the application scope so you don't run into issues with the variables when your application becomes large.
I also picked data-ng-click over ng-click because it will allow the html to validate correctly (which can be checked using the W3's validator).
Try this...
"use strict";
angular.module('myApp', [])
.controller("myController", function() {
this.edit = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div data-ng-app="myApp" data-ng-controller="myController as ctrl">
Edit
<div id="formulaire" class="gl" data-ng-show="ctrl.edit">
<form>
<fieldset>
<label>Field:</label>
<input type="text" />
</fieldset>
</form>
</div>
</div>
Have you looked into the ngShow directive? It ables you to show or hide a DOM element depending on whether the attribute expression resolves to a truthey or falsey value.
Add model change on click
Edit
And then display the form if model is true
<div id = "formulaire" class="gl" ng-if="show">
I am searching for the same answer that was given here:
HTML/CSS Making a textbox with text that is grayed out, and disappears when I click to enter info, how?
But I want to do this in MVC4.
I got the following view:
#using (Html.BeginForm("Kompetens", "KumaAdmin"))
{
<div class="three columns" style="margin-right: 627px;">
<h6>Kompetens</h6>
<div style="width:456px;"> #Html.ListBox("kompetensId", (SelectList)ViewBag.KomId)</div><br/>
<h6>Lägg till kompetens</h6>
<div class="focus">
#Html.EditorFor(mm => mm.KompetensTest)
</div>
<input type="submit" style="margin-right: 205px;" value="Skapa"/><br/><br/>
</div>
}
Since this is my textbox:
#Html.EditorFor(mm => mm.KompetensTest)
I don't know how to apply the "onfocus" & onblur attributes on it like in the link above.
You need to create an Editor Template. Because the Html.EditorFor does not have the "object htmlattributes" parameter to do "new { onfocus = "js here" }".
Over the Views>Shared,
Create a folder called EditorTemplates
Then, you create a view using #model string/whathever this object is. Name the file as you want.
When you put the #model on a view you are specifying that it only accepts this type mas a model.
Inside this view, you create a Html.TextBox (not TextBoxFor) and voila.
On the Html.EditorFor method there is also a way to set which editor template you want to use. Choose the one you created by typing its name like this:
#Html.EditorFor(mm => mm.KompetensTest, "GreyedTemplate")
Code for the View I named as: GreyedTemplate.cshtml
#model string
#Html.TextBox("", Model, new { onfocus = "", onclick="" })
Note that the first parameter is empty. This was done on purpose, because when you use EditorFor(mm => mm.KompetensTest,"GreyedTemplate") it uses KompetensTest as the name of the field automatically.
You want to use the placeholder html attribute (http://www.w3schools.com/tags/att_input_placeholder.asp)
Something like #Html.EditorFor(mm => mm.KompetensTest, new { placeholder = "Text" })
#Gmoliv It worked finaly! I googeld arround and found that the "Editfor" does not have access to html attributes. Although I found "TextBoxFor" which has access to them, so the soloution is:
#Html.TextBoxFor(mm => mm.Profile, new { placeholder = "Ange Profil" })
#Pedro I really tried hard to make it work but the problem was that i could not get the value to be set so it was alwasy empty, i treid setting it in the view and in the templateView and it simply did not take. If you could i would appreciate a full code sample
Thanks alot!