We are trying to switch to Leaflet from gmaps.
SEtting up the map worked fine, markers for all our stores work, too.
I used leaflet-search for this build-in solution for searching for cities.
But it is working on keyPress or sth like that.
We want to have an input with a separate button for submitting.
Earlier, we just used an ajax, with a certain url from gmaps, and appended the searchvalue.
But with Leaflet I just cannot make it ...
It looked like this:
function geocode(key)
{
var address = key.replace(/ /g, '+');
var url = 'https://maps.googleapis.com/maps/api/geocode/json';
url += "?key=" + SitePreferences.GOOGLE_MAP_API_KEY;
$.ajax({
url : url,
data : {address:address},
dataType: "json",
success : function (json)
{
setGeocode(json);
},
error: function()
{
console.log("Google map API geocode error");
}
});}
How do I do that with leaflet ?
I tried sth like that without success though:
var url = 'https://nominatim.openstreetmap.org/search?format=json&q={address}';
$.ajax(
{
url:url,
dataType: "json",
success: function(data)
{
console.log(data),
}
});
Your code was fine, it had a syntax error, i also sent the params using data instead of directly from the url
$('#find').click(function(){
var url = 'https://nominatim.openstreetmap.org/search';
$.ajax(
{
url: url,
dataType: "json",
data:{
format:'json',
q: '{' + $("#address").val() + '}'
},
success: function(data)
{
console.log(data);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="address" />
<button id="find">find address</button>
Related
I am trying to edit my Javascript to pull different data via an AJAX call based upon only part of a URL. Currently, my if/else script looks like this:
if (window.location.href=="london") {
$.ajax({
url: '../financial-reports/outwork-vs-expenses-data-london.php',
dataType: 'json'
}).done(function(data) {
data.forEach(function(item) {
dates.push(item.date);
expenses.push(item.expense);
outworks.push(item.outwork);
expensesOutworks.push(item.expensesOutwork);
budgetedOutworks.push(item.budgetedOutwork);
myExpensesChart.update();
});
});
} else {
$.ajax({
url: '../financial-reports/outwork-vs-expenses-data.php',
dataType: 'json'
}).done(function(data) {
data.forEach(function(item) {
dates.push(item.date);
expenses.push(item.expense);
outworks.push(item.outwork);
expensesOutworks.push(item.expensesOutwork);
budgetedOutworks.push(item.budgetedOutwork);
myExpensesChart.update();
});
});
}
This doesn't work as currently written since if window.location.href=="london") is only part of the URL, not the full URL. Is there a way to edit this script to run only based off of the last bit of the page URL? For example: /london, /nw, etc.? Is there a better way to accomplish this task?
Instead of
if (window.location.href=="london") {
Use below code
var URL = window.location.href;
if(URL.indexOf("london") !== -1)
The .indexOf function will find out a substring is exist or not in a string. And in your case you wants "london" is exist or not in URL.
I assume you are asking, when the url something like 'https://example.com/london' , so you just want to include or get the value of london. below code will help to provide always last bit of value of the url.
window.location.pathname.splitOnLast('/')[1]
it will give you '/london'. or you can just check the existence of theondon in the url.
Firstly it is not necessary to use if else like above
You can use like below
var dataurl = document.URL
$.ajax({
url: 'somepage.php',
type: 'post',
dataType: 'json',
success: function (data) {
console.log(data);
},
data: dataurl
});
in somepage.php file you can process the data however you want based on the dataurl
And also in javascript you can do like below
var urlTopost="other.php";
if(document.url.indexOf("london")!==-1)
{
urlTopost="london.php";
}
$.ajax({
url: urlTopost,
type: 'post',
dataType: 'json',
success: function (data) {
console.log(data);
},
data: dataurl
});
I am using AJAX for the first time and I am not sure if I have the correct syntax down. Basically I have a method in the behind code that takes in 2 string parameters and executes an updates the users password. But it keeps coming back as failed.
Here is my current asp button:
<td><asp:Button ID="Button1" runat="server" Text="Add Password" alt="Add Password" /></td>
This is the code that executes once the user hits the Add Password button on the form:
$("#edit_password_form").submit(function (e) {
e.preventDefault();
var finalValue = value2.value;
<%string inputCust = Session[SessionKey.CUSTOMER_ID].ToString();%>
var custNoString = <%=inputCust%>
$.ajax({
url: 'reciept.aspx/Button1_Click',
method: 'post',
contentType: 'application/json',
data: '{custID:' + custNoString + 'tempPass2:' + finalValue + '}',
success: function(){
alert("The function worked correctly");
},
error:function(){ alert("the function did not succeed");}
});
});;
Any ideas on why it could be failing? Mayb I am missing an ajax key or my syntax could be off.
Let me know! Thanks.
Data parameters need properly created JSON. You are missing out on some single quotes here and there.
Instead of manually creating the JSON string, try creating an object first, then stringify it for data. Refer to the code below:
$("#edit_password_form").submit(function (e) {
e.preventDefault();
var finalValue = value2.value;
<%string inputCust = Session[SessionKey.CUSTOMER_ID].ToString();%>
var custNoString = <%=inputCust%>
var dataObj = {};
dataObj.custID = custNoString;
dataObj.tempPass2 = finalValue;
$.ajax({
url: 'reciept.aspx/Button1_Click',
method: 'post',
contentType: 'application/json',
data: JSON.stringify(dataObj),
success: function(){
alert("The function worked correctly");
},
error:function(){ alert("the function did not succeed");}
});
});;
it is not correct syntax to post data: data: '{custID:' + custNoString + 'tempPass2:' + finalValue + '}'
try to pass your data by json format this way data: { custID: custNoString, tempPass2: finalValue }
otherwise it should not work .
more check this link http://www.json.org/JSONRequest.html
(Posted as answer on behalf of the OP).
This is what ended up working for me:
// Create the data object for the 2 parameters for the c# Method
var dataObj = { custID1: custNoString, tempPass2: finalValue };
// AJAX request for run the function
$.ajax({
type: 'post',
url: 'reciept.aspx/Button1_Click',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(dataObj),
success: function(){
alert("The function worked correctly");
},
error:function(){ alert("the function did not succeed");}
});
Creating the data object first was the key. Thank you for all your help and suggestions!
I need to pass data from HTML page to PHP page But without data callback ....
i'm used two method but One of them did not succeed
1)
$.ajax({
type: "POST",
url: 'phpexample.php',
data: {voteid: x },
success: function(data)
{
alert("success! X:" + data);
}
});
2)
$.post("getClassStudent.php",
{
},
function(data){
$("#div_id.php").html(data);
}
);
as i can understand, you just want to send info to a php script and don't need the response, is that right?
try this
$.post("phpexample.php", {voteid:x});
or simply remove the "succes" function from the equation if you feel more confortable using $.ajax instead of $.post
$.ajax({
type: "POST",
url: 'phpexample.php',
data: {voteid: x }
});
your fisrt example is correct, the second is not well formed.
more info:
http://api.jquery.com/jquery.post/
EDIT: to help you some more :)
<button type="button" id="element-id">click</button>
<button type="button" class="class-name">Click</button>
$(document).ready(function(){
//if you are marking ans element by class use '.class-name'
$(".class-name").click(function(){
$.post("getClassStudent.php");
});
//if marking by id element use '#id-name'
$("#element-id").click(function(){
$.post("getClassStudent.php");
});
});
be carefful with the markings, for debuggin try to use "console.log()" or "alert()" so you can see where is the problem and where the code crushes.
var formData = {
'voteid' : 'x',
};
$.ajax({
type : 'POST',
url : 'phpexample.php',
data : formData, // our data object
dataType : 'json',
encode : true
}).done(function(data) {
console.log(data);
});
I'm making an ajax call to the IMDb API to get the movie data for 'The Shawshank Redemption'. I want this data to be put in the div I created.
<div id="movie-data"></div>
My js code currently:
$(init);
function init() {
$.ajax({
dataType: "json",
url: "http://www.omdbapi.com/?i=tt0111161",
success: function (data) {
console.log(data);
$("#movie-data").append(data);
}
});
It doesn't give any response. However, I can see the data in my console. When I append <p>Test</p> instead of data it does return 'Test' to the screen.
This is what I did. It seems to be working now. Thanks everyone.
$.ajax({
dataType: "json",
url: "http://www.omdbapi.com/?i=tt0111161",
success: function (data) {
console.log(data);
$("#movie-data").append(JSON.stringify(data));
The following should work
$("#movie-data").html(data.Title);
because data will be in json format, like this:
{"Title":"Titanic","Year":"1997","Rated":"PG-13","Released":"19 Dec 1997","Runtime":"3 h 14 min","Genre":"Drama, Romance","Director":"James Cameron","Writer":"James Cameron","Actors":"Leonardo DiCaprio, Kate Winslet, Billy Zane, Kathy Bates","Plot":"A seventeen-year-old aristocrat, expecting to be married to a rich claimant by her mother, falls in love with a kind but poor artist aboard the luxurious, ill-fated R.M.S. Titanic.","Poster":"http://ia.media-imdb.com/images/M/MV5BMjExNzM0NDM0N15BMl5BanBnXkFtZTcwMzkxOTUwNw##._V1_SX300.jpg","imdbRating":"7.6","imdbVotes":"449,162","imdbID":"tt0120338","Type":"movie","Response":"True"}
Check these resources:
Using AJAX to Extract Data from IMDB API
http://99webtools.com/blog/php-get-movie-information-from-imdb/
Try like this. API is returning JSON values you need to get the values like mentioned below. Hope this helps you.
var content = 'Title : '+data.Title ;
content += ' Year : '+data.Year ;
content += ' Rated : '+data.Rated ;
content += ' Released : '+data.Released ;
$("#movie-data").append(content);
<div id="movie-data"></div>
function init() {
var html='';
$.ajax({
dataType: "json",
url: "http://www.omdbapi.com/?i=tt0111161",
success: function (data) {
for(var key in data) {
var value = data[key];
html+='<div>'+key+':'+value+'</div>'
}
$("#movie-data").append(html);
}
});
}
init();
working demo
the answer is:
function init() {
$.ajax({
dataType: "json",
url: "http://www.omdbapi.com/?i=tt0111161",
success: function (data) {
console.log(data);
$("#movie-data").html($(data).append(data));
}
});
You could try to delete dataType: "json" from your ajax call
$.ajax({
dataType: "json",
url: "http://www.omdbapi.com/?i=tt0111161",
success: function (data) {
console.log(data);
$("#movie-data").append(data);
}
});
You can try with JSON.stringify(data)
The code would be the following:
$(document).ready(function(){
$.ajax({
method:"get",
url:'{{ route('getnotificationcount') }}',
success:function(data){
console.log(data);
for(var key in data) {
var value = data[key];
html+='<div>'+key+':'+value+'</div>'
}
$("#notifyy").append(html);
}
});
});
I have this URL, that I supposedly should receive an XML from. So far I have this:
function GetLocationList(searchString)
{
$.ajax({
url: "http://konkurrence.rejseplanen.dk/bin/rest.exe/location?input=" + searchString,
type: "GET",
dataType: "html",
success: function(data) {
//Use received data here.
alert("test");
}
});
Tried to debug with firebug, but it doesn't go into the success method.
Though, in DreamWeaver it is able to post a simple alert, which is inside the success method.
I tried writing xml as dataType, but it doesn't work (in DreamWeaver) when I write alert(data).
But it shows an alert with the entire XML, when I write html as dataType.
How do I get the XML correctly, and how do I parse and for example get the "StopLocation" element?
Try to add an Error function as well.
See enter link description here
This will give you all the informations you need to debug your code with Firefox.
$.ajax({
url: "http://konkurrence.rejseplanen.dk/bin/rest.exe/location?input=" + searchString,
type: "GET",
dataType: "html",
success: function(data) {
//Use received data here.
alert("test");
},
error: function(jqXHR, textStatus, errorThrown ){
// debug here
}
});
you need to parse it first, and then you can search for the attributes. like this.
success: function(data) {
var xml = $.parseXML(data)
$(xml).find('StopLocation').each(function()
{
var name = $(this).attr('name');
alert(name);
}
);
this will give you the name of each StopLocation.
hope this helps, you can use the same method for all other attributes in the document also.