Combo box link is not working after clicking - combobox

<form name="mycombowopt">
<select name="example" size=1>
<option value="http://javascriptkit.com">JavaScript Kit</option>
<option value="http://cnn.com">CNN</option>
<option value="http://geocities.com">Geocities</option>
</select>
<input type="button" value="Go!" onClick="gothere()"> <br>
<input type="checkbox" name="windowoption" value="ON">Open in alternate window</p>
</form>
<script language="javascript">
<!--
function gothere(){
var thebox=document.mycombowopt
if (thebox.windowoption.checked){
if (!window.newwindow)
newwindow=window.open("")
newwindow.location=
thebox.example.options[thebox.example.selectedIndex].value
}
else
location=
thebox.example.options[thebox.example.selectedIndex].value
}
//-->
</script>
Whats wrong with this code? The combo box is not working after linking "Go" on my [question answers website][1].
[1]: http://www.ihavesolved.com/
Can you provide the code for combo box with the following:-
Background = white color
Title:- Partner Sites
Links inside dropdownbox = I Have Solved (url=www.iнaveѕolved.coм), Space Amigos
(spaceamigos.com) and Surak.szh.kz (url=Surak.szh.kz)
Links must open in new windows and the links must be nofollow.
Thanks in Advance :)

You could use
window.open
instead of
location
This javascript code is working for me.
function gothere(){
var thebox=document.mycombowopt
if (thebox.windowoption.checked){
if (!window.newwindow)
//newwindow=window.open("")
//newwindow.location=thebox.example.options[thebox.example.selectedIndex].value
window.open(
thebox.example.options[thebox.example.selectedIndex].value,
'_blank' // <- This is what makes it open in a new window.
);
}
else{
//location=thebox.example.options[thebox.example.selectedIndex].value
window.open(
thebox.example.options[thebox.example.selectedIndex].value,
'_blank' // <- This is what makes it open in a new window.
);
}
}

Related

ng-options not binding inside modal dialog

I have a modal dialog (ui bootstrap dialog) that displays some form fields for selection. when i select and click save, the binding are ok, i can see this from my browser dev tool bar. but when i open the modal again to edit the changes, the binding on the dropdown are lost, they all reset to the first option in the select list, if i look at my model from dev tools the correct values are there but not reflecting on the dialog display.
I have a directive 'display-paramaters' that handles the parameters display
(function(){
function displayParameters(){
return{
scope:true,
restrict:'E',
templateUrl:'app/templates/displayParameters.html',
controller:function($scope,globalContainer){
$scope.globals=globalContainer.variables;
}
}
}
angular.module("App").directive("displayParameters",displayParameters);
})();
The template is
<div>
<div class="col-md-4">
<label class="control-label">{{mapping.CommandMappings[0].Field}}</label>
</div>
<div class="col-md-3">
<select class="form-control hack" ng-model="mapping.CommandMappings[0].SourceType">
<option value="1">Event</option>
<option value="2">Variable</option>
</select>
</div>
<div class="col-md-5">
<select ng-options="field for field in foundFields.entityOptions" class="form-control" ng-if="mapping.CommandMappings[0].SourceType==1" ng-model="mapping.CommandMappings[0].ValueSource">
</select>
<select class="form-control" ng-if="mapping.CommandMappings[0].SourceType==2" ng-model="mapping.CommandMappings[0].ValueSource"
ng-options="variable.value as variable['name'] for variable in globals">
</select>
</div>
I used it as so
<tabset>
<tab heading="Command Mapping">
<div style="margin-top:5px">
<div class="form-group" ng-repeat="mapping in commandMappings">
<display-parameters></display-parameters>
</div>
</div>
</tab>
<tab heading="Variable Mapping">
</tab>
</tabset>
Attached are also images of the dialog before initial select and save and later opening to edit selected options. Also images of the data structure i am binding to.
First Time Dialog opens, i make selections and later clicks save
Opens the dialog again but the bindings are gone, all reset to index 0
Inspects the object from console and find the binding is intact
I do not know why i loose the binding on the view when the dialog opens the second time, but it is correct on the model
data is saved into mapping.CommandMappings[0].ValueSource ,then you close modal dialog which has a controller,
when you again try to open it , modal dialog related controller get initialize
& also ( mapping.CommandMappings[0].ValueSource ={} ) get initialized .

