Unable to get Update panel working right

Question

I am working on a website using Google maps apiv3. I have a button in an update panel through which I execute some logic using code behind of button_click and a javascript function.

Since the button is in the update panel, I am unable to see anything in watch window of firebug and neither my breakpoints in javascript function work. Without an update panel I can see the execution flow in watch and everything works fine but I get a reload on map.

Code in aspx:

    <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:Button ID="Button1" runat="server" style="z-index: 1; left: 573px; top: 146px; position: absolute" Text="Show route" onclick="Button1_Click1"/>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
        </Triggers>
    </asp:UpdatePanel>

Button_Click1:

protected void Button1_Click1(object sender, EventArgs e)
{
    using (con = new MySqlConnection("server=localhost; uid=root;password=as64ws;database=Gmaps"))
    da = new MySqlDataAdapter("select * from routes where uid='a1'", con);
    da.Fill(ds, "mroute");
    foreach (DataRow r in ds.Tables[0].Rows)
    {
        uroute.Add(r["latlng"].ToString());
    }
    croute = new string[uroute.Count];
    croute = uroute.ToArray();
    hdncroute.Value = string.Join("&", croute);
    ScriptManager.RegisterClientScriptBlock(this, typeof(Button), "routes", "droute()", true);
}

Javascript:

function droute()
{
    var route=[];
    var temp;
    temp = document.getElementById('<%= hdncroute.ClientID %>').value;
    route= temp.split('&');
    //Loop to add locations and draw line
    var path= polyline.getPath();
    for(var i=0;i<route.length;i++)
        {
            var input= route[i];
            var ltln = input.split(",",2);
            var lat=parseFloat(ltln[0]);
            var lng=parseFloat(ltln[1]);
            var pos= new google.maps.LatLng(lat,lng);
            var marker= new google.maps.Marker({position:pos,map:map});
            path.push(route[i]);
            google.maps.event.addListener(marker,'click',showiwindow);
        }
    function showiwindow(event)
    {
    iwindow.setContent("<b>Coordinates are:</b><br/>Latitude:"+event.latLng.lat()+"<br/>Longitude:"+event.latLng.lng());
    iwindow.open(map,this);
    } 
}

I cant get the values to be displayed on the map. Should I place the button in update panel or the map in the update panel? Where am I going wrong?

Most of the answers related to this question will be like- using update panel, since their issue was not to loose rest of the form data on reload. But in my case I should avoid the map itself to reload, since I am loosing the data on it. Sounds sensible right? — Cdeez
Why are you using ASP/Mysql?? PHP/Mysql is preferable with many Map examples using these with Ajax or JQuery — david strachan
I have a better understanding of Asp rather than php in which I am a noob. And Asp is fine to work with, just in this case where I need to work with ajax. Trying to learn it. Any suggestions on the question? — Cdeez

Bill Blankenship Bill Blankenship · Accepted Answer · 2012-09-14T00:38:37

I would scrap a good portion of your logic that you have.

I would have the button click do a jquery ajax post to a webservice in your codebehind which would return an array back to your ajax post and then in the success portion of your ajax post I would trigger your javascript routine.

http://dotnetguts.blogspot.com/2012/01/jquery-ajax-examples-by-calling-aspnet.html

What I described above is how I do almost all of my google maps calls.......I haven't seen a more appropriate way of doing this in the close to 100s of pages that I have read on this subject. Please let me know if you need to know more about how to do it this way.

Here is another good page describing how to do the jquery ajax post. :

Call code behind method from Jquery

Unable to get Update panel working right

2 Answers