I've been looking and trying to work on this for a while, but the way my company does things causes it to be unnecessarily difficult for me. At work I do a lot of work on an internal customer facing system that we edit entirely in HTML using AngularJS. We can run scripts locally in these HTML files but can not access the $scope in our functions.
I have an input field as shown below, and I need it to limit the phone number to 10 digits and automatically remove any non-numerical value. What I'm doing so far is this.
At the beginning of the HTML file, the scripting:
<script language = "javascript" type = "text/javascript">
fixPhoneNumber = function(interviewProperty) {
var cleaned = iData[interviewProperty]
cleaned = cleaned.replace(/\D/g,'');
iData[interviewProperty] = cleaned;
console.log(testing testing testing);
}
</script>
and in the data itself, this is how I'm attempting to call the data. I'll answer any questions if I'm not specific enough, but I think I've gotten everything shown here.
<button id="copyDP" class="copyButton" ng-click="copy_cust_data('phone', 'local_dir_ad_phone');" type="button">Copy Customer Phone</button><br/>
<input id="local_dir_ad_phone" type="text" class="k-textbox spellcheck" style="width:100%;" ng-change="fixPhoneNumber('local_dir_ad_phone')" ng-required="iData.site_addr_phone_same==='YES'" ng-model="iData.local_dir_ad_phone" /><br/>
<span class="error" ng-show="(iData.local_dir_ad_phone==undefined) || (iData.local_dir_ad_phone==='')">This information is required.</span>
<br/>
<ul>
<li>Is this also the best number for us to reach you at?
<ul>
<input id="contact_phone_good" type="radio" ng-model="iData.contact_phone_good" value="YES" /> <b>Yes</b><br/>
<input id="contact_phone_good" type="radio" ng-model="iData.contact_phone_good" value="NO" /> <b>No</b><br/>
<div ng-show="iData.contact_phone_good==='NO'">
<ul>
<li>What is the best number for us to reach you at? <span id="usernote">(Update Prospector Customer record with best contact number)</span></li>
</ul>
</div>
</ul>
</li>
</ul>
The value I'm looking to have changed is the 'local_dir_ad_phone' as it already has the ng-change applied in this example. Is there perhaps some reason that ng-change wouldn't actually execute its function every time a change was made? From reading the API, I'm under the impression that it should run it on every change made real time.
Any help is appreciated. Thanks!
If I understand what you're saying-
You are changing the value of the input outside of angular so it's not seeing the change. If you are changing input outside of angular you need to call $scope.$apply() to apply you changes. Since you don't have access to scope you can do it by calling $apply on $rootScope.
angular.element('body').injector().get('$rootScope').$apply();
But this sucks and you should talk to someone at work about getting a handle on the scope as this would cause a digest for the entire app.
Related
I'm having an issue sharing a value between my HTML forms. I'm a beginner so this is probably a very easy fix.
Newvehicle.html:
<div class="input-group">
<input class="form-control" id="inputMake" type="text" placeholder="Make..." style="width: 150px;"/>
</div>
Item1.html:
<label>Make: </label><li onclick="getMake()"></li></br>
Newvehicle.js:
function getMake(){
var make = document.getElementById("inputMake").value;
}
I would like the value inputted into the text field on Newvehicle.html to display as a list item on Item1.html. Can someone please advise?
What you could do is, to save the value in localStorage and retrive it in the secound file.
A possible HTML solution would be:
Newvehicle.html:
<div class="input-group">
<input class="form-control" id="inputMake" type="text" placeholder="Make..." style="width: 150px;" onkeyup="localStorage.value1 = this.value" />
</div>
Item1.html:
<label>Make: </label><li id='entry_1'></li></br>
<script type="text/javascript">
document.getElementById('entry_1').innerHTML = localStorage.value1;
</script>
Newvehicle.js:
not required for that, but nice to have the whole logic in a seperate JS file
Explanation:
the onkeyup event fires up each time the usert releases a key on the keyboard, so with each firing we create/replace the value1 in localStorage.
right after the list element will a javasript code be executed that reads the value from localStorage in your case value1 and replaces the innerHTML.
keep in mid that this only works if you work on the same domain.Localstorage keeps the data until you clear the localstorage whit localStorage.clear()
alternatively you can use sessionStorage instead of localStorage tho keep the data only for one browsing session.
See:
Webstorage on W3C Schools
Keep on going and soon you will master the Javasript language.
I want to display a list of things and let users edit them.
The list is generated using ng-repeat. At first when it was displayed, it should be in the form of pure texts. But when the user pushed the corresponding edit button, it should be changed into an input textfield, with the contents unchanged. When the user submits the form, the data is saved and the input should be changed back to pure texts.
Is this compatible with the Angular way of thinking? If so, how do I realize it? If not, what is the correct way to realize the idea in AngularJS?
Something like this would probably work:
<ul>
<li ng-repeat='item in items'>
<span ng-hide='item.editing'>item.value</span>
<input type='text' ng-show='item.editing' ng-model='item.value' />
<button ng-click='item.editing = !item.editing'>Edit</button>
</li>
</ul>
Then in your submit action set item.editing = false for every item in items
other way or way that i prefer with angular js is to keep a track of current item on scope, this works better if you the fields being edited are in large number
$scope.currentitem;
setting current item equal to the item tha's being edited
<button ng-click='currentitem = item'>Edit</button>
Now you can have an form filled in like
<input type='text' ng-model='currentitem.value' />
I am currently trying to run a few bits of JS within my webView to simply fill out a few text fields on a 3rd party site. This has so far been successful on other sites but I seem to be getting issues with a specific url.
let loadFirstNameJS = "var inputFields = document.getElementById('Field1'); inputFields.value = '\(firstName)';"
self.webView.stringByEvaluatingJavaScriptFromString(loadFirstNameJS)
Executing the JS to input a string value (firstName) has previously been simple. However I can't seem to access the element 'Field1' as it looks as though it doesn't exist? (returning a null value) even though I am able to view and edit within a browser.
It was my understanding that a UIWebView doesn't excuse any JS until the page has fully loaded so assume it can't be a problem of trying to access the element before it is created.
Here is the html of the specific Field1 I am trying to edit.
<li id="fo134li1" class="notranslate leftHalf ">
<label class="desc" id="title1" for="Field1">
First Name
<span id="req_1" class="req">*</span>
</label>
<div>
<input id="Field1" name="Field1" type="text" class="field text medium" value="" maxlength="255" tabindex="2" onkeyup="handleInput(this); " onchange="handleInput(this);" required="">
</div>
</li>
This is one of the last things that I need to work out before my project is completed, so any assistance as to why this isn't working would be greatly appreciated!
Thanks!
You should really track the page loading and not run the javascript until you see the page finish loading. You are probably executing it too quickly.
You can detect the start of a load by implementing
- (void)webViewDidStartLoad:(UIWebView *)webView
and detect the end by implementing
- (void)webViewDidFinishLoad:(UIWebView *)webView
or detect errors by implementing
- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
You need to keep track of how many loads start and finish since some pages can load other pages. When all pages have finished, run your javascript.
I am trying to change input value in particular web site from chrome extension. In order to do that I am using jQuery in my content script. It works in most of the cases, but I didn't manage to change value of the input when it is part of AngularJS view. I found the same problem when I use let say kendoUI. I am trying to set the value calling $('element').val('value') and then try to call blur and change event, but without any success.
I went through may be 99% of the posts related to this topic, but still can't find working solution.
You just need to Call $scope.apply() in order to let angular know about updating the bindings. This is mainly because by default, angular doesn't know anything about the changes you are making in jQuery.
Below is a sample code, and here is a jsFiddle. Hope this helps.
app.controller('testCtrl', ['$scope', function ($scope) {
$scope.changeValue = function() {
$('#test').val("new Value");
$scope.apply();
}
<div class="form-inline">
<input type="text" id="test" value="test">
<input type="submit" value="submit" ng-click="changeValue()">
</div>
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.