Reset select to default value with AngularJS

I have a following question for AngularJS. I have a
select with options created with ngOptions. I want to
set selected option back to default option. I tried to
delete model variable e.g:
if(angular.isDefined($scope.first)){
delete $scope.first;
}
But this not working. Here is my html.
<div ng-app="app">
<div ng-controller="testCtrl">
<select data-ng-model="first" data-ng-options="item.name for item in selectContent" required="required">
<option value="" style="display: none;">-- select --</option>
</select>
{{first.value}}
<hr/>
<input type="button" value="reset dropdown" data-ng-click="resetDropDown()"/>
</div>
</div>
And here is my JavaScript code:
angular.module('app', []).controller('testCtrl', function ($scope) {
$scope.selectContent = [
{
name: "first",
value: "1"
},
{
name: "second",
value: "2"
}
];
$scope.resetDropDown = function() {
if(angular.isDefined($scope.first)){
delete $scope.first;
}
}
});
Here is working jsfiddle:
http://jsfiddle.net/zono/rzJ2w/
How I can solve this problem?
Best regards.
Your reset-button is placed outside of the div containing your controller. This means that your reset-function does not exist in the context where you try to use it.
Change to:
<div ng-app="app">
<div ng-controller="testCtrl">
<select data-ng-model="first" data-ng-options="item.name for item in selectContent" required="required">
<option value="" style="display: none;">-- select --</option>
</select>
{{first.value}}
<hr/>
<input type="button" value="reset dropdown" data-ng-click="resetDropDown()"/>
</div>
</div>
It's always a good idea to use a debugger to make sure the code you're trying to fix is actually being executed.
$scope.resetDropDown = function() {
$scope.first = "";
}
Solution above works for Windows and Android, but did not work for iOS browsers. Probably events are happening in different order there.
So for my code I:
created ID for select element, so I could easily find it by
iQuery;
created delayed invocation of to statements to ensure the
reset is happenning at the very end;
and just in case was
resetting in two ways (but just first way was actually enough in iOS
too);
function resetDropDown () {
$timeout(function(){
$scope.first = '';
// jQuery way
$('select#idOfSelectElement option:first' ).prop( 'selected', true );
}, 200);
}

AngularJS - dynamic naming using $index in expression

I have a directive in which i create many ng-form's and i name each form based on the $index (from the ng-repeat). My problem is that i want to show an error container (that contains the error message) when the form is invalid but i cant find how to properly reference the form.
Here is my code:
<ng-form name="innerForm{{$index}}">
<label ... ><input name="input" ... />
<div class="error-container" ng-show="'innerForm'+$index.input.$invalid">
// show the error message
</div>
</ng-form>
I want 'innerForm'+$index.input.$invalid to be evaluated as innerForm5.input.$invalid for example.
I have made many attempts but i can't get it to work. What is the correct way to reference my dynamically named form?
please see here : http://jsbin.com/jocane/4/edit
<div ng-controller="firstCtrl">
<div ng-repeat="object in allMyObjects">
<ng-form name="innerForm{{$index}}">
<input type="text" ng-model="object.name" required name="userName">
<div ng-show="{{'innerForm'+$index}}.userName.$invalid">
error
</div>
</form>
</div>
First thing is that, ng-form creates an isolated scope. So if you give a ng-form static name, it will be ok. No need to append $index or anything.
ng-show="innerForm.input.$invalid"
Code snippet to find form controller using element
var elmParent = $(domEle).parents('form, ng-form, [ng-form]');
var formCtrl = null;
var elemCtrl = null;
if (elmParent.length) {
var elm = angular.element(domEle);
formCtrl = elm.scope().$parent[elmParent.attr('name') || elmParent.attr('ng-form')];
}
Hope this will help

Show ? in textbox when textbox have ng-pattern for numeric validation

