0

I have a chart on a webform that I need to resize based on the browser size. I've tried some demo code from Stack Overflow that shows the use of Document.Ready... using 2 hidden variables that hold the width and height. If I put that code in a webform that does not have a MasterPageFile it works great. If I create a webform that uses a master file it won't place the width and height in the hidden variables. I've stepped through the Document Ready function and I can see the Windows width/height and it looks like it's assigning them. But the variables in my watch window show 'undefined'. Which tells me at this point it doesn't know about these variables. The Site,Master file is the default VS2013 generated code.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WithMaster.aspx.cs" Inherits="RepairChart.WithMaster" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">


<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        var widthvar = $(window).width();
        $("#mwwidth").val($(window).width());
        $("#mhheight").val($(window).height());
        $("#mWWidthLabel").text($(window).width());
        $("#mHHeigthLabel").text($(window).height());


    });

</script>
<div>
    <asp:HiddenField ID="mwwidth" runat="server" />
    <asp:HiddenField ID="mhheight" runat="server" />
    <asp:Button ID="Button2" runat="server" Text="Button"   OnClick="Button1_Click" />





&nbsp;&nbsp;&nbsp;
    <asp:Label ID="mHHeigthLabel" runat="server" Text="Label"</asp:Label>
&nbsp;&nbsp;
    <asp:Label ID="mWWidthLabel" runat="server" Text="Label"></asp:Label>
&nbsp;&nbsp;&nbsp;&nbsp;
    <asp:Chart ID="mChart1" runat="server" DataSourceID="SqlDataSource1">
        <Series>
            <asp:Series Name="Series1" XValueMember="RepairDate"YValueMembers="serialNo">
            </asp:Series>
        </Series>
        <ChartAreas>
            <asp:ChartArea Name="ChartArea1">
            </asp:ChartArea>
        </ChartAreas>
    </asp:Chart>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:IPCConnectionString %>" SelectCommand="CountSNByDateRange" SelectCommandType="StoredProcedure">
        <SelectParameters>
            <asp:Parameter DefaultValue="2/1/2016" Name="startDT" Type="DateTime" />
            <asp:Parameter DefaultValue="2/29.2016" Name="stopDT" Type="DateTime" />
        </SelectParameters>
    </asp:SqlDataSource>

</div>
</asp:Content>
Cœur
  • 37,241
  • 25
  • 195
  • 267
JimiC
  • 1
  • 2
  • Look at the source of the rendered page... ASP.Net helpfully doesn't preserve your IDs for server controls. You'll want something like: `$("#<%=mwwidth.ClientID%>").val($(window).width());`. While not a duplicate, this surely addresses your problem: [How to stop ASP.NET from changing IDs in order to use jQuery](http://stackoverflow.com/q/497802/1316573) – Daniel Mar 08 '16 at 20:59
  • Hey Daniel,That worked! Thanks. So much to learn. – JimiC Mar 08 '16 at 21:17

0 Answers0