Re: I am still struggling to find a fix for this. Can some guru please help? - ASP.NET Discussion Boards

Thanks Syed and Anurag,

I resolved the issue .Thanks for the advice.

This line of code:

PHP

<p id="results"></p>

displays the total miles when calculated between two locations using the javascript code below:

PHP

    <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" type="text/javascript"></script>
<!-- According to the Google Maps API Terms of Service you are required display a Google map when using the Google Maps API. see: http://code.google.com/apis/maps/terms.html -->
    <script type="text/javascript">

    var geocoder, location1, location2;

    function initialize() {
        geocoder = new GClientGeocoder();
    }

    function showLocation() {
        geocoder.getLocations(document.forms[0].address1.value, function (response) {
            if (!response || response.Status.code != 200)
            {
                alert("Sorry, we were unable to geocode the first address");
            }
            else
            {
                location1 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                geocoder.getLocations(document.forms[0].address2.value, function (response) {
                    if (!response || response.Status.code != 200)
                    {
                        alert("Sorry, we were unable to geocode the second address");
                    }
                    else
                    {
                        location2 = {lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address};
                        calculateDistance();
                    }
                });
            }
        });
    }
    
    function calculateDistance()
    {
        try
        {
            var glatlng1 = new GLatLng(location1.lat, location1.lon);
            var glatlng2 = new GLatLng(location2.lat, location2.lon);
            var miledistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);

            document.getElementById('results').innerHTML = 'Address 1: ' + location1.address + '<br />Address 2: ' + location2.address + '<br />Distance: ' + miledistance + ' miles (or ' + kmdistance + ' kilometers)';
        }
        catch (error)
        {
            alert(error);
        }
    }

    </script>
  </head>

  <body onload="initialize()">

    <form action="#" onsubmit="showLocation(); return false;">
      <p>
        <input type="text" name="address1" value="Address 1" class="address_input" size="40" />
        <input type="text" name="address2" value="Address 2" class="address_input" size="40" />
        <input type="submit" name="find" value="Search" />
      </p>
    </form>
    <p id="results"></p>

  </body>
</html>

I am using ASP.NET to build an app and would like to use some sort of hidden variable to store value of

PHP

<p id="results"></p>

and set it at server side to the corresponding control but I am having difficulty thinking up how to do this.

Can someone please assist with this?

I would really appreciate it.

You can use an asp:Label and set it's value server side.

There are only 10 types of people in the world, those who understand binary and those who don't.

I tried that already and it didn't work.

What didn't work?

And what are you trying to do then?

There are only 10 types of people in the world, those who understand binary and those who don't.

I understand what you are trying to do, but not really sure what you are asking... javascript code runs on the client side, the values set on #results are added after the client has loaded the javascript and calculated the distance. Are you attempting to send this data back to the server?

you can always use a hidden input

HTML

<input type="hidden" value="something" name="result" />

or:

ASP.NET

<asp:HiddenField runat="server" ID="result" />

which can then be ran on postback and checked for a value.

You have to put that in a hidden textbox.

The asp.net server remembers everything it generates, and sends back to the browser. So take a dropdownbox for instance, if you populate a dropdown box, and then use javascript to clear it, the server will think that someone tampered with the value, and generate an error. But with a textbox, the server expects the values to change, so that's OK.

Only HTML Elements with the word input really post back to the server. All others don't, it's a waste of time and bandwidth.

button
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week

So a textbox and a dropdown box use the input element, which is programmable to act like a textbox, dropdownlist, radio button, checkbox and so forth.

Make a asp.net textbox object, and set the CSS display: none
style="display: none;"
Were using the CSS style because I'm skeptical of the visible attribute.
Let the textbox show until you prove it works, then use the display.

Were using clientIDmode, because the id value will stay the same for use in javascript.

Off the top of my head;
<asp:textbox id="txt_geolocation" runat="server" <b="">clientIDmode="static" style=display: none;">

If you don't make the asp.net object, the textbox will most likely give you trouble posting back it's value.

[edit]

document.getElementById('txt_geolocation').value('stuff you geolocation info in here');

textbox use the attr value, and has no innerHTML.

Thank you guys, all of you for your kindness with your responses.

Ryan, I should have been more much clearer. When I said it doesn't work, I meant that yes, it will display results in labels but I could not pass the value of the results to codebehind.

Second, I can't pass that value from one multiview to another.

Here are some examples:

PHP

