Pls. I want to implement geolocation in meteor with react. I do not completely understand how to do that. Meanwhile I have tried the code below, but without any result:
render() {
if (Geolocation.latLng() == null) {
return(
<span>Determining locataion...</span>
)
} else {
return Geolocation.latLng();
}
return(
<div className="panel panel-default">
<div className="panel-content">
<div className="panel-heading">
Update Message
</div>
<form className="form center-block">
<input type="hidden" ref="imageid" />
<div className="panel-body">
<textarea id="sharing" placeholder="Share what?" ref="sharing" className=" form-control input-lg">
</textarea>
<h3>I am here!</h3>
<div>
<span type="text"> {this.latLng.lat} </span>
</div>
</div> ....
I was not receiving any error message. Thus, I do not know how else to use geolocation inside react. Pls. I'm counting on your quickest help.
Related
I have a button that is taking text entry in an input box and appending to a URL and redirecting.
The entire system is working, however the problem I am facing is when I enter the text and click the button nothing happens. Every time I add text, the button does nothing.
When I dont enter any information, the button takes me to the url that should have the input appended to (wihtout the appended information)
<div class="pen-title">
<div class="container">
<div class="card"></div>
<div class="card">
<form>
<div class="input-container">
<input type="#{type}" id="txt" required="required"/>
<label for="#{label}">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button id="btn"><span>Go</span></button>
</div>
</form>
</div>
</div>
</div>
the JS:
<script>
var nickname = document.getElementById("txt");
function redirect () {
window.location.href = "https://theurl.com/details?info=" + nickname.value;
};
document.getElementById("btn").addEventListener('click', redirect);
</script>
If I use the JS with the following button settings:
(THE FOLLOWING CODE WORKS AND IS ONLY A DEMO TO SHOW THAT THE FUNCTION IS ACTUALLY WORKING FULLY)
The code with the bug is the code above this line.
<div class ="input"> <input type="text" id="txt" />
<label for="txt"> Enter Reg </label> </div>
<div class="buttons">
<button class="pulse" id="btn">Pulse</button>
</div>
<script>
var nickname = document.getElementById("txt");
function redirect () {
window.location.href = "https://carservicesinreading.co.uk/check-mot-history/details?car-reg=" + nickname.value;
};
document.getElementById("btn").addEventListener('click', redirect);
</script>
it works first time. However the template of this set up was different css for the input box and different CSS for the button and I just cannot get it in the layout I would like.
Thank you for any help!
the only thing i can see as you haven't provided much info. on the button i added type submit.see if i helps as i can see it redirects and says cannot find mot details.do you have real reg no for testing?
update:removed form tags.
var nickname = document.getElementById("txt");
function redirect() {
window.location.href = "https://theurl.com/details?info=" + nickname.value;
};
document.getElementById("btn").addEventListener('click', redirect);
<div class="pen-title">
<div class="container">
<div class="card"></div>
<div class="card">
<div class="input-container">
<input type="#{type}" id="txt" required="required" />
<label for="#{label}">Password</label>
<div class="bar"></div>
</div>
<div class="button-container">
<button id="btn"><span>Go</span></button>
</div>
</div>
</div>
</div>
This is my demo.
When we hover #image-bg, I want #bg-box-hidden will be display: block.
But I'm losing my way to figure out how to solve the problem
<div class="grid pb1rem">
<div *ngIf="avatar !== null" class="image-content">
<img
class="image-bg"
[src]="avatar"
(click)="selectImage.click()"
hover-class="test"
(mouseover)="onImgMouseover($event)"
(mouseout)="onImgMouseout($event)"
/>
<div #show class="bg-box-hidden" hover-class="show">
<button class="btn only-icon">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
</div>
</div>
</div>
The main problem of your code are
Wrong event name.
The element doesn't rendered so you can't targeted the element.
Here is simple solution for you, It might be other way to implement as well.
Try this one, put on your .ts file of the component.
onImgMouseover($event): void {
const box = document.getElementsByClassName('bg-box-hidden')[0];
box.style.display = 'block';
}
onImgMouseout($event): void {
const box = document.getElementsByClassName('bg-box-hidden')[0];
box.style.display = 'none';
}
and need modify some on HTML something like
<div
class="grid pb1rem"
(mouseenter)="onImgMouseover($event)"
(mouseleave)="onImgMouseout($event)"
>
<div *ngIf="avatar === null" class="image_wrapper">
<input
type="file"
accept=".png,.jpg"
(change)="updateImage($event)"
class="file-input"
#selectImage
/>
</div>
<div *ngIf="avatar !== null" class="image-content">
<img
class="image-bg"
[src]="avatar"
(click)="selectImage.click()"
hover-class="test"
/>
</div>
<div #show class="bg-box-hidden" hover-class="show">
<button class="btn only-icon">
<i nz-icon nzType="delete" nzTheme="outline"></i>
</button>
<div class="box-button-up">
<input
type="file"
accept=".png,.jpg"
(change)="updateImage($event)"
class="file-input"
#selectImage
/>
</div>
</div>
</div>
I am making a searchfield which triggers a request function returning partial view and according to result I want to show the response in partial view under the searchfield in the same page. User writes something to textfield and clicks the search button then under them result shows. I get the result but my partialview is opening in another page instead of under the searchfield in the same page. Also looks like my onClick function does not trigger.
My main View:
<div class="container">
<!-- Outer Row -->
<div class="row justify-content-center">
<div class="col-6 p-3">
<form class="form-group" method="post" action="/Books/BookDetail">
<div class="input-group">
<input type="text" name="barcodes" class="form-control bg-light border-0 small bg-gray-200" placeholder="Kitap Barkodunu giriniz..." aria-label="Search" aria-describedby="basic-addon2">
<button class="btn btn-primary" type="submit" id="myBtn" name="myBtn" onclick="showBook">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</form>
</div>
<br />
<div id="partialContent">
</div>
</div>
</div>
<script>
function showBook() {
$('#partialContent').load("/Controllers/BooksController/BookDetail");
}
</script>
Book Detail Controller:
public IActionResult BookDetail(string barcodes)
{
var request = $"?barcodes={barcodes}";
var products = _httpTool.HttpGetAsync<List<Products>>($"{AppSettings.ApiUrl}/GetProducts{request}");
if(products.Result.Count != 0)
{
ViewBag.result = "Success";
var product = products.Result[0];
return PartialView("_BookDetailPartial", product);
}
else
{
ViewBag.result = "Failed";
return View("AddBook");
}
}
_BookDetailPartial:
<div>
<h4>PartialCame</h4>
<br />
<h5>#Model.Author</h5>
</div>
What is the problem here?
Thanks in advance!
onclick="showBook"
should be
onclick="showBook()"
And this path appears to be wrong: "/Controllers/BooksController/BookDetail" it should most likely be "/Books/BookDetail?barcodes=barcode"
I'm not sure what you mean about the partial view loading in another page. Could you give some more detail please?
I'm trying to use ng-blur. Below is my HTML code:
<div ng-if="CurrentStage==='SaveQuery'">
<div class="col-sm-12">
<div class="form-group row">
<label class="col-sm-3 control-label text-right">Query Name</label>
<div class="col-sm-9">
<input type="text" ng-blur="performValidationQueryName()" ng-model="QueryName" ng-class="QueryNameError?'form-control validation_error':'form-control'" placeholder="Query Name" />
<span ng-if="QueryNameErrorMsg!=''" class="errorMsg">{{QueryNameErrorMsg}}</span>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
JavaScript code for blur event call is:
$scope.performValidationQueryName = function () {
if($scope.QueryName != null && $scope.QueryName != '') {}
};
The issue I'm facing is:
When ng-if="CurrentStage==='SaveQuery'" is there inside div, my ng-model="QueryName" is not getting updated. And with blur of the text, I get $scope.QueryName = "" with performValidationQueryName function.
If, I remove ng-if="CurrentStage==='SaveQuery'", all things works perfectly and I get the value inside the $scope.QueryName.
How can I call ng-blur which is placed inside the div with an ng-if condition?
You should use object in your input model will solve your problem because it comes under ng-if as shown below,
Template:
<div ng-if="CurrentStage==='SaveQuery'">
<div class="col-sm-12">
<div class="form-group row">
<label class="col-sm-3 control-label text-right">Query Name</label>
<div class="col-sm-9">
<input type="text" ng-blur="performValidationQueryName(Query.Name)" ng-model="Query.Name" ng-class="QueryNameError?'form-control validation_error':'form-control'" placeholder="Query Name" />
<span ng-if="QueryNameErrorMsg!=''" class="errorMsg">{{QueryNameErrorMsg}}</span>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
Controller:
$scope.performValidationQueryName = function (queryName) {
if (queryName != null && queryName != ''){
//do something..
}
};
I'm currently trying to apply a background-color to the p elements within the 1st div by checking a checkbox that's located within the 2nd div. I'm calling a directive when the input box is clicked, "text-theme-switch", to manipulate the p elements in the first div
<!--HTML-->
<div id="#div1" class="text-main-window">
<div class="text-view-div">
<div ng-repeat="item in text.obj">
<h3 id="{{item.id}}-title">{{item.title}}</h3>
<br/>
<div ng-repeat="art in item.article">
<h4 id="{{art.id}}-art">{{art.artNum}}</h4>
<br/>
<div ng-repeat="subArt in art.subArt " >
<h5 id="{{subArt.id}}-subart" >{{subArt.subArtNum}}</h5>
<div ng-repeat="para in subArt.paragraph" >
<p class="theme-para {{para.ruleTheme}} text-item">{{para.text}}</p>
</div>
<a ui-sref="rulebook.rules.detail({detail:rules.ruleNumber})"
class="rule-style"
ng-repeat="rules in subArt.rule">
{{rules.ruleNumber}} {{rules.ruleName}}<br/>
</a>
<br/>
</div>
</div>
</div>
</div>
</div>
<div class="theme-filter-text-theme">
<h4>Text Themes</h4>
<div class="onoffswitch pull-right">
<input text-theme-switch
ng-model="text.themeView"
val="text.themeView"
ng-change="text.test()"
type="checkbox"
name="onoffswitch"
class="onoffswitch-checkbox"
id="myonoffswitch"
ng-click="showLegend = !showLegend">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="styles-hr"></div>
<div ng-show="showLegend" class="theme-filter-item" ng-repeat="item in text.themes">
<span class="theme-check-tag"
ng-class="{
checkgreen: item.theme === 'enforcement', checkpink: item.theme === 'customer due diligence',
checkorange: item.theme === 'record keeping',
checkblue: item.theme === 'reporting'
}" >
{{item.theme}}
</span>
</div>
</div>
This is the directive that is manipulating the DOM elements in the first div.
//DIRECTIVE
(function(){
'use strict';
angular.module('ganeshaApp')
.directive('textThemeSwitch', function(){
return{
restrict: 'A',
transclude: true,
scope: {textTheme: "="},
link: function(scope, element, attrs){
element.on('click', function(){
$('.text-main-window h3').toggleClass('grey-on');
$('.text-main-window h4').toggleClass('grey-on');
$('.text-main-window h5').toggleClass('grey-on');
$('.rule-style').toggleClass('grey-on');
$('.text-main-window p:not(.rk-class, .enforcement-class, .cdd-class, .reporting-class)').toggleClass('grey-on')
$('.rk-class').toggleClass('rk-class-active');
$('.cdd-class').toggleClass('cdd-class-active');
$('.enforcement-class').toggleClass('enforcement-class-active');
$('.reporting-class').toggleClass('reporting-class-active');
})
}
};
});
})();
And here's the CSS
/*CSS*/
.cdd-class-active{
background-color: $themePink;
#include borderRadius;
}
.reporting-class-active{
background-color: $themeBlue;
#include borderRadius;
}
.rk-class-active{
background-color: $themeOrange;
#include borderRadius;
}
.enforcement-class-active{
background-color: $themeGreen;
#include borderRadius;
}
.highlight-on{
background-color: $veryPaleYellow
}
.grey-on{
opacity: .5;
background-color: white;
}
While the above code is working, I feel like I'm using a whole lot of bad practices here. From what I've read, DOM manipulation should be done from directives. I've also read that in Angular scope should be used rather than selectors, but I can't figure out how a directive should be used with a click event to manipulate the DOM of other elements rather than the one clicked. Should this type of work be delegated to the controller and should the directive be called from somewhere else, or can anyone recommend a cleaner way to do this, using scope rather the selectors?
So I figured out where I was going wrong here. I was putting the directive on the checkbox input and trying to work off the click event. Because of this, I had to search through and find all the elements that needed to be manipulated. What I should have been doing was putting the directives on the elements that needed to be manipulated as seen below.
<div id="#div1" class="text-main-window">
<div class="text-view-div">
<div ng-repeat="item in text.obj">
<h3 class="grey" text-theme-grey="text.themeView" id="{{item.id}}-title">{{item.title}}</h3>
<br/>
<div ng-repeat="art in item.article">
<h4 class="grey" text-theme-grey="text.themeView" id="{{art.id}}-art">{{art.artNum}}</h4>
<br/>
<div ng-repeat="subArt in art.subArt " >
<h5 class="grey" text-theme-grey="text.themeView" id="{{subArt.id}}-subart">
{{subArt.subArtNum}}
</h5>
<div ng-repeat="para in subArt.paragraph" >
<p text-theme-color='text.themeView' class="theme-para {{para.ruleTheme}} text-item">{{para.text}}</p>
</div>
<a ui-sref="rulebook.rules.detail({detail:rules.ruleNumber})"
class="rule-style grey"
text-theme-grey="text.themeView"
ng-repeat="rules in subArt.rule">
{{rules.ruleNumber}} {{rules.ruleName}}<br/>
</a>
<br/>
</div>
</div>
</div>
</div>
<div class="theme-filter-text-theme">
<h4>Text Themes</h4>
<div class="onoffswitch pull-right">
<input ng-model="text.themeView"
type="checkbox"
name="onoffswitch"
class="onoffswitch-checkbox"
id="myonoffswitch"
ng-click="showLegend = !showLegend">
<label class="onoffswitch-label" for="myonoffswitch">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
<div class="styles-hr"></div>
<div ng-show="showLegend" class="theme-filter-item" ng-repeat="item in text.themes">
<span class="theme-check-tag"
ng-class="{
checkgreen: item.theme === 'enforcement', checkpink: item.theme === 'customer due diligence',
checkorange: item.theme === 'record keeping',
checkblue: item.theme === 'reporting'
}" >
{{item.theme}}
</span>
</div>
</div>
Now the directives watch the value of the model on the switch for for changes and the classes are added or removed for each element accordingly.
(function(){
'use strict';
angular.module('ganeshaApp')
.directive('textThemeGrey', function(){
return{
restrict: 'A',
link: function(scope, element, attrs){
scope.$watch(attrs.textThemeGrey, function(newVal){
if(newVal){
element.addClass('on')
}else{
element.removeClass('on')
}
})
}
}
})
})();
A much cleaner solution, I think. Hope this helps someone.