View Single Post
  #1 (permalink)  
Old February 16th, 2016, 11:37 AM
OxieK OxieK is offline
Authorized User
Points: 44, Level: 1
Points: 44, Level: 1 Points: 44, Level: 1 Points: 44, Level: 1
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Oct 2015
Posts: 10
Thanks: 1
Thanked 0 Times in 0 Posts
Default AJAX with googleMaps

Hi,

I am creating a store locator that displays a large map on page load and searches for stores when a user enters postcode/city.
Next to the map there is a listview of the store details with the datapager.
When I click the pager buttons, the map gets reloaded, and I don't want that. I tried using script manager in various places in the script but it seems to prevent the small map (and sometimes storelist) from displaying. Can anyone help me with this please?


Here is the code (simplified, as there is quite a lot)
Thanks

HTML Code:
<div class="container storelocator">
            <div class="row">
                <div class="col-md-12">
                    <h2>Store locator</h2>
                </div>
                 <div class="col-md-6 storemap">
                        <div class="form-group">
                            <div class="input-group">
                                <asp:TextBox ID="TxBxTownPostcode"
runat="server" CssClass="form-control" placeholder="Enter your town or postcode"></asp:TextBox>
                                <span class="input-group-btn">
                                    <asp:Button ID="storeLocatorBtn" runat="server" CssClass="btn btn-default storeLocatorBtn" Text="Go!" OnClick="storeLocatorBtn_Click1" />

                                </span>
                            </div>
                        </div>
                 
                        <asp:PlaceHolder ID="smallStoreMapPlcHldr" runat="server" Visible="false">   
                           <div id="map-canvas"></div>      
                        </asp:PlaceHolder>
                


                   </div>
                    <asp:PlaceHolder ID="bigStoreMapPlcHldr" runat="server" Visible="true">
                            <div class="container">
                                <div class="row">
                                    <div class="col-md-12">
                                         <div id="map-canvas-big"></div>
                                    </div>
                                </div>
                            </div>
                    </asp:PlaceHolder>

                <asp:PlaceHolder ID="storelistPlcHldr" runat="server" Visible="false">
                  <div class="col-md-6 storelist">
                    <asp:ListView ID="storeList" runat="server" DataKeyNames="id" OnPagePropertiesChanging="storeList_PagePropertiesChanging" OnItemDataBound="storeList_ItemDataBound">
                        <LayoutTemplate>
                            <table id="storeListTbl" cellpadding="2">
                                <tr id="itemPlaceholder" runat="server">
                                    <td></td>
                                </tr>
                            </table>
                           
                            <asp:DataPager runat="server" ID="DataPager1" PageSize="3" PagedControlID="storeList">
                                <Fields>
                    
                                   <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="false" ShowPreviousPageButton="true"
                                        ShowNextPageButton="false" />
                                    <asp:NumericPagerField ButtonType="Link" />
                                    <asp:NextPreviousPagerField ButtonType="Link" ShowNextPageButton="true" ShowLastPageButton="false" ShowPreviousPageButton="false" />
                            </Fields>
                            </asp:DataPager>
                        </LayoutTemplate>


                        <ItemTemplate>

                           //Item template here
                        </ItemTemplate>
                    </asp:ListView>
                </div>
            </asp:PlaceHolder>
            </div>
         </div>
[/LEFT]
Reply With Quote