I need to show '?' when the value not able to read from scanner which returns me value by including '?'
Let say document has sr no as '123' but let say for some reason scanner not able to read it then it returns me as "12?" or "???" or "?23" or "1?3"
If any digit which is not readable that need to corrected by user manually for that i need to show them in to the textbox.
In our application we are using angularjs validations, which are not allowing me to show above values inside textbox as it contains '?' which is not numeric value.
Also I should enforce the numeric validation so that user can correct the above and submit to the server.
So how we achieve this functionality ?
<div ng-app ng-controller="formCtrl">
<form name="myForm" ng-submit="onSubmit()">
<input type="text" ng-model="price" name="price_field" ng-pattern="/^[0-9]{1,7}$/" required>
<span ng-show="myForm.price_field.$error.pattern">Not a valid number!</span>
<input ng-show="toggle" type="submit" value="submit"/>
<input ng-show="!toggle" type="button" ng-click="AfterProcessing()" value="After Processing"/>
<input type="button" value="Reset" ng-click="reset()"/>
<br/>
<span>Activity : {{message}}</span>
</form>
</div>
JS code
function formCtrl($scope){
$scope.price= "123";
$scope.toggle = false;
$scope.message="No Activity";
$scope.onSubmit = function(){
$scope.toggle=false;
$scope.message="onSubmit clicked...";
}
$scope.AfterProcessing = function(){
$scope.toggle=true;
$scope.price ="1?3";
$scope.message="AfterProcessing clicked...";
}
$scope.reset=function()
{
$scope.toggle=false;
$scope.price ="123";
$scope.message="Reset clicked...";
}
}
I have created sample as below.
Plz check on JsFiddle sample
-Thanks
You need to create a CSS Class that will be applied to text box. Using :before and :after pseudo css construct, you can add ? character and get desired result.
So,
1. Define a CSS Class with :before and/or :after as per your requirement
2. On the HTML, use ng-class="{'your-class': $error, 'regular-class': '$pristine'}"
Let me know if you need a code sample and a plunker. (I am at the end of the day. May be will provide some code tomorrow. )
If you can create a plnkr based on above and submit link here, more people would be able to help you. thanks.

Validating repeating inputs inside an AngularJS form

I know this has been asked before, and have even found a well-upvoted answer here:
How to validate inputs dynamically created using ng-repeat, ng-show (angular)
But I can't get that solution to work. I've got an example here - annoyingly both jsFiddle and Plunkr seem to be down right now.
Here's the JS:
app.controller('DetailsCtrl', ['$scope', function($scope) {
$scope.loading = false;
$scope.formData = {
lines: [{
text: 'test.com'}]
};
$scope.addRow = function() {
$scope.formData.lines.push({text:null});
};
}]);
Here's the markup:
<body ng-controller="DetailsCtrl">
<div>
<form name="mainForm" novalidate class="form-vertical">
...some non-repeating inputs go in here...
<div data-ng-repeat="line in formData.lines" data-ng-form="lineForm">
<input type="text" name="myinput" data-ng-model="line.text" data-ng-required="true">
<span data-ng-show="mainForm.lineForm.myinput.$error.required">Error!</span>
</div>
New Line
</form>
</div>
</body>
You'll notice initially there is one text input with text in - great. Click the 'New Line' link. Because the new text input fails validation - BOTH text inputs get the warning span shown... I just want the one span relating to the one empty text input to show up.
As AngularJS relays on input names to expose validation errors, and you used the same name for all inputs, you faced with this effect.
So you can't generate input name dynamically, but instead you can use ng-form (see https://docs.angularjs.org/api/ng/directive/ngForm).
<form name="mainForm" novalidate class="form-vertical">...some non-repeating inputs go in here...
<div data-ng-repeat="line in formData.lines" data-ng-form="lineForm">
<input type="text" name="myinput" data-ng-model="line.text" data-ng-required="true">
<span data-ng-show="lineForm.myinput.$error.required">Error!</span>
</div> New Line
</form>
EDIT. Please note, access to error myinput.$error.required instead of lineForm.myinput.$error.required.
Please, checkout working fiddle http://jsfiddle.net/Y9g4q/7/.

Resources