I have been working on this piece of code to get geolocation on a timer of 10 seconds, result will be displayed in text area. The problem is how do I append new result in without replacing the old ones, and perhaps auto expand textarea if necessary.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML that display geolocation</title>
</head>
<body>
<textarea rows="50" cols="100" id="demo"></textarea>
<script>
var x = document.getElementById("demo");
var timer = setInterval(function () { getLocation() }, 10000);
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(success, error)
}
else
{
x.innerHTML = "Geoloaction is not supported."
}
}
function success(pos)
{
var y = pos.coords;
var z = new Date().toLocaleTimeString();
x.innerHTML = z + " Latitude: " + y.latitude + " Longitude" + y.longitude;
}
function error(err)
{
switch (error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
jsfiddle DEMO
You use value for a textarea not innerHTML. Then you can use += to append text to it.
var mTextArea = document.getElementById("demo");
mTextArea.value = "Some text.";
mTextArea.value += " Some other text.";
Now if you get the value of the textarea it will be
console.log(mTextArea.value);
Some text. Some other text.
EDIT:
To make textarea to expand automatically you need to set its height to its scrollHeight.
function resizeTextArea(elm) {
elm.style.height = elm.scrollHeight + 'px';
}
So if the text is being added to the textarea programmatically then just call the function afterwards like resizeTextArea(mTextArea);
If you want it to resize as you type then:
var mTextArea = document.getElementById('demo');
mTextArea.addEventListener('keyup', function() {
this.style.height = this.scrollHeight + 'px';
});
EDIT 2:
To start a new line you use "\n".
"This is the first line.\nThis is the second line."
Use += instead of = to append content to the textarea where you set x.innerHTML:
function success(pos){
var y = pos.coords;
var z = new Date().toLocaleTimeString();
x.innerHTML += z + " Latitude: " + y.latitude + " Longitude" + y.longitude;
}
I can see that you are not using jQuery in there so .append is not an option for you.
For your solution, you can just follow these steps:
Get the content of the textarea and put it in a variable.
Concatenate what you are trying to append to that variable (txt_area_content+new_to_append)
Clear the contents of that textarea and then put what you have concatenated.
Related
I have a map with a single pin on it. as follows:
var map = new Map()
{
IsShowingUser = true,
HeightRequest = 100,
WidthRequest = 960,
VerticalOptions = LayoutOptions.FillAndExpand
};
and the pin location and label as follows:
var pin1 = new Pin();
pin1.Type = PinType.Place;
pin1.Position = position;
pin1.Label = "Ticket Number: " + Cache.Instance.Ticket.TicketNumber;
clicked event:
pin1.Clicked += delegate
{
uri = new Uri("http://maps.google.com/maps?daddr=" + position.Latitude + "," + position.Longitude);
Device.OpenUri(uri);
}
map loading:
var stack = new StackLayout { Spacing = 00 };
stack.Children.Add(map);
Content = stack;
when clicking on the pin marker, it opens an info window and clicking on the window and clicked event code triggers. It there any way to not show the info window and the event triggers as soon as I click on the marker?
Thanks
Use Map_PinClicked to handle the PinClick event, If you set e.Handled = true, then Pin selection doesn't work automatically. All pin selection operations are delegated to you.
In the Page:
map.PinClicked += Map_PinClicked;
// Selected Pin changed
map.SelectedPinChanged += SelectedPin_Changed;
map.InfoWindowClicked += InfoWindow_Clicked;
map.InfoWindowLongClicked += InfoWindow_LongClicked;
And then clickEvent:
void Map_PinClicked(object sender, PinClickedEventArgs e)
{
e.Handled = true;
uri = new Uri("http://maps.google.com/maps?daddr=" + position.Latitude + "," + position.Longitude);
Device.OpenUri(uri);
}
You can have a look at here for more information.
Currently with Xamarin.Forms 5, PinClicked event is designated as obsolete. Same goes for Device.OpenUri.
One can use pin1.MarkerClicked += Pin_Clicked; instead.
You can prevent the Info window from opening by setting the EventArgs's HideInfoWindow property to true.
docs.microsoft
private async void Pin_Clicked(object sender, PinClickedEventArgs e)
{
try
{
e.HideInfoWindow = true;
var pin = sender as Pin;
var uri = new Uri("http://maps.google.com/maps?daddr=" + pin.Position.Latitude + "," + pin.Position.Longitude);
Launcher.OpenAsync(uri);
}
catch (Exception ex)
{
//log error
}
}
I used dynamics CRM 2015 and i want to change the OptionSet type to checkboxs.
Just like this:
enter image description here
My solution is use JQuery get the td tag in crm form,and use html() change the td html code.
Like this $("#ubg_note_d").html().But question comes that i can't get the td tag which i want to display the checkbox.Only after i used the browser DEVELOPER TOOLS and select the element,then i can get the tag......i have blocked by this for 1 day,any helps?;)
note:i tried the js and jquery,both can't get the td tag.My code is run in the form Onload event,and i tried the filed Onchange event,trouble still there...
Thing you are trying to achieve is unsupported. Instead you can achieve the same using supported way by creating html web resource, which can be added on form on later.
Code for web resource is as below.
<html><head>
<title></title>
<script type="text/javascript" src="new_jquery_1.10.2.js"></script>
<script type="text/javascript">
// function will be called when web resource is loaded on Form.
$(document).ready(function () {
ConvertDropDownToCheckBoxList();
});
//Coverts option list to checkbox list.
function ConvertDropDownToCheckBoxList() {
var dropdownOptions = parent.Xrm.Page.getAttribute("new_makeyear").getOptions();
var selectedValue = parent.Xrm.Page.getAttribute("new_selectedyears").getValue();
$(dropdownOptions).each(function (i, e) {
var rText = $(this)[0].text;
var rvalue = $(this)[0].value;
var isChecked = false;
if (rText != '') {
if (selectedValue != null && selectedValue.indexOf(rvalue) != -1)
isChecked = true;
var checkbox = "< input type='checkbox' name='r' / >" + rText + ""
$(checkbox)
.attr("value", rvalue)
.attr("checked", isChecked)
.attr("id", "id" + rvalue)
.click(function () {
//To Set Picklist Select Values
var selectedOption = parent.Xrm.Page.getAttribute("new_selectedyears").getValue();
if (this.checked) {
if (selectedOption == null)
selectedOption = rvalue;
else
selectedOption = selectedOption + "," + rvalue
}
else {
var tempSelected = rvalue + ",";
if (selectedOption.indexOf(tempSelected) != -1)
selectedOption = selectedOption.replace(tempSelected, "");
else
selectedOption = selectedOption.replace(rvalue, "");
}
parent.Xrm.Page.getAttribute("new_selectedyears").setValue(selectedOption);
//To Set Picklist Select Text
var selectedYear = parent.Xrm.Page.getAttribute("new_selectedyeartext").getValue();
if (this.checked) {
if (selectedYear == null)
selectedYear = rText;
else
selectedYear = selectedYear + "," + rText
}
else {
var tempSelectedtext = rText + ",";
if (selectedYear.indexOf(tempSelectedtext) != -1)
selectedYear = selectedYear.replace(tempSelectedtext, "");
else
selectedYear = selectedYear.replace(rText, "");
}
parent.Xrm.Page.getAttribute("new_selectedyeartext").setValue(selectedYear);
})
.appendTo(checkboxList);
}
});
}
</script>
<meta charset="utf-8">
</head><body>
<div id="checkboxList">
</div>
</body></html>
Refer below given link for
enter link description here
No code needed for that. It's just configuration on CRM to change the display format : checkbox.
How to find the current location based on the phone mac address or gps or tower locaiton by using the google map.
Please let me know if have any html code sample
Use watch my location API and it will help to get the current location every sec. You just store one place(server) and get from the longitude in another location.
var id, target, options;
function success(pos) {
var crd = pos.coords;
if (target.latitude === crd.latitude && target.longitude === crd.longitude) {
console.log('Congratulations, you reached the target');
navigator.geolocation.clearWatch(id);
}
};
function error(err) {
console.warn('ERROR(' + err.code + '): ' + err.message);
};
target = {
latitude : 0,
longitude: 0,
}
options = {
enableHighAccuracy: false,
timeout: 5000,
maximumAge: 0
};
id = navigator.geolocation.watchPosition(success, error, options);
You can use Geolocation API supported by HTML5
The HTML Geolocation API is used to get the geographical position of a
user. Since this can compromise user privacy, the position is not
available unless the user approves it.
Try the following code:
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position.</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
I am trying to block all extension except doc, docx and pdf by my code it's like accept for only google chrome
this is my code:
<input type="file" id="filedocxpdf" name="filedocxpdf" class="txtNotice" accept="application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"/>
This might help u!
Javascript Solution
var myfile="";
$('#button_id').click(function( e ) {
e.preventDefault();
$('#filedocxpdf').trigger('click');
});
$('#filedocxpdf').on( 'change', function() {
myfile= $( this ).val();
var ext = myfile.split('.').pop();
if(ext=="pdf" || ext=="docx" || ext=="doc"){
alert(ext); return true;
} else{
alert(ext); return false;
}
});
Alternate Solution 2
<script type="text/javascript" language="javascript">
function checkfile(sender) {
var validExts = new Array(".docx", ".doc", ".pdf");
var fileExt = sender.value;
fileExt = fileExt.substring(fileExt.lastIndexOf('.'));
if (validExts.indexOf(fileExt) < 0) {
alert("Invalid file selected, valid files are of " +
validExts.toString() + " types.");
return false;
}
else return true;
}
</script>
<input type="file" id="filedocxpdf" onchange="checkfile(this);" />
Other browsers ignore such an accept attribute, though e.g.
Firefox for example, supports some simple cases like accept="image/gif".
You need to create a Javascript solution to check the file extension :
var file = document.getElementById('someId');
file.onchange = function(e){
var ext = this.value.match(/\.([^\.]+)$/)[1];
switch(ext)
{
case 'jpg':
case 'bmp':
case 'png':
case 'tif':
alert('allowed');
break;
default:
alert('not allowed');
this.value='';
}
};
example Here
I am using jQuery as:
$(document).ready(function(){
test("price");
alert("hi");
$("#item2").change(function()
{
sort= $("#item2").val();
test(sort);
});
});
Function test() is some JavaScript function, my problem is when page loads function calls by "price" parameter. Now when I select some item from select box function test() is called using sort parameter (verify by alert box). but I am not getting the correct result. I mean when I select option from select box than also my result of test() is as with "price" , I suppose it might be the problem because of jQuery's $(document).ready(function(){,. test() function make some html code based on the parameter and show it on the web page.
Please suggest me what can be the solution
EDIT:
function test() is :
function test(sort)
{
<%
Ampliflex ms = Ampliflex.getInstance();
String solrIP = ms.getSolrIP();
String solrPort = ms.getSolrPort();
String rows = ms.getSearchResultCount();
%>
solrIP='<%= solrIP %>'; // get Solr IP address
solrPort='<%= solrPort %>'; // get Solr Port number
rows='<%= rows %>'; // get number of results to return
solrURL="http://"+solrIP+":"+solrPort;
var query="${searchStr}"; // get the query string entered by ECommerce user
query=query.replace(/[^a-zA-Z 0-9*?:.+-^""_]+/g,''); // Remove special characters
query=query.replace(/\*+/g,'*'); // Replace multiple occurrence of "*" with single "*"
var newquery=query;
if(parseInt(query)==NaN)
{
var lowerCaseQuery=query.toLowerCase();
newquery=lowerCaseQuery;
}
else{
var lowerCaseQuery=query;
}
// sort= document.getElementById("item2").value;
$.getJSON(solrURL+"/solr/db/select/?qt=dismax&wt=json&&start=0&rows="+rows+"&q="+lowerCaseQuery+"&hl=true&hl.fl=text&hl.usePhraseHighlighter=true&sort="+sort+" desc&json.wrf=?", function(result){
var highlight = new Array(result.response.numFound);
$.each(result.highlighting, function(i, hitem){
var rg = /<em>(.*?)<\/em>/g;
var res = new Array();
var match = rg.exec(hitem.text[0]);
while(match != null){
res.push(match[1])
match = rg.exec(hitem.text[0]);
}
highlight[i]=res[0]
for (j=1 ;j<res.length;j++)
{
highlight[i]= highlight[i]+","+res[j];
}
});
var html="<table><tr>"
var count=0;
var alt="NoImage";
var size="3pt";
var id;
var flag=1; // Flag for error messages
border="1";
// If no search results
if(result.response.numFound==0)
{
var msg= "<hr /><font size="+size+" >We're sorry, we found no results for <b>"+document.getElementById("queryString").value+"</font><hr />";
}
else
{
/* var msg= "<hr /><font size="+size+" >Total Results Found <b> "+ result.response.numFound+"</b> for "+"<b>"+document.getElementById("queryString").value+"</b> keyword</font><hr /> ";*/
if (newquery==lowerCaseQuery)
{
var msg= "<hr /><font size="+size+" >Total Results Found <b> "+ result.response.numFound+"</b> for "+"<b>"+query+"</b> </font><hr /> ";
}
else
{
var msg= "<hr /><font size="+size+" >There were no exact matches for <b> "+ query+"</b> , so we searched automatically for "+"<b>"+query+"</b> and yielded "+result.response.numFound+" result(s)</font><hr /> ";
}
// Parse solr response and display it on web page
$.each(result.response.docs, function(i,item){
var word = new Array();
word=highlight[item["UID_PK"]].split(",");
var result="";
var j=0;
for (j=0 ;j<=item.text.length;j++)
{
result = result+item.text[j]+"<br>";
}
for (j=0 ;j<word.length;j++)
{
result=result.replace(word[j],'<em>' + word[j] + '</em>');
}
html+="<td><table>";
var src=item.image;
id="id";
if(src!= null && src!= ""){
html+="<p><tr><td><br>"+"<img id= "+id+ " src="+src+ " border="+border+ " /></td></tr>";
count=count+1;
html += "<tr><td><b>ImagePath</b> "+ item.image+"</td></tr>";
}
// If not insert a default image
else
{
src="images/products/default.jpg";
html+="<tr><td><br><p>"+"<img id= "+id+ " src="+src+ " border="+border+" /></td></tr>";
count=count+1;
html += "<tr><td><b>ImagePath</b> "+"No image path found" +"</td></tr>";
}
html += "<tr><td>UID_PK: "+ item.UID_PK+"</td></tr>";
html += "<tr><td>Name: "+ item.name+"</td></tr>";
html+="<tr><td><b>Price: $"+item.price+"</td></tr>";
html+="<tr><td> "+result+"<br></td></tr>";
html+="</p></table></td>"
if(count%3==0)
{
html+="</tr>"
html+="<tr>"
}
});
html+="</table>"
}
$("#text_container").html(msg);
$("#result").append(html);
}
});
});
}
Your question isn't particularly clear, but your alert code only fires when the document is ready - it is not inside the "change" event function.
Try using the following to see what value is being returned when you change the select box:
$(document).ready(function(){
test("price");
$("#item2").change(function()
{
sort= $("#item2").val();
alert(sort);
test(sort);
});
});
When changing the select box, you should get an alert with the value you have chosen, which will help you understand why the test() function isn't functioning as you expect.
If you amend your question to include the HTML of the select box and the test() function itself I will amend my answer to help.
The JQuery code that you have posted is working fine. Demo: http://jsfiddle.net/DtnUr/
We need more details to figure out the issue, such as your HTML code and JS functions.