asked on

JavaScript that runs when the View loads.

I have Javascript functions to set Hidden Form fields when a drop-down list changes and this works correctly. Now I need to set those fields when the page loads as well.

My View:

<script src="~/Content/classes/Report.js"></script>

<script type="text/javascript">
    var Report = new ReportClass();
    Report.init();
    
</script>

    <div class="row">
        @using (Html.BeginForm("Report", "Location", FormMethod.Post))
        {
            <div class="col-xs-3">
                @Html.DropDownList("System", sl.getSystemList(), new
           {
               @type = "drop",
               @id = "System",
               @onchange= "setReportFilter()"
           })
            </div>

            <div class="col-xs-2 ">
                <button type="submit" class="btn btn-info">
                    Filter
                </button>
            </div>

        }

        <div class="col-xs-2 col-xs-offset-3">

            @using (Html.BeginForm("ExportReport", "Location", FormMethod.Post, new
            {
                @target = "_blank",

            }))

            {

                @Html.Hidden("ReportFilter")

                <button id="exportBtn" type="submit" class="btn btn-info" style="float:right">
                    Export To Excel
                </button>
            }

        </div>

    </div>

<script type="text/javascript">
    function setReportFilter() {

        var sys = document.getElementById("System");
        var sysSelection = sys.options[sys.selectedIndex].text;
        document.getElementById("ReportFilter").value = sysSelection;

    }

</script>

Open in new window

I have the followoing JavaScript Class. I can't get this to work although I thought using init would set the values when the page loads?

function ReportClass() {
    this.system;
    this.systemFilter;

    var sys = document.getElementById("System");
    var sysSelection = sys.options[sys.selectedIndex].text;
    document.getElementById("ReportFilter").value = sysSelection;

}

       
ReportClass.prototype = {


    //Maps variables to the correct field
    init: function () {
        var sys = document.getElementById("System");
        var sysSelection = sys.options[sys.selectedIndex].text;
        document.getElementById("ReportFilter").value = sysSelection;


    }

};


appendPrototype(ReportClass);

Open in new window

leakim971

Use an alert to be sure the code work
confirm you egt three alert, check the field is found and the value set

function ReportClass() {
    this.system;
    this.systemFilter;

    var sys = document.getElementById("System");
    var sysSelection = sys.options[sys.selectedIndex].text;
    document.getElementById("ReportFilter").value = sysSelection;

}

       
ReportClass.prototype = {


    //Maps variables to the correct field
    init: function () {
alert("1 - init start");
        var sys = document.getElementById("System");
        var sysSelection = sys.options[sys.selectedIndex].text;
alert("2 - going to try to update the value, the field is " + (document.getElementById("ReportFilter")?"":"not") + " found");
        document.getElementById("ReportFilter").value = sysSelection;
alert("3 - no error, the value set is '" + sysSelection + "'" );

    }

};


appendPrototype(ReportClass);

Open in new window

Crystal Rouse

ASKER

I'm not getting any alerts. Really strange.

leakim971

no error in the debugger console?

Crystal Rouse

ASKER

Actually, yes. Cannot read property 'options' of null at line 8:
var sysSelection = sys.options[sys.selectedIndex].text;

Thanks!

ASKER CERTIFIED SOLUTION

Crystal Rouse

membership