I've followed the instruction how to disable the jquery-UI datepicker and using the bootstrap datepicker BootStrap DatePicker NoConflit but I get this error message in browser :
Uncaught TypeError: $.fn.datepicker.noConflict is not a function
HTML
<div class="input-append date" id="dp3" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
JAVASCRIPT
$(function(){
var datepicker = $.fn.datepicker.noConflict();
$.fn.bootstrapDP = datepicker;
$("#dp3").bootstrapDP();
});
Related
I have a hidden form in a dialog which I want to submit automatically.
HTML Code :
<form #formVal method="POST" [action]="urlvalue">
<p *ngFor="let item of redirectData.RedirectData.Form.Parameter;
let pindex = index;">
<input type="hidden" [name]="item.name" [value]="item.value">
</p>
</ form>
`
In my previous angular 1.5 code I was doing
$timeout(() => {
angular.element('#3DSForm').submit();
}, 100);
and it was working but here in Angular 6 I tried using ViewChild in ngAfteronInit but still no luck I am getting error for native element, I even used ngNoform in my HTML but didn't work out.
#ViewChild('formVal') form: ElementRef;
setTimeout(() => {
this.form.nativeElement.submit();
}, 200);
Kindly suggest what am I missing
You probably have some element called submit.
Example:
<input type="hidden" name="submit">
Rename it to something else, e.g btnSubmit.
You should call click event for submit button like this,
<form #formVal method="POST" [action]="urlvalue">
<div *ngFor="let item of redirectData.RedirectData.Form.Parameter; let pindex = index;">
<input type="hidden" [name]="item.name" [value]="item.value">
</div>
<input type="hidden" name="submit" #submitBtn>
</ form>
in ts file
#ViewChild('submitBtn') submitBtn: ElementRef;
submitForm() {
this.submitBtn.nativeElement.click();
}
after that call the submitForm() function from where you want to submit the function.
I was able to achieve it using HTMLFormElement.
<form ngNoForm name="myForm" id="myForm" [action]="urlvalue" method="POST">
<button type="submit" class="test" style="visibility: hidden;"></button>
</form>
This code in the component.
const form: HTMLFormElement = document.getElementById('myForm');
form.submit();
I am a newcomer to angularjs and am incredibly confused as to how data-binding and dependency-injection work.
To test if the code works, I created a test expression, 5+5. It works if I don't inject dependencies inside the module, but doesn't if I inject one.
I am working with Ruby on Rails. Here is the example code
Welcome.index.erb
<div class="col-md-4 col-md-offset-2">
<ul class="list-inline" ng-app="my-app" ng-controller="HomeCtrl">
<li><a ng-href="/api/auth/sign_in">Sign In</a></li>
<li><a ng-href="/api/auth/sign_up">Sign Up</a></li>
<li>Help</li>
<li>{{5+5}}</li>
</ul>
</div>
<script>
angular.module("my-app", [])
.controller("HomeCtrl", function($scope) {
$scope.number = 1;
});
</script>
This works, tested by the data-binding expression {{5+5}} evaluating to 10. However, if I add a dependency injection to my module
angular.module("my-app", ['ngRoute'])
.controller("HomeCtrl", function($scope) {
$scope.number = 1;
});
.controller("UserRegistrationsCtrl", ['$scope', function($scope) {
});
.controller("UserSessionsCtrl", ['$scope', function($scope) {
});
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/welcome/index.html.erb',
controller: 'HomeCtrl'
})
.when('/sign_in', {
templateUrl: 'views/user_sessions/new.html',
controller: 'UserSessionsCtrl'
})
.when('/sign_up', {
templateUrl: 'views/user_registrations/new.html',
controller: 'UserRegistrationsCtrl'
})
.otherwise({
redirectTo: '/'
});
}]);
the data-binding looks like it gets broken, and the list item gets rendered as {{5+5}}.
user_sessions/new.html
<form ng-submit="submitLogin(loginForm)" role="form" ng-init="loginForm = {}">
<div class="form-group">
<label for="email">Email</label>
<input type="email"
name="email"
id="email"
ng-model="loginForm.email"
required="required"
class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password"
name="password"
id="password"
ng-model="loginForm.password"
required="required"
class="form-control">
</div>
<button type="submit" class="btn btn-primary btn-lg">Sign in</button>
</form>
user_registrations.html
<form ng-submit="handleRegBtnClick()" role="form" ng-init="registrationForm = {}">
<div class="form-group">
<label for="email">Email</label>
<input type="email"
name="email"
id="email"
ng-model="registrationForm.email"
required="required"
class="form-control">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password"
name="password"
id="password"
ng-model="registrationForm.password"
required="required"
class="form-control">
</div>
<div class="form-group">
<label for="password_confirmation">Password confirmation</label>
<input type="password"
name="password_confirmation"
id="password_confirmation"
ng-model="registrationForm.password_confirmation"
required="required"
class="form-control">
</div>
<button type="submit" class="btn btn-primary btn-lg">Register</button>
</form>
Not sure why the data-binding was broke. Any help will be appreciated.
Update
I went into the Console in Chrome Developer Tools, and ran a couple commands
var listElement = document.querySelector('ul')
listElement
=><ul class="list-inline" ng-app="my-app" ng-controller="HomeCtrl">...
listElement.controller();
=>TypeError: undefined is not a function
listElement.injector();
=>TypeError: undefined is not a function
Here are the scripts I'm using
<script src="/assets/jquery-7f1a72dc175eaa60be2e692ab9e6c8ef.js?body=1"></script>
<script src="/assets/jquery_ujs-68ce8f5ee2895cae3d84a114fdb727e1.js?body=1"></script>
<script src="/assets/bootstrap-3dfec047bf3f975670c20b5e35a5f42e.js?body=1"></script>
<script src="/assets/angular/angular-8bf873ad356fbb7267e223d5cac348f5.js?body=1"></script>
<script src="/assets/angular-8bf873ad356fbb7267e223d5cac348f5.js?body=1"></script>
<script src="/assets/angular-cookie/angular-cookie-79e90f9112d0e1bf9aede30a4b7f5d36.js?body=1"></script>
<script src="/assets/angular-cookie-79e90f9112d0e1bf9aede30a4b7f5d36.js?body=1"></script>
<script src="/assets/angular-bootstrap/ui-bootstrap-tpls-2d5fe21018866bf67cca9784e2ae95a9.js?body=1"></script>
<script src="/assets/angular-bootstrap-2d5fe21018866bf67cca9784e2ae95a9.js?body=1"></script>
<script src="/assets/angular-messages/angular-messages-f8b337aaacde7f3ee4d9fd590f36749a.js?body=1"></script>
<script src="/assets/angular-messages-f8b337aaacde7f3ee4d9fd590f36749a.js?body=1"></script>
<script src="/assets/angular-resource/angular-resource-79e25fff913ab31c097086ac463d7d41.js?body=1"></script>
<script src="/assets/angular-resource-79e25fff913ab31c097086ac463d7d41.js?body=1"></script>
<script src="/assets/angular-ui-router/angular-ui-router-1c9044ef4d22b7d3b266e72a34c275ea.js?body=1"></script>
<script src="/assets/angular-ui-router-1c9044ef4d22b7d3b266e72a34c275ea.js?body=1"></script>
<script src="/assets/angular-ui-utils/ui-utils-895ce7dcab9d6b51db05d3816862b02c.js?body=1"></script>
<script src="/assets/angular-ui-utils-895ce7dcab9d6b51db05d3816862b02c.js?body=1"></script>
<script src="/assets/ng-token-auth/ng-token-auth-1e86f8812a656893f8b8ee6fe807290d.js?body=1"></script>
<script src="/assets/ng-token-auth-1e86f8812a656893f8b8ee6fe807290d.js?body=1"></script>
<script src="/assets/angular/app-b06dbf3801b44bee508a1fea1255119d.js?body=1"></script>
<script src="/assets/application-b2f074707bb9272eab9330966cfe5014.js?body=1"></script>
My application.js.coffee
#= require jquery
#= require jquery_ujs
#= require bootstrap
#= require angular
#= require angular-cookie
#= require angular-bootstrap
#= require angular-messages
#= require angular-resource
#= require angular-ui-router
#= require angular-ui-utils
#= require ng-token-auth
#= require_tree
For one thing, you are placing semi-colons where you shouldn't be. You are breaking your method chains.
angular.module('my-app', ['ngRoute'])
.controller('HomeCtrl', function($scope) {
...
})
.controller('UserRegistrationsController', ['$scope', function($scope) {
...
}])
.controller('UserSessionsController', ['$scope', function($scope) {
...
}])
.config(['$routeProvider', function($routeProvider) {
...
}]);
I don't know that this would be your entire issue, but update your code accordingly, look at your console and report the errors coming out there.
The problem was related to my Gemfile and Assets. I had the following gem installed
gem "rails-assets-angular-ui-router"
I needed to add
gem "rails-assets-angular-route"
then add
#= require angular-route
to my application.js.coffee file
i have a search form whith jquery autocomplete on some fields.
<form id="prjs_form" class="prjcts" action="<wp:action path="/ExtStr2/do/enpim/projects/list.action" />" method="post">
<div class="row bord">
<div class="wid_ut">
<span class="label"><wp:i18n key="ACRONYM" /></span>
<span class="field"><input id="autAcronym" type="text" name="bean.acronym" value="${bean.acronym}" class="lrg autocomplete" /></span>
</div>
......................
<div class="row">
<div class="act_btns">
<input type="submit" name="search" value="<wp:i18n key='SEARCH'/>">
</div>
</div>
</form>
My need is to submit the form when I select one of the values suggested by autocomplete.
this is my jquery
jQuery('#autAcronym').autocomplete({
params: { type: 'project_acronym' },
paramName: 'text',
serviceUrl: '<wp:info key="systemParam" paramName="applicationBaseURL" />json/hall.ShowParameters',
minChars: 2,
select: function(event, ui) {
if(ui.item){
$(event.target).val(ui.item.value);
}
$('#prjs_form').submit();
return false;
}
});
when i start typing on field the autocomplete work fine, but when i select one of the suggested value the select event doesn't trigger....
what's wrong?
the other similar post on stackoverflow doesn't solved my problem
thanks in advance
I'm using the bootstrap datetimepicker library like so:
#using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
<div id="searchContainer">
<div class="well">
<div id="datetimepicker1" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text" id="StartDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
<div class="well">
<div id="datetimepicker2" class="input-append date">
<input data-format="dd/MM/yyyy hh:mm:ss" type="text" id="EndDate" />
<span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar">
</i>
</span>
</div>
</div>
#Html.Bootstrap().SubmitButton().HtmlAttributes(new { #class = "btn" })
</div>
}
This is another try:
#using (Html.BeginForm("Search", "Home", FormMethod.Post))
{
<div id="searchContainer">
#Html.Bootstrap().TextBoxFor(model => model.StartDate).HtmlAttributes(new { id = "datetimepicker1", #class = "input-append date" }).AppendIcon("icon-calendar")
#Html.Bootstrap().TextBoxFor(model => model.EndDate).HtmlAttributes(new { id = "datetimepicker2", #class = "input-append date" }).AppendIcon("icon-calendar")
#Html.Bootstrap().SubmitButton().HtmlAttributes(new { #class = "btn" })
</div>
}
JQuery:
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
language: 'en'
});
});
$(function () {
$('#datetimepicker2').datetimepicker({
language: 'en'
});
});
</script>
The first chunk of code where the divs are used, work fine when selecting a date and time. But the second one with the razor syntax doesn't.
When using the first chunk for selecting a date and time, it's not posted to the server when button is pressed.
The model only contains the 2 dates:
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
Does anyone see what I might be doing wrong here?
EDIT
With "it doesn't work" when using the Razor syntax, the datetimepicker just didn't show up, nothing happened. Now I have been testing some further, i get a runtime error pointing to this line in the datetimepicker.min.js file:
offset.top=offset.top+this.height;
And this is the error message it pops up in a dialog:
Unhandled exception at line 26, column 5290 in
http://tarruda.github.io/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js
0x800a138f - JavaScript runtime error: Unable to get property 'top' of
undefined or null reference
This is the rendered html of the form:
<form action="/Home/Search" method="post"> <div id="searchContainer">
<select class="chzn-select" data-placeholder="Select items" id="Ids" multiple="multiple" name="Ids"><option value="1">test0</option>
<option value="2">test1</option>
<option value="3">test2</option>
<option value="4">test3</option>
<option value="5">test4</option>
<option value="6">test5</option>
</select>
<div class="input-append"><input class="input-append date" data-val="true" data-val-date="The field Start Date must be a date." data-val-required="The Start Date field is required." id="datetimepicker1" name="StartDate" type="text" value="1-1-0001 0:00:00" /><span class="add-on"><i class="icon-calendar"></i></span></div>
<div class="input-append"><input class="input-append date" data-val="true" data-val-date="The field End Date must be a date." data-val-required="The End Date field is required." id="datetimepicker2" name="EndDate" type="text" value="1-1-0001 0:00:00" /><span class="add-on"><i class="icon-calendar"></i></span></div>
<button class="btn btn" type="submit">Submit</button>
</div>
</form>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
language: 'en'
});
});
$(function () {
$('#datetimepicker2').datetimepicker({
language: 'en'
});
});
</script>
<style type="text/css">
#searchContainer {
margin-top:10%;
}
</style>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<p>© 2013 - My ASP.NET MVC Application</p>
</div>
</div>
<script type="text/javascript" src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
Your first approach has the problem, that you omitted the name attributes for the input fields. The name attribute defines what variable is posted by the form.
Just write :
<input ... type="text" id="StartDate" name="StartDate />
For your second try:
But the second one with the razor syntax doesn't.
What do you mean with doesn't work? Can you show the rendered HTML?
For the second try:
If you look at the documentation for bootstrap datetime-picker, it shows that the id attribute #datetimepicker1 should be applied to the container of the input. Instead you are applying it to the input itself.
Also it seems that attributes data-time-icon="icon-time" data-date-icon="icon-calendar" need to be applied to the <i> tag, which TwitterBootstrapMVC does not do out of the box.
Either submit an issue to the TwitterBootstrapMVC to add an overload to .IconAppend method to also take Icon class that you'd be able to customize however you want... or better yet, fork it make the necessary change and submit a pull request.
I changed my model to accept a string instead of a DateTime object, and that fixed it.
I need some sort on onclick function for my jquery mobile/php website. The following on-click wont work...
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
_END;
$int = 0;
foreach (array_slice($list,1) as $value) {
echo <<<_END
<input type="checkbox" name="checkbox-$int" id="checkbox-$int" class="custom" />
<label for="checkbox-$int">$value</label>
_END;
$int = $int+1;
}
echo <<<_END
</fieldset>
<script type="text/javascript" >
$(".checkbox-1").click(function(){
alert('clicked!');
});
</script>
</div>
_END;
Your jQuery is using a class selector, you need to update to it used an ID selector to match the output.
Replace
$(".checkbox-1").click
with
$("#checkbox-1").click