//HTML
          <asp:MultiView ID="myMultiView" ActiveViewIndex="0" runat="server">
           <asp:View ID="vwPersonalData" runat="server">

            <p>
                <asp:TextBox ID="address1" runat="server" Text="Marietta, GA" ClientIDMode="Static"></asp:TextBox>
                <asp:TextBox ID="address2" runat="server" Text="Birmingham, AL" ClientIDMode="Static"></asp:TextBox>
            </p>
 <%--           <asp:Label ID="Label1" Style="display: none" runat="server" Text=""></asp:Label>--%>
             <asp:Label ID="results" runat="server" Text="" Style="display: none" ClientIDMode="Static"></asp:Label>
             <asp:HiddenField runat="server" ID="result" />
            </asp:View>
         <asp:View ID="vwPreview" runat="server">
        <br />
       <!-- Labels to preview input here -->
      <span style="font-weight:bold;font-size:medium;">Please verify your order:</span><span style="color:Red;font-weight:bold;">      10% discount applied</span>
      <br /> <br />
 <table>
 <tr>
  <td>Estimated Total Miles:</td>
  <td><asp:Label ID="lblMiles" runat="server" /></td>
</tr>
<table>
 </asp:View>
</asp:MultiView>
 <asp:Button ID="btnBack" runat="server" Text="< Back " OnClick="btnBack_Click" />
  <asp:Button ID="btnNext" runat="server" Text="Next >" OnClientClick="showLocation();" OnClick="btnNext_Click" />	
  <asp:Button ID="btnSend" runat="server" Text="Send request" OnClick="btnSend_Click" />
</form>


//codebehind
        Dim Hiddenresult As HiddenField = form1.FindControl("result")
        lblMiles.Text = Hiddenresult.Value

As you can see from the sample codes, I am trying to get the value of Hidden field called results and pass that value to preview multiview page called vwPreview but it always comes up blank.

What am I doing wrong?

Don't put the hidden textbox inside the multi view control, place it on the page at the bottom.
when you make the textbox, get the value "" or string.empty

To diagnose, you have to follow the steps.

Step 1: Does the data appear in the textbox
Use a regular textbox, and keep it visible, so you can see the data appear in it from your Javascript. Confirm that you can write to the textbox.

Diagnose: Try using IE11, press F12, click on the bug, 3rd down on left, and it will tell you if you have a script error, preventing the write.

Step2: Post the form back to the server.
On the Button Click event, look for the textbox value being posted back.

Diagnose: If the textbox has data in it, but no data came back to the server,
Check your use of

C++

Page.IsPostback

button_click
if page.ispostback then
 look for the textbox text.
end if

I don't know what a multiview control is, so no help from me there on that subject. Fix 1 thing at a time in sequence.

Oh, I'm jkirkerx, not RyanDev.

Sorry jkirkerx, I didn't mean to imply that you are RyanDev.

I was trying to reply to all posts at once by mentioning your name and his.

In any case, my apologies.

Ok I will take your advice by dealing with one issue at a time.

Let's start with my js:

You referenced txt_geolocation below:
document.getElementById('txt_geolocation').value('stuff you geolocation info in here');
Did you mean results?

Please see entire js and you will see that my js has it this way:
document.getElementById("results").innerHTML =...

PHP

<script type="text/javascript">

        var geocoder, location1, location2, gDir;

        function initialize() {
            geocoder = new GClientGeocoder();
            gDir = new GDirections();
            GEvent.addListener(gDir, "load", function () {
                var drivingDistanceMiles = gDir.getDistance().meters / 1609.344;
                var drivingDistanceKilometers = gDir.getDistance().meters / 1000;

                document.getElementById("results").innerHTML = 'From: ' + location1.address + '<br />To: ' + location2.address + '<br />Driving Distance: ' + drivingDistanceMiles.toFixed(2) + ' miles ';
            });
        }

        function showLocation() {
            geocoder.getLocations(document.forms[0].address1.value, function (response) {
                if (!response || response.Status.code != 200) {
                    alert("Sorry, we were unable to geocode the first address");
                }
                else {
                    location1 = { lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address };
                    geocoder.getLocations(document.forms[0].address2.value, function (response) {
                        if (!response || response.Status.code != 200) {
                            alert("Sorry, we were unable to geocode the second address");
                        }
                        else {
                            location2 = { lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address };
                            gDir.load('from: ' + location1.address + ' to: ' + location2.address);
                        }
                    });
                }
            });
        }

    </script>

And please, what do you mean by ).value('stuff you geolocation info in here');

Thanks a lot

You can use any name you like, so we will use "results"
Just make sure the textbox ID matches your javascript

