|
|
Hi all, I am trying to call to a web service in a function but I get 2 errors that I cannot figure out the cause.
The first error is "Uncaught ReferenceError: distance is not defined" and the second error is "Uncaught TypeError: callback is not a function".
The following is my code snippet
function GetClosestRestaurant(location, distance, results, callback) {
_lat = location.lat();
_lng = location.lng();
var jdata = { lat: _lat, lng: _lng, distance: distance, results:results };
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState < 4) {
return;
}
if (xhr.status !== 200) {
return;
}
};
xhr.open('Get', 'http://http://localhost:21311/myService.asmx/GetClosestPlace', true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify(jdata));
callback(xhr.responseText);
}
GetClosestRestaurant(location, distance, results, DisplayPlace);
function GetAddress(addr, callback) {
var location = "Some Location";
var distance = "5";
var results = "10";
callback(location, distance, results);
}
function GetLatLong() {
var address = "123 SomeStreet, SomeCity, SomeState";
GetAddress(address, GetClosestRestaurant)
}
I made sure that the variables location, distance, and results all have values by doing alert on all of them inside of the GetClosestRestaurant() function definition.
when I call GetClosestRestaurant() however, I get the error as stated above. Any help is greatly appreciated, thanks in advance.
modified 15-Sep-15 14:48pm.
|
|
|
|
|
MadDashCoder wrote: when I call GetClosestPlace() however, I get the error as stated above.
Well, there's clearly an error in your GetClosestPlace function. Since you haven't shown that function, we can't tell you what the error is.
The code you have posted has several problems:
xhr.open('Get', 'http://http://...
- double "http://" in the URL.GetClosestRestaurant(location, distance, results, DisplayPlace);
- location, distance, results and DisplayPlace are not defined at the point where you are calling this function.GetLatLong calls GetAddress, passing GetClosestRestaurant as the callback parameter. GetAddress then passes three parameters to the callback function, but your GetClosestRestaurant function requires four parameters.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Hi, thanks for replying. I have made changes to my code based on your suggestion and decided to use global variables as shown below.
_lat, _lng, _location, distance, results
function GetClosestRestaurant(_location, distance, results, callback) {
_lat = _location.lat();
_lng = _location.lng();
var jdata = { lat: _lat, lng: _lng, distance: distance, results:results };
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState < 4) {
return;
}
if (xhr.status !== 200) {
return;
}
};
xhr.open('Get', "http://localhost:21311/myService.asmx/GetClosestPlace", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify(jdata));
callback(xhr.responseText);
}
GetClosestRestaurant(_location, distance, results, DisplayClosestRestaurant);
function GetAddress(addr, callback) {
location = "Some Location";
distance = "5";
results = "10";
callback(location, distance, results);
}
function GetLatLong() {
var address = "123 SomeStreet, SomeCity, SomeState";
GetAddress(address, GetClosestRestaurant)
}
Now I am getting the error "Uncaught TypeError: Cannot read property 'lat' of undefined" inside of the GetClosestRestaurant() function. I can't figure out why I am getting this error, since I get the value that I'm supposed to get when I do an alert passing in _lat. The other error I'm getting is "Failed to load resource: the server responded with a status of 500 (Internal Server Error)".
I'm not sure if it's related to the first error since I made sure the variable names passed to the web service match the names of the parameters inside the web service function being called.
Thanks again for your help.
modified 15-Sep-15 16:41pm.
|
|
|
|
|
Making the variables global is a waste of time if you do not initialise them with values before calling the GetClosestRestaurant method.
|
|
|
|
|
Hi thanks for your reply,
All of the global variables are initialized prior to calling the GetClosestrestaurant function in my project I just forgot to take off the var keywords in the code above. Thanks for pointing that out.
|
|
|
|
|
Then you need to show the code that does it. What you have shown is calling a function with some variables that have no values.
|
|
|
|
|
Hi Richard, The error messages I am now getting are Uncaught TypeError: Cannot read property 'lat' of undefined" and "Failed to load resource: the server responded with a status of 500 (Internal Server Error)".
Below is my code, global variables are declared but not initialized until the functions GetAddress() and GetClosestRestaurant() are called.
var _lat, _lng, _location, _distance, _results;
function GetClosestRestaurant(ilocation, idistance, iresults, callback) {
_lat = ilocation.lat();
_lng = ilocation.lng();
var jdata = { lat: _lat, lng: _lng, distance: idistance, results:iresults };
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState < 4) {
return;
}
if (xhr.status !== 200) {
return;
}
};
xhr.open('Get', "http://localhost:21311/myService.asmx/GetClosestPlace", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify(jdata));
callback(xhr.responseText);
}
function GetAddress(addr, callback) {
_location = "Some Location";
_distance = "5";
_results = "10";
callback(_location, _distance, _results, GetClosestRestaurant);
GetClosestRestaurant(_location, _distance, _results, DisplayClosestRestaurant);
}
function GetLatLong() {
var address = "123 SomeStreet, SomeCity, SomeState";
GetAddress(address, GetClosestRestaurant)
}
The global variables _location, distance, and results are initialized in the function GetAddress(). Then the global variables _lat and _lng are both initialized in the GetClosestRestaurant().
I was able to show that all of them have a value by doing alerts so I am not seeing where I went wrong. Please point what I did incorrectly.
modified 16-Sep-15 15:42pm.
|
|
|
|
|
You are calling GetClosestRestaurant before you initialise any of the variables.
|
|
|
|
|
Hi Richard, thanks for replying. I am confused by your statement that I did not initialize the global variables before calling the GetClosestRestaurant() function because they are initialized. The way my app works is, the user enters his input into the textboxes on the page.
Then when he clicks the Submit button on the page, the function GetAddress() is called which takes the data from the textboxes and initializes the global variables with them. However, instead of passing in the values from the textboxes, I decided to hard code the values for the global variables just for testing purposes.
|
|
|
|
|
There is obviously something missing somewhere that you have not shown us. I can only suggest adding some further debug statements to trace the actual path through the code, and the values of all the variables as it goes through that path.
|
|
|
|
|
Hi Richard, I think I understand why you said I did not initialize the global varibles before calling the GetClosestRestaurant() function. It is because I called it outside of the GetLatLong() function.
However, the same errors are still present after moving GetClosestRestaurant() inside of GetLatLong() and placing it at the very end to ensure all the global variables are initialized.
The following is all I'm trying to do:
Have the user enter into the textboxes his current address, the desired distance from restaurants, and the number of results to return.
Then pass the address which the user had placed in the textbox on my page to a function that will call Google Map API to get the latitude and longitude of the entered address.
Once lat and lng values from Google API are received, call a web service to get a list of restaurants
(which are within the specified distance entered by user) from my database.
I thought about writing this in JQuery but decided against it because I want to get a better grip of raw Javascript. I have modified the code to make it reflect the changes I've made in my projet file. Please take a look at my code below to see if you can spot where my problems lie now. Thanks for helping.
var _lat, _lng, _location, _distance, _results;
function GetClosestRestaurant(ilocation, idistance, iresults, callback) {
_lat = ilocation.lat();
_lng = ilocation.lng();
var jdata = { lat: _lat, lng: _lng, distance: idistance, results:iresults };
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState < 4) {
return;
}
if (xhr.status !== 200) {
return;
}
};
xhr.open('Get', "http://localhost:21311/myService.asmx/GetClosestPlace", true);
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.send(JSON.stringify(jdata));
callback(xhr.responseText);
}
function GetLatLong(addr, callback) {
_distance = document.getElementById("Distance").value;
_results = document.getElementById("Results").value;
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': addr }, function (searchResults, searchStatus) {
_location = searchResults[0].geometry.location;
callback(_location, _distance, _results, GetClosestRestaurant);
});
GetClosestRestaurant(_location, _distance, _results, DisplayClosestRestaurant);
}
function GetAddress() {
var address = document.getElementById("Distance").value;
GetAddress(address, GetClosestRestaurant);
}
//Inside my page
<div><input type="button" value="Submit" onclick="GetAddress()"/></div>
modified 16-Sep-15 18:24pm.
|
|
|
|
|
function GetAddress() {
var address = document.getElementById("Distance").value;
GetAddress(address, GetClosestRestaurant);
}
I don't see how that can work.
|
|
|
|
|
I'm a student and just learning javascript. Was just wondering what the difference is between jQuery and Javascript?
|
|
|
|
|
Jquery is a library written in JavaScript, making it easier to manipulate, animate and add events to html elements. You can learn more from their webiste.
|
|
|
|
|
嗯，javascript是原生的，而jquery是封装的库，方便开发人员开发，他只是个工具，而javascript就不同了
|
|
|
|
|
JQuery is a library on Javascript.
for more details do google. you will get more idea about it. 
|
|
|
|
|
I am having trouble retrieving the calender selected date value into the javascript function. Any help on this is much appreciated.Thanks. Here is my code:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"><table>
<tr>
<td align="right" class="style1">Effective Date: </td>
<td><input align="middle" class="gridtext" onblur="DoOnBlur(this)" style="width: 200px" onfocus="DoOnFocus(this)" type="text" id="_EffectiveDate" runat="server" name="_EffectiveDate" maxlength="10">
<button title="Select Effective Date" style="font-size: 11px; cursor: hand; width: 6%; font-family: arial" type="button" id="_effDate" onclick="PickDate('_EffectiveDate')">...</button>
</td>
</tr>
</table>
</asp:Content>
<script type="text/javascript" language="javascript">
function PickDate(sTarget) {
if (showModalDialog) {
var sRtn;
sRtn = showModalDialog("Calendar.asp", "", "center=yes;scroll=no;status=no;dialogWidth=280px;dialogHeight=190px");
if (sRtn != "" && sRtn != "undefined")
if (sTarget != '')
document.getElementById(sTarget).value = sRtn;
} else
alert("Internet Explorer 4.0 or later is required.")
}
</script>
|
|
|
|
|
You're using a master page, so the client-side ID of the textbox will not be _EffectiveDate; it will most likely be something like ContentPlaceHolder1__EffectiveDate instead.
To fix the problem set the ClientIDMode property[^] on the textbox to Static.
Also, showModalDialog was removed from Chrome in May[^], and from Firefox in June[^]. It's deprecated in IE11, and not supported in Microsoft Edge. There are various options to replace this deprecated method - for example, these two[^] polyfills[^].
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
It is about the alert on the website. I am already using the javascript language to implement this alert. It works well.
but, I have got two alerts now.
but in the website, i want to display one alert per day.
Can we alternate it with alert 2 on the next day, then back to alert 1 on the day after, and keep it going like this for few weeks (atleast two weeks)?
Any ideas to automate this using javascript?
|
|
|
|
|
Let it be purely on client-side.
1. Toggle the 2 alert boxes based on odd or even day of the date.
2. Set a cookie[^] which expires in say 4 weeks to control the life span of these alert boxes.
Hope it helps.
modified 8-Sep-15 7:38am.
|
|
|
|
|
Greetings again expert,
The way the current code works is that a user checks one of three checkboxes, the associated textbox is displayed.
If all three checkboxes are checked, all three textbox controls are displayed.
By default, upon page load, all three textboxes are hidden.
For instance, if a user checks Job Title / Classification, this control below is displayed:
<div style="float: left; margin-right: 10px; margin-left: 10px">
<asp:TextBox ID="txtTitleChange" runat="server" placeholder="Job Title / Classification" Style="margin-right: 0px; width: 200px; display: none;" />
</div>
If a user checks Pay Grade, then this is displayed:
<div style="float: left; margin-right: 10px">
<asp:TextBox ID="txtPayGradeChange" runat="server" placeholder="for Pay Grade" Style="margin-right: 0px; width: 200px; display: none;" />
</div>
If a user checks Class Specification, then this is displayed:
<div style="float: left; margin-right: 10px">
<asp:TextBox ID="txtClassSpecChange" runat="server" placeholder="for Class Specification" Style="margin-right: 0px; width: 200px; display: none;" />
</div>
If a user checks all three checkbox controls, all three textbox controls are displayed
This works great.
However, we need to improve on this.
On the JUSTIFICATION FOR REQUEST section, we also need to hide by default, all three rows.
For instance, if a user checks Job Title / Classification, we would like the textbox control above, as well as txtTiel textbox control to display as well.
As with above, if a user checks all three, we would like all three textbox controls, as well as all three controls under JUSTIFICATION FOR REQUEST section to be displayed.
I am having issues wrapping around making the changes to exsiting code.
Your assistance is greatly appreciated.
<script type="text/javascript">
function ShowHide(chk, txt) {
ctrltxt = document.getElementById(txt);
if (chk.checked) {
ctrltxt.style.display = 'block';
}
else {
ctrltxt.style.display = 'none';
}
}
</script>
<table style="border: 0; border-style: solid">
<tr valign="top" style="background-color: #f5f7f7; font-size: large; white-space: nowrap;">
<td style="font-size: large; font-weight: bold;">Request a Review of:</td>
<td>
<asp:CheckBoxList ID="ckRequestReview" runat="server" CssClass="cb" Style="border-width: 0;" RepeatDirection="horizontal" RepeatColumns="4" RepeatLayout="Table">
<asp:ListItem onclick="ShowHide(this,'txtTitleChange');"> Job Title / Classification</asp:ListItem>
<asp:ListItem onclick="ShowHide(this,'txtPayGradeChange');">Pay Grade</asp:ListItem>
<asp:ListItem onclick="ShowHide(this,'txtClassSpecChange');">Class Specification</asp:ListItem>
</asp:CheckBoxList>
</td>
</tr>
</table>
<table style="border: 0; border-style: solid">
<tr valign="top">
<td valign="middle" style="font-size: large; font-weight: bold; border-top: thin solid; text-align: left; white-space: nowrap" class="style4">
<br />
<div class="input text" style="float: left;">
<span style="text-align: left; font-size: x-large; float: left;">Requested Change:</span>
<div style="float: left; margin-right: 10px; margin-left: 10px">
<asp:TextBox ID="txtTitleChange" runat="server" placeholder="Job Title / Classification" Style="margin-right: 0px; width: 200px; display: none;" />
</div>
<div style="float: left; margin-right: 10px">
<asp:TextBox ID="txtPayGradeChange" runat="server" placeholder="for Pay Grade" Style="margin-right: 0px; width: 200px; display: none;" />
</div>
<div style="float: left; margin-right: 10px">
<asp:TextBox ID="txtClassSpecChange" runat="server" placeholder="for Class Specification" Style="margin-right: 0px; width: 200px; display: none;" />
</div>
<div style="clear: both"></div>
</div>
<br />
<br />
<br />
</td>
</tr>
</table>
<table>
<tr>
<td>
<!--
<span style="font-size: X-large; text-align: left;">JUSTIFICATION FOR REQUEST</span><br />
<div class="input textarea">
<table>
<tr>
<td style="font-size: large;" class="style22">
<asp:Label ID="txtTitle" runat="server" Text="Job Title / Classification" Style="width: 200px;" Font-Bold="False"></asp:Label></td><td><asp:TextBox ID="txtTitleComments" runat="server" placeholder="Title Change Justification" Style="width: 400px;height:100px;" Font-Bold="False" TextMode="MultiLine"></asp:TextBox></td>
</tr>
</table>
<table>
<tr>
<td style="font-size: large;" class="style21">
<asp:Label ID="txtPayGrade" runat="server" Text="Pay Grade" Style="width: 200px;" Font-Bold="False"></asp:Label></td><td><asp:TextBox ID="txtPayComments" placeholder="Pay Grade Change Justification" runat="server" Style="width: 400px;height:100px;" Font-Bold="False" TextMode="MultiLine"></asp:TextBox></td>
</tr>
</table>
<table>
<tr>
<td style="font-size: large;" class="style22">
<asp:Label ID="txtClassification" runat="server" Text="Class Specification" Style="width: 200px;" Font-Bold="False"></asp:Label></td><td><asp:TextBox ID="txtClassComments" placeholder="Class Specification Change Justification" runat="server" Style="width: 400px;height:100px;" Font-Bold="False" TextMode="MultiLine"></asp:TextBox></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
|
|
|
|
|
Hi All,
I am trying to come up with an algorithm to get following three piece of information to plot a chart:
1. Start : Should be close to the minimum value of the dataset
2. Stop : Should be close to the maximum value of the dataset
3. Interval : Should be such that it will have "0" on the axis when interval traverses from minimum to maximum.
Example: dataset{-266,-17.6,0.5,2000,6000}
My final return values should be:
Start: 400
Stop: 6000
Interval:200
Note: Since start is 400 and interval is 200, we will have 0 as a point on the x-axis.
|
|
|
|
|
Does this have anything to do with Javascript?
|
|
|
|
|
I am going to implement this is javascript. We have data in csv format which will be read by the JS function and the start, stop and interval will be sent to third party library to create chart.
The algorithm I am looking for can be pseudo code. It's not specific to JS, but would be a big help to know if some one would have implemented this using JS.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
