Develop Reference

ng-model value is not updating when i select all drop-down elements

My issue is when using a ngModel for validation. It is not working in edge browser when select a value via SelectAll option.
not working sample code, Here i did not use [(value)]:
<ejs-multiselect id='multiselect-checkbox' #checkbox [dataSource]='countries' name='formRequired' [placeholder]='checkWaterMark' (change)='onMultiChange(projectInfoTypeId, projectInfoText)' [fields]='checkFields'
[mode]='mode' [popupHeight]='popHeight' [showDropDownIcon]='true' showSelectAll='true' [(ngModel)]='ProjectTypeId' #projectInfoTypeId='ngModel' [filterBarPlaceholder]='filterPlaceholder' required ></ejs-multiselect>
</div>
<div *ngIf="projectInfoTypeId.errors?.required" class="validationText">
country is required.
</div>
I have validate this issue and suspect that the value changes are not reflect to ngModel. i have bind same property to both value and ngModel. This issue is resolved.
Working sample code, Here i used [(value)]:
<ejs-multiselect id='multiselect-checkbox' #checkbox [dataSource]='countries' name='formRequired' [placeholder]='checkWaterMark' (change)='onMultiChange(projectInfoTypeId, projectInfoText)' [fields]='checkFields'
[mode]='mode' [popupHeight]='popHeight' [showDropDownIcon]='true' showSelectAll='true' [(value)]='ProjectTypeId' [(ngModel)]='ProjectTypeId' #projectInfoTypeId='ngModel' [filterBarPlaceholder]='filterPlaceholder' required ></ejs-multiselect>
</div>
<div *ngIf="projectInfoTypeId.errors?.required" class="validationText">
country is required.
</div>
Please provide any idea. I want know, is this a behavior or not
workig sample link:
sample 1
not working sample link:
sample 2
Error:
if select all, the following error occurs:
ERROR TypeError: Unable to get property 'preventDefault' of undefined or null reference

AutoComplete Google Javascript

Hi I am having trouble getting the autocomplete to display like here. My code works on submit and displays the map properly, but does not show results of autocomplete. I am wondering what could be the issue.
Here is my HTML
<div id="floating-panel">
//this is the text field that does not display the autocomplete
<input id="address" placeholder="Enter Starting Location" type="text"/>
<input id="submit" type="button" value="Directions">
</div>
<div id="right-panel"></div>
<div id="map"></div>
Here is my Javascript:
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('address'));
Here is my call to autocomplete, the API is enabled, I see calls being made on the data, but no results back:
https://maps.googleapis.com/maps/api/js?key=xxx&libraries=places&callback=initMap: {type: external, attributes: {async: true}}

Google maps API has new security changes in its new version, use version 3.0, this works for me:
<script src="https://maps.googleapis.com/maps/api/js?v=3.0&key=YOUR_KEY&libraries=places" async></script>

I'm getting the same thing with very similar code. For me that code was working for months and just today I got a report from a user that the drop down list of locations wasn't showing anymore.
var input = $("input[name='location']");
var formattedAddress = input.next("input[name='formattedLocation']");
var searchBox = new google.maps.places.SearchBox(input[0]);
searchBox.addListener('places_changed', function() {
var places = searchBox.getPlaces();
if (places.length == 0) {
formattedAddress.val('');
return;
}
formattedAddress.val(places[0].formatted_address);
});
I was thinking that maybe we went over our daily quota, but it doesn't seem so from the Google API console. I don't see any errors in the browser console. If I look in developer tools network tab I can see requests going to https://maps.googleapis.com/maps/api/place/js/AutocompletionService.GetQueryPredictions, but the responses seem rather cryptic (ex:/**/xdc._490z0c && xdc._490z0c( [4] ) ) so I can't tell if good data is coming back or not.
I'm wondering if something changed recently on the Google side that I haven't heard about.

My temp solution: I went with the experiential version, https://maps.googleapis.com/maps/api/js?v=3.32 and noticed at the bottom of my HTML there is a tag <div class="pac-container pac-logo hdpi">once you start typing it updates, style this and got fixed. I sent a issue request I am hoping they are going to fix this for the stable version.

https://developers.google.com/maps/documentation/javascript/versions
Specify that you want to use the release version rather than the experimental if you are on the standard plan.

Input date don't work on safari

Date calendar doesn't work on safari browser but work correctly on other browser.
This is my code for the input date :
<div class="col-lg-4 col-xs-6">
<label for="exampleInputEmail1">Date de :</label>
<input type="date" required class="form-control" ng-model="date_debutOP">
</div>

According to MDN,
input[type=date] is recognized but there is no UI.
Meaning, the browser doesn't have a calendar-like display for such input controls.
You could also refer to caniuse.com to check for compatibility for such features.

The input-type Date is n newer one which isn´t supported on each browser. It´s just a field-validation and in some browsers there is a datepicker.
First only Chrome and now Firefox/..., too.
You could use this instead and it´s very simple:
JavaScript Datepicker

Maybe a bit late, but better late then never ;-)
This works for me:
Add this to your functions.php:
add_filter( 'wpcf7_support_html5_fallback', '__return_true' );
Then add this to your custom css:
div#ui-datepicker-div { z-index:1000!important; }
The inputfield still looks empty, but when you click on it, it will open the datepicker.

jQueryMobile radio buttons when clicked generates errors