I used value, because a textbox does not have innerHTML, it has a value

This is value

<input id="results"  type="text" value="Put your stuff here" />

This is innerHTML

<div>innerHTML</div>

Got It

Thanks again

I got the part about textbox. This is the part that I am trying to understand.

PHP

document.getElementById("results").innerHTML = 'From: ' + location1.address + '
To: ' + location2.address + '
Driving Distance: ' + drivingDistanceMiles.toFixed(2) + ' miles ';

Does this script above remain as is or do I change innerHTML to value like below?

PHP

document.getElementById("results").value

Your advise is great. I am trying to walk my way from the script to markup.

Earlier today, I changed to this -->
document.getElementById("results").value on the script and then used this:

<asp:textbox id="results" runat="server" clientidmode="static">

I put the textbox outside the multiew control. I am really not sure what difference that makes.

Multiview control is used to pass values from one page to another. It gives the appearance that you are going from page to another.

For instance, in my case, I would like users to fill a form on on view, then when they click Next, all the values they entered previously are displayed in another view.

This gives them the opportunity to review what information they entered and certify that they are correct. If they are not, the users can return to previous "page" to make addditional changes. If they are correct, then they submit.

So, I tried putting the textbox inside one view, nothing happens. The box is blank.
I tried putting it outside the view.

Still nothing happened.

This is really frustrating.

Textboxes don't have innerHTML!
They have values!

Try the sample below, then go back and work on filling in the data.

document.getElementById("results").value = 'See, textboxes do have value';

Hi again,

If you look at the sample in my last post, I have that exactly.

I posted exact code I am currently using.

Here are the snippets again:

//JS:

PHP

document.getElementById("results").Value = drivingDistanceMiles.toFixed(2);

//HTML

PHP

<asp:TextBox ID="results" runat="server" ClientIDMode="static"></asp:TextBox>

So, why is results not displaying values?

Because value has to be in lower case.

Javascript is case sensitive. It has to be typed perfect.

Use IE11, and press F12, then the 3rd icon down on the left and run the debugger for JavaScript.

OK, I see it after I made the change. All along, it it in lower case; don't know when I made the switch back to upper case.

In any case, we are still back to same orignal problem.

I would like to grab that value in code behind but this one line of code gets in the way.

If I run this code as is:

PHP

<asp:Button ID="btnNext" runat="server" Text="Next >" OnClientClick="showLocation(); return false;" OnClick="btnNext_Click" />

then it dislays the miles but doesn't do anything else.
It doesn;t even recognize rest of form fields that need to be validated and upon click the NEXT buttn takes some action.

I suppose the return false is the issue?

If I remove it, then the value of request doesn't get grabbed on codebehind.

Thanks alot for your patience.

Your Javascript, off the top of my head, this is concept code
[EDIT] Fixed the error

function showLocation() {

  var vFlag = true; // I prefer to presume true, prove me wrong
  var parameters = '3.14'; // Build your string
  document.getElementByID('results').value = parameters; // set the textbox
  var results = document.getElementByID('results').value; // check the length of data in the txt
  if (results.length === 0) { // No text, it fails - === is proper, not == or =
   vFlag = false;  // return failure
   alert('my code failed');
  }

  alert('txt=' + results);

  return vFlag;
}

Then on the button off the top of my head.
<asp:button id="btnNext" runat="Server" text="Next" onclientclick="return showLocation(); onClick=" btnnext_click"="">

The code is untested, just freewriting here, but it's a concept to prove.

modified 6-Dec-14 13:44pm.

Thanks a lot for all your help, jkirkerx.

I am beginning to think this is not even possible.

I have looked at several examples online and it seems it is just intended to display it and not do anything else with it.

So far, nothing I tried has worked.

Your off the top of your head examples have lots of errors I don't even know how to begin to fix them.

It can be done. We do this on a volunteer basis, we don't get paid. I'm not a retired person, I'm actually working on my jobs that I have to get finished while I'm trying to help you.

Your in the learning phase, and you don't quite understand HTML and the DOM, and how Java Script is just a DOM manipulator.

This happens with programmers that know how to write code, but don't know HTML very well, and downplays the significance of HTML as a language. PHP is classic for this. I see PHP programmers write elaborate code to generate HTML, instead of just writing a HTML page, with a little PHP to generate a little bit of HTML.

[EDIT]

I fixed your code, and now it works.
I don't really code in c#, and can't figure out why I have to click the button twice to populate the blue textbox, the postback results of the client script. Maybe someone else can give me some insight into this.

