<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js">
<input id='a' ng-model="a">
<md-input-container>
<label>select</label>
<md-select ng-model="a">
<md-option value="1">11</md-option>
<md-option value="2">22</md-option>
<md-option value="3">33</md-option>
</md-select>
</md-input-container>
I want to set value of input to change value of md-select
I want to use only this
document.getElementById('a').value="2";
If you want to update the element by "id" you need to make sure to set the "id" attribute
<md-select id="a" ng-model="a">
But it is recommended (and easier) you change it using
$scope.a = 2
Related
I am new to react
I am using react libraries by including them in my _Layout.cshtml
So i am not able to use the multi select react dropdown from the react-select library
I added some dependencies for react-select but i still got the error “uncaught referenceerror : Select is not defined “
If anyone can help
screeshot of my code and the error
in the _layout page:
<!-- React Libraries -->
<script src="~/js/react.development.js" crossorigin></script>
<script src="~/js/react-dom.development.js" crossorigin></script>
<script src="~/js/babel.min.js"></script>
<script src="~/js/emotion.js"></script>
<script src="~/js/memoize-one.js"></script>
<script src="~/js/prop-types.js"></script>
<script src="~/js/react-input-autosize.min.js"></script>
<script src="~/js/react-transition-group.js"></script>
<script src="~/js/axios.min.js"></script>
<script src="~/js/react-select.js"></script>
in js file :
<div className="col-lg-6">
<label className="font-weight-bold text-dark col-form-label form-control-label text-2">
Industries you are interested in </label>
<Select id="ddlIndustry" value={industry || ''} className="form-control multi-select" isMulti
onChange={e => mutipleSelect(e.target.value)} multiple>
<option value="-1">-- Select Industry you are intrested in --</option>
{industries.map(industry => (
<option value={industry['businessSectorId']} key={industry['businessSectorId']}>
{industry['name']}
</option>
))}
</Select>
</div>
Remark i am using the tag select with capital s
Because i read that i should use the capital s not the small s
I am using bootstrap datetime picker (http://eonasdan.github.io/bootstrap-datetimepicker/) and I want to change the header of the week to a single letter like below:
S M T W T F S
Does anyone know any property to do that?
Bootstrap eonasdan-datetimepicker relies on momentjs and it uses moment to get the localized names of the days of the week (see fillDow function in the source: it uses currentDate.format('dd') to get short name of the day of the week via moment format).
Moment lets you customize localized short names using updateLocale and the weekdaysMin key as explained in the Customize -> Minimal Weekday Abbreviations section of the docs.
Here a complete working sample:
moment.updateLocale('en', {
weekdaysMin : ["S", "M", "T", "W", "T", "F", "S"]
});
$('#datetimepicker1').datetimepicker();
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.45/js/bootstrap-datetimepicker.min.js"></script>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
Is it possible to have a realtime update of input fields between two components?
In a component I have an input field which has a v-model="value". I wanna pass that input realtime to the other component and fill it into that input field.
Data of inputValue should be passed to the component 2 as value props. Or maybe I'm wrong with my result?
COMPONENT 1
<template>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="global-{{element}}" v-model="inputValue">
<label class="mdl-textfield__label" for="global-{{element}}">{{ label }}</label>
</div>
</template>
COMPONENT 2
<template>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input name="items[{{prop1}}][{{element}}]" value="{{value}}" class="mdl-textfield__input"
type="text" id="{{element}}">
<label class="mdl-textfield__label" for="{{element}}">{{ label }}</label>
</div>
</template>
<script>
export default{
props: ['prop1', 'element', 'value', 'label']
}
</script>
I tried with ...
this.$dispatch('tag-update', this.inputValue);
... but I need an #keyup.xx. But that's not what I want. I want it to update as soon as I pressed and released a letter, number etc.
You can certainly achieve this with events, or you can move the inputValue up to the parent component or root and pass it to each component as a synced prop.
http://jsfiddle.net/gtmmeak9/118/
The second component doesn't have to be synced if you just want one way binding on it.
I am using the jQuery Mobile date picker control but I cannot change any of the properties. For example, the following code will attempt to set the first day of the week to Wednesday, in the document ready function but it doesn't work.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="jquery.ui.datepicker.mobile.css" />
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.0a4.1.min.js"></script>
<script src="jquery.ui.datepicker.js"></script>
<script src="jquery.ui.datepicker.mobile.js"></script>
<script>
$(document).ready(function()
{
$("#date").datepicker({ firstDay: 3 });
});
</script>
</head>
<body>
<div data-role="page" data-theme="b" id="home">
<div data-role="header">
<h1>Test</h1>
</div>
<div data-role="content" data-theme="b">
<div data-role="fieldcontain">
<input type="date" name="date" id="date" value="" />
</div>
</div>
</div>
</body>
</html>
Any ideas what I'm doing wrong? Is this failing to work because the date picker is already displayed?
I have managed to change to change the properties by changing the "jquery.ui.datepicker.mobile.js" file
To change the date format to : "dd/mm/yy" Code shown below
//bind to pagecreate to automatically enhance date inputs
$( ".ui-page" ).live( "pagecreate", function(){
$( "input[type='date'], input[data-type='date']" ).each(function(){
$(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true, dateFormat: "dd/mm/yy" }));
});
});
What happens if you try a different setter?
$('.selector').datepicker('option', 'firstDay', 1);
Your missing the bind()
//reset type=date inputs to text
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
Docs (At the bottom of the page): http://jquerymobile.com/demos/1.0a4.1/experiments/ui-datepicker/
Also I like the DateBox a littler better IMO: http://dev.jtsage.com/jQM-DateBox/
I had a similar problem and had to change two lines in jquery.ui.datepicker.mobile.js
First, I needed to store the return value of the call to prevDp (line 18).
var value = prevDp.call( this, options );
Then I had to return this value instead of this (line 46)
return value;
Now you should be able to call the datepicker with options like Matt Ball suggested.
Is there a way to use Client Side Validation with the SPARK view engine?
I have the following SPARK view:
<script type="text/javascript" src="~/content/script/shared/MicrosoftAjax.js?${ApplicationStartTime}"></script>
<script type="text/javascript" src="~/content/script/shared/jquery-ui-1.7.2.custom.min.js?${ApplicationStartTime}"></script>
<script type="text/javascript" src="~/content/script/shared/jquery.validate.min.js?${ApplicationStartTime}"></script>
<script type="text/javascript" src="~/content/script/shared/jquery.validate.unobtrusive.js?${ApplicationStartTime}"></script>
<script type="text/javascript" src="~/content/script/shared/MicrosoftMvcJQueryValidation.js?${ApplicationStartTime}"></script>
<viewdata model="Business.Models.Development.Dtos.DonationFormDto" />
#Html.EnableClientValidation();
<form id="form" action="~/development/donate.mvc" method="post">
<label>
*First Name
</label><br/>
<input type="text" name="model.FirstName" Id="FirstName" value="${Model.FirstName}"/> ${Html.ValidationMessage("model.FirstName")}
<br/>
</form>
Server-side validation works fine, but client-side validation doesn't.
I can make it work by using ASP.NET Helpers and form syntax like so:
using (Html.BeginForm("Index", "Donate", FormMethod.Post, new {id = "form", action="donate.mvc" }))
{
<%=Html.LabelFor( model => model.FirstName) %><br/>
<%=Html.TextBoxFor(model => model.FirstName)%>
<%=Html.ValidationMessageFor( model => model.FirstName) %><br/>
}
But then my model doesn't bind correctly and sever-side validation fails on submit.
Any suggestions? Is abandoning SPARK and creating a classic strongly-typed view the only option?
#KarlBear, why did you use "<%=" instead of "${...}" or "!{...}" in spark ?
${Html.LabelFor( model => model.FirstName)}<br/>
${Html.TextBoxFor(model => model.FirstName)}
${Html.ValidationMessageFor( model => model.FirstName)]<br/>