I'm using jQuery mobile 1.4.2 and I'm experiencing some extremely annoying issues with the radio buttons. The issue being that they don't work.
I've scoured the internet, and not managed to find a solution; so maybe other people are not having this issue as well as me. I do think however that I'm doing everything "right", so hopefully this question can help others if they experience the issue too.
The outputted HTML for the page can be found here, but the code used to generate it is:
<form method="post" action="/category/log">
<input type="hidden" name="id" value="<%: Model.CurrentCategory.Id %>" />
<div data-role="controlgroup">
<% Dim elementId = "personId"%>
<% For Each e In Model.Engineers%>
<% Dim formattedId = elementId & "-" & e.Id%>
<input type="radio" name="<%:elementId %>" id="<%:formattedId %>" value="<%:e.Id %>" />
<label for="<%:formattedId %>"><%:e.Name%></label>
<%Next%>
</div>
<input type="submit" value="Log Visit" />
</form>
When a radio button is clicked, the following error is generated:
Uncaught TypeError: Object #<HTMLInputElement> has no method 'substring'
It reports this occurs in:
jquery.mobile-1.4.2.js:2656
An image of this can be found here:
If anyone can help that would be great, and if anyone else is having this issue, hopefully this will help them also.
Thanks,

I don't know what the problem was but the latest version seems to fix it:
http://code.jquery.com/mobile/git/jquery.mobile-git.js

I've same problem (Only with jqm v1.4.2, not with jqm v1.4.0).
The origin of the problem is the presence of the hidden input field in the form.
Problem happens in $.mobile.path.hashToSelector(hash) and is due to the fact that an object (the hidden input field) is passed as parameter and then the substring function is applied to this object.
Following hack solves the problem (file jquery.mobile-1.4.2.js, line 2654)
// Escape weird characters in the hash if it is to be used as a selector
hashToSelector: function( hash ) {
/* Hack begin */
if(typeof hash != "string") return hash;
/* Hack end */
var hasHash = ( hash.substring( 0, 1 ) === "#" );
if ( hasHash ) {
hash = hash.substring( 1 );
}
return ( hasHash ? "#" : "" ) + hash.replace( /([!"#$%&'()*+,./:;<=>?#[\]^`{|}~])/g, "\\$1" );
},
But I don't know if this hack can generate another problem elsewhere in the code (better not to modify an original librairy anyway).
As said above, git version (1.5-pre) of jqm solves the problem as you can see in http://jsfiddle.net/4uBqW/5/ (to compare, this http://jsfiddle.net/4uBqW/6/ is with jqm 1.4.2 and as the problem)

dynamic window.find not working with jQuery

I can't for the life of me figure out why this isn't working.
I want to search the current page for text using a search box. I googled and found this: http://www.javascripter.net/faq/searchin.htm . I implemented the code into my site, but it doesn't work. the function ( findString() ) works, but only when I hard-code a string (as in i can't use javascript or jquery to get the value of a text input). I made this fiddle: http://jsfiddle.net/alyda/CPJrh/4/ to illustrate the problem.
You can uncomment different lines to see what I've tested.

jQuery has a method :contains() that will make easier what you are looking for.
Take a look here: fiddle
$("button[type='submit']").click(function () {
var string = $('#search').val();
var matched = $('li:contains(' + string + ')');
matched.css('color','red');
console.log(matched);
return false;
});

I found a fix (sort of). It seems that the input needs to be placed well AFTER the content to be searched in the DOM. That means I've done the following:
<section class="content">
<h2>Fire</h2>
<h3>Fire Extinguishers</h3>
<ul>
<li>Model 240</li>
<li>Model C352, C352TS</li>
<li>Model C354, C354TS</li>
</ul>
...
<div id="navbar">
<ul>
...
</ul>
<input id="search" type="text" class="form-control pull-left" placeholder="Search for part number">
<button id="submit" type="submit" class="btn btn-default pull-left" style=" margin-top:6px;">Search</button>
</div>
as you can see, I've moved the input (which is in the navbar div) BELOW all of the text I want to search, and used CSS to programmatically place the navbar at the top of the page. I don't particularly like this setup (as it messes with the flow of content) but since I was looking for the quickest and simplest implementation of a single-page search, it will have to do.
I would still love to know why this happens, when the javascript is at the end of the DOM where it belongs...

In firefox I noticed that the fiddle (v4) as given in the question worked, but not in the way the asker expected it to.
What happens in firefox is that the function does find the value..: you have just entered it in the input-field. Then the browser's find method seems to hang in the 'context' of the input 'control' and doesn't break out of it. Since the browser will continue to search from the last active position, if you select anything after the input-field, the function works as expected. So the trick is not to get 'trapped' in the input-field at the start of your search.
A basic (dirty) example on how to break out of it (not necessarily the proper solution nor pure jquery, but might inspire a useful routine, since you now know the root of the problem in FF):
$( "button[type='submit']" ).click(function(){
var tst=$('#search').val(); //close over value
$('#search').val(''); //clear input
if(tst){ //sanity check
this.nextSibling.onclick=function(){findString( tst );}; //example how to proceed
findString( tst ); //find first value
} else { alert('please enter something to search for'); }
return false;
});
Example fiddle is tested (working) in FF.
PS: given your specific example using <li>, I do feel Sergio's answer would be a more appropriate solution, especially since that would never run line: alert ("Opera browsers not supported, sorry..."), but the proper answer to your window.find question is still an interesting one!
PS2: if you essentially are using (or replicating) the browser's search-function, why not educate the user and instruct them to hit Ctrl+F?
Hope this helps!

I had same problem in an angularjs app and I fix it by changing DOM structure.
my HTML code was something like this:
<body>
<div class="content" >
<input class="searchInput" />
<p>
content ....
</p>
</div>
</body>
and I changed it to something like this:
<body>
<div class="search">
<input class="searchInput" />
</div>
<div class="content">
<p>
content ....
</p>
</div>
</body>
Note: I'm aware that this topic is old.