but like I said, I didn't see any asp.net in your first post, so it really seems like a javascript issue.

In hindsight, it looks you you pasted a bunch of code from the inter webs on to a web form, expecting it to work, without solid knowledge of how java script works, and how to adjust asp.net to it for the postback value to do whatever you need to do with it.

I can tell that you have very little experience with client scripting and asp.net, and could use a little more time and practice on that subject.

Like I said last night, it was just concept code, you were not suppose to copy and paste it into your work. You were suppose to see the difference and type that into your project.

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html>
<script runat="server">
    
    
    protected void bt_search_Click(object sender, EventArgs e)
    {
        if (Page.IsPostBack)
        {
            String m_results = txt_results.Text;
            txt_postback.Text = m_results;

        }
    }
</script>


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
 <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA7j_Q-rshuWkc8HyFI4V2HxQYPm-xtd00hTQOC0OXpAMO40FHAxT29dNBGfxqMPq5zwdeiDSHEPL89A" type="text/javascript"></script>

    <script type="text/javascript">

        var geocoder, location1, location2;

        function initialize() {
            geocoder = new GClientGeocoder();
        }

        function showLocation() {

            var vFlag = true;

            geocoder.getLocations(document.getElementById('txt_address1').value, function (response) {
                if (!response || response.Status.code != 200) {
                    alert('Sorry, we were unable to geocode the first address');
                    vFlag = false;
                }
                else {

                    location1 = { lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address };
                    geocoder.getLocations(document.getElementById('txt_address2').value, function (response) {
                        if (!response || response.Status.code != 200) {
                            alert('Sorry, we were unable to geocode the second address');
                            vFlag = False;
                        }
                        else {
                            
                            location2 = { lat: response.Placemark[0].Point.coordinates[1], lon: response.Placemark[0].Point.coordinates[0], address: response.Placemark[0].address };
                            calculateDistance();

                        }
                    });
                }
            });            

            return vFlag;
        }

        function calculateDistance() {
            try {

                var glatlng1 = new GLatLng(location1.lat, location1.lon);
                var glatlng2 = new GLatLng(location2.lat, location2.lon);
                var mdistance = glatlng1.distanceFrom(glatlng2, 3959).toFixed(1);

                var mResults = '' +
                'Address 1: ' + location1.address + '\r\n' + 
                'Address 2: ' + location2.address + '\r\n' +
                'Distance: ' + mdistance + ' miles (or ' + mdistance + ' kilometers)';

                document.getElementById('txt_results').value = mResults;

            }
            catch (error) {
                alert(error);
            }
        }

    </script>
  </head>
 
  <body onload="initialize()">
 
    <form runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:UpdatePanel ID="up_geoAddress" runat="server" ChildrenAsTriggers="False" ClientIDMode="Static" UpdateMode="Conditional">
            <ContentTemplate>
                <div style="width: 650px; display: block; text-align: left; margin: 6px;">
                    <asp:TextBox ID="txt_address1" runat="server" value="" CssClass="address_input" Style="Width: 80%;" ClientIDMode="Static"></asp:TextBox>
                    <asp:TextBox ID="txt_address2" runat="server" value="" CssClass="address_input" Style="Width: 80%;" ClientIDMode="Static"></asp:TextBox>
                </div>
                <div style="width: 650px; display: block; text-align: left; margin: 6px;">
                    <asp:Button ID="bt_search" runat="server" Text="Search" OnClick="bt_search_Click" style="width: 80%;" OnClientClick="return showLocation();" />
                </div>
                <div style="width: 650px; height: 128px; display: block; text-align: left; line-height: 128px;">
                    <asp:TextBox ID="txt_results" runat="server" style="width: 80%; height: 96px; border: solid 1px rgb(255,0,0);" ClientIDMode="Static" TextMode="MultiLine"></asp:TextBox>
                </div>
                <div style="width: 650px; height: 128px; display: block; text-align: left; line-height: 128px;">
                    <asp:TextBox ID="txt_postback" runat="server" style="width: 80%; height: 96px; border: solid 1px rgb(0,0,255);" ClientIDMode="Static" TextMode="MultiLine"></asp:TextBox>
                </div>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="bt_search" EventName="Click" />
            </Triggers>
       </asp:UpdatePanel>

    </form>
     
  </body>
</html>

modified 6-Dec-14 18:37pm.

jkirkerx,

I THANK YOU so much for your assistance but more importantly.

I have been extremely fortunate and blessed to work with people who demonstrate a great deal of patience with determination to help someone else succeed.

I really appreciate it.

About asp.net, no I am not a newbiew at all.

There are two things I can say I am good at; asp.net and sql are two of them.

As for Javascript, yes, I am not very good there.

Having said that, usually, before I post, I scoured the web looking for snippets or samples to use.

So, when I post, I post because I tried to solve it myself.

As I stated earlier, I was looking for a way to give us the ability to calculate mileage between two locations.

My googling took me to the sample Javascript I posted. Yes, you are right, the Javascript is mine but I tested it and it works.

However, I was looking for a way to use it with Multiview control.

I did mention that remember?

With multiview control, you have view1, view2, viewN.

In my case, I have view1 called vwPersonalData.

With this, users enter all their information and when they click NEXT, they are taken to view2 called vwPreviewData.

As the name suggests, they can preview the information they entered in vwpersonalDate.

If something is not right, they go back, correct it then try again.

If all is well, they click SUBMIT to submit to the database.

Everything works except this javascript bit.

I didn't want to dump all of that code here.

So, I started with Javascript per your suggestion so I can go one step at a time.

I am about to try to integrate your solution with multiview controls and see if i can do it.

Again, you are God sent and I thank you very much.

Be back with results.

Hi jkirkerx,

I know you have probably reached the end of your support and I can clearly understand it.

I have tested your code and it works exactly like you described it.

I am going to try to see if I can figure out another way to preview data without using multiview.

Until that happens, this is still not going to be of much help, unfortunately.

You have been great and I thank you very much.

I am trying to call a web service function within my own ASP.net (code behind) using AJAX on the page.

Once i push the button to execute the JS/AJAX/codebehind - I got an error.

[b]POST [url]http://************/admin/Admin.aspx/getDBInformation[/url] 500 (Internal Server Error)[/b]

This is my code below that I am currently using:
[code]
<webmethod> _
Public Shared Function getDBInformation() As String
loadDBData()
Return JsonConvert.SerializeObject(dbInfo, System.Xml.Formatting.Indented)
End Function
End Class
[/code]
The code behind looks like this:
[code]
Imports System.DirectoryServices
Imports System.Security.Principal
Imports System.Net
Imports System.Drawing
Imports System.IO
Imports System.Data.SqlClient
Imports System.Web.Services
Imports Newtonsoft.Json

Partial Class _Default
Inherits System.Web.UI.Page

Dim dbStoredData As dbData
Shared dbInfo As New List(Of dbData)

Dim sqlQ As SqlCommand = Nothing
Dim conn As SqlConnection = Nothing
Dim reader As SqlDataReader = Nothing
Dim strconnstring As String = ""
Shared theQuery As String = "Server=*******,1433;Database=**********;User Id=*******;Password=*********;"

Private Class dbData
Public veID As String = ""
Public veDate As String = ""
Public lastUpdated As String = ""
Public updatedBy As String = ""
End Class

[SOME MORE CODE BETWEEN HERE THAT WAS LEFT OUT]

Public Sub loadDBData()
conn = New System.Data.SqlClient.SqlConnection(strconnstring)
conn.Open()

theQuery = _
"SELECT * " & _
"FROM downTable " & _
"ORDER BY veID DESC"

sqlQ = New SqlCommand(theQuery, conn)
reader = sqlQ.ExecuteReader
dbInfo.Clear()

While reader.Read()
dbStoredData = New dbData()
dbStoredData.veID = EscapeLikeValue(reader("veID").ToString())
dbStoredData.veDate = EscapeLikeValue(reader("veDate").ToString())
dbStoredData.lastUpdated = EscapeLikeValue(reader("lastUpdated").ToString())
dbStoredData.updatedBy = EscapeLikeValue(reader("updatedBy").ToString())
dbInfo.Add(dbStoredData)
End While

sqlQ = Nothing
conn.Close()
conn = Nothing
End Sub

<webmethod> _
Public Shared Function getDBInformation() As String
loadDBData()
Return JsonConvert.SerializeObject(dbInfo, System.Xml.Formatting.Indented)
End Function
End Class
[/code]
How can I correct this issue so that I am able to cal

I'm not quite understanding what your trying to achieve here.

So you click on a button, and run a client script using jquery or javascript ajax request to your web service?
And the web service completely bombs resulting in a server error 500?

Where's your JavaScript code?

Also, put a breakpoint in your C# webmethod and see if it is even hitting the C# code.

There are only 10 types of people in the world, those who understand binary and those who don't.