在updatepanel回发后,外部.js文件或.css文件未重新加载

时间:2019-02-06 20:15:05

标签: javascript jquery html css

我有一个UpdatePanel,其中包含4个html select输入(下拉列表)和一些全部使用外部.js文件和.css文件的文本输入。

在部分回发UpdatePanel之后,文本输入非常有用,而下拉列表则无效。

我在UpdatePanel中有一个复选框,选中该复选框时,它将对UpdatePanel进行回发,从上一页获取一些信息,然后填写输入。

发生这种情况时,下拉列表将丢失其所有CSS样式。使用IE中的开发人员工具查看该文件后,不再使用下拉菜单中的.css文件。

我不太确定部分回发后没有重新加载什么。经过大约一天的研究,我对如何解决此问题感到困惑。看来这将是一个简单的修复,我想我只是没有足够的经验来知道有关该主题的其他文章在谈论什么。

我看过PageRequestManager,document.ready等...我只是不知道所有这些意味着什么,也不知道将其放在HTML或VB代码中的位置。

从更新面板回发后如何保留所有样式?任何帮助,将不胜感激。这是我正在使用的东西:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Plaintiff2.aspx.vb" Inherits="Small_Claims_EFiling.Plaintiff2" %>

<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Multi-Level Push Menu - Demo 3</title>
        <meta name="description" content="Multi-Level Push Menu: Off-screen navigation with multiple levels" />
        <meta name="keywords" content="multi-level, menu, navigation, off-canvas, off-screen, mobile, levels, nested, transform" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico">
        <link rel="stylesheet" type="text/css" href="css/normalize2.css" />
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/icons.css" />
        <link rel="stylesheet" type="text/css" href="css/component.css" />
        <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato|Quicksand'>
        <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> 

        <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.2/chosen.min.css'>
        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.min.css'>
        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>

        <script src="js/modernizr.custom.js"></script>
</head>
<body>
<form id="Form1" runat="server">
    ...A bunch of code goes here that is working fine...

    <asp:ScriptManager ID="ScriptManager1" runat="server" >
                        </asp:ScriptManager>

                         <asp:UpdatePanel ID="upAddressPanel" runat="server">
                            <ContentTemplate>                          
                                 <table>
                                    <tr>
                                        <td></td>
                                        <td></td>
                                        <td><div class="boxes">

                                                <label> 
                                                <asp:CheckBox ID="chkSameAdd" runat="server" Text="Check if same address as Plaintiff #1" OnCheckedChanged="chkSameAdd_CheckedChanged" AutoPostBack="false"/>
                                                </label>

                                            &nbsp;</div>                                                
                                        </td>
                                    </tr>
                                 </table>
                                 <table>
                                    <tr>
                                        <td class="rowlabel" style="width: 132px">
                                            <span style="position:relative; top: 15px">Address Type:</span>
                                        </td>
                                        <td style="width:30px"></td>
                                        <td>
                                            <div class="chosen-wrapper" data-js="custom-scroll">
                                                <select id="AddTypeP2" runat="server" class="chosen-select" data-placeholder="Address Type">
                                                    <option></option>
                                                    <option>Business</option>
                                                    <option>Contested Property Address</option>
                                                    <option>Employment</option>
                                                    <option>Firm</option>
                                                    <option>Home</option>
                                                    <option>Homeless</option>
                                                    <option>Mailing</option>
                                                    <option>Relative</option>
                                                </select>
                                            </div>
                                        </td>
                                    </tr>
                                 </table>
                                 <table>
                                    <tr>
                                        <td class="rowlabel" style="width: 100px">
                                            Address:
                                        </td>
                                        <td style="width:30px"></td>
                                        <td>
                                            <div class="group">
                                                <input id="addressP2" runat="server" class="text" type="text" style="width:300px" required>
                                                <span class="highlight"></span>
                                                <span class="bar" style="width:300px"></span>
                                                <label class="textlabel">Address 1</label>
                                            </div>
                                        </td>
                                        <td style="width:30px"></td>
                                        <td>
                                            <div class="group">
                                                <input id="address2P2" runat="server" class="text" type="text" style="width:300px" required="false">
                                                <span class="highlight"></span>
                                                <span class="bar" style="width:300px"></span>
                                                <label class="textlabel">Address 2</label>
                                            </div>
                                        </td>
                                    </tr>
                                 </table>
                                 <table>
                                    <tr>
                                        <td class="rowlabel" style="width: 120px">
                                            City / County:
                                        </td>
                                        <td style="width:30px"></td>
                                        <td>
                                            <div class="group">
                                                <input id="cityP2" runat="server" class="text" type="text" required>
                                                <span class="highlight"></span>
                                                <span class="bar"></span>
                                                <label class="textlabel">City</label>
                                            </div>
                                        </td>
                                        <td style="width:30px"></td>
                                        <td>
                                            <div class="chosen-wrapper" data-js="custom-scroll" style="position:relative; top:-13px">
                                                <select id="countyP2" runat="server" class="chosen-select" data-placeholder="County">
                                                    <option></option>
                                                    <option>Apache</option>
                                                    <option>Cochise</option>
                                                    <option>Coconino</option>
                                                    <option>Gila</option>
                                                    <option>Graham</option>
                                                    <option>Greenlee</option>
                                                    <option>La Paz</option>
                                                    <option>Maricopa</option>
                                                    <option>Mohave</option>
                                                    <option>Navajo</option>
                                                    <option>Other - Non AZ</option>
                                                    <option>Pima</option>
                                                    <option>Pinal</option>
                                                    <option>Santa Cruz</option>
                                                    <option>Unknown</option>
                                                    <option>Yavapai</option>
                                                    <option>Yuma</option>
                                                </select>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                                <!-- State -->
                                <table>
                                    <tr>
                                        <td class="rowlabel" style="width: 132px">
                                            State / Zip:
                                        </td>
                                        <td style="width:30px"></td>
                                        <td>
                                            <div class="chosen-wrapper" data-js="custom-scroll" style="position:relative; top:-13px">
                                                <select id="stateP2" runat="server" class="chosen-select" data-placeholder="State">
                                                ...Options are States (don't 
                                                  need to list) </select>
                                             </div>
                                        </td>
                                        <td style="width:30px"></td>
                                        <td>
                                            <div class="group">
                                                <input id="zipP2" runat="server" class="text" type="text" required>
                                                <span class="highlight"></span>
                                                <span class="bar"></span>
                                                <label class="textlabel">Zip</label>
                                            </div>
                                        </td>
                                    </tr>
                                </table>

                                <table>
                                    <tr>
                                        <td class="rowlabel" style="width: 132px">
                                            Country:
                                        </td>
                                        <td style="width:30px"></td>
                                        <td>
                                            <div class="chosen-wrapper" data-js="custom-scroll" style="position:relative; top:-13px; width: 300px">
                                                <select id="countryP2" runat="server" class="chosen-select" data-placeholder="Country">
                                                ...Options are a bunch of 
                                                countries (don't need to 
                                                list) </select>
                                             </div>
                                        </td>
                                    </tr>
                                </table>

                            </ContentTemplate>
                                    <Triggers>
                                        <asp:AsyncPostBackTrigger ControlID="chkSameAdd" EventName="CheckedChanged"/>
                                    </Triggers>
                        </asp:UpdatePanel>

</form>

*These are all of the .js files I'm using.  The last 3 are the ones the drop downs use.*

<script src="js/classie.js"></script>
    <script src="js/mlpushmenu.js"></script>
    <script>
        new mlPushMenu(document.getElementById('mp-menu'), document.getElementById('trigger'));
    </script>
    <script>
        (function () {
            // trim polyfill : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
            if (!String.prototype.trim) {
                (function () {
                    // Make sure we trim BOM and NBSP
                    var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
                    String.prototype.trim = function () {
                        return this.replace(rtrim, '');
                    };
                })();
            }

            [ ].slice.call(document.querySelectorAll('input.input__field')).forEach(function (inputEl) {
                // in case the input is already filled..
                if (inputEl.value.trim() !== '') {
                    classie.add(inputEl.parentNode, 'input--filled');
                }

                // events:
                inputEl.addEventListener('focus', onInputFocus);
                inputEl.addEventListener('blur', onInputBlur);
            });

            function onInputFocus(ev) {
                classie.add(ev.target.parentNode, 'input--filled');
            }

            function onInputBlur(ev) {
                if (ev.target.value.trim() === '') {
                    classie.remove(ev.target.parentNode, 'input--filled');
                }
            }
        })();
    </script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
    <script src="js/index.js"></script>
    <script src='https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js'></script>
    <script src='https://cdn.rawgit.com/kybarg/mdl-selectfield/mdl-menu-implementation/mdl-selectfield.min.js'></script>

*These are the drop down .js files.*
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.js'></script>
    <script src="js/index2.js"></script>

   </body>
</html>

页面后面的我的VB代码:

Imports System
Imports System.Object
Imports System.Web.UI.Control
Imports System.Web.UI.HtmlControls.HtmlControl
Imports System.Web.UI.HtmlControls.HtmlInputControl
Imports System.Web.UI.HtmlControls.HtmlInputFile
Imports System.Collections
Imports System.Collections.Generic
Imports System.Linq
Imports System.ComponentModel
Imports System.Data
Imports System.Drawing
Imports System.Text
Imports System.Windows.Forms
Imports System.Web.UI.WebControls
Imports System.IO
Imports System.Net
Imports System.Net.Mail
Imports JCAgaveCommonCode.clsCommonCode

Public Class Plaintiff2
    Inherits System.Web.UI.Page

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub

    Protected Sub chkSameAdd_CheckedChanged(sender As Object, e As EventArgs) Handles chkSameAdd.CheckedChanged

        Dim P2AddressType As String = CType(Session.Item("AddressType"), String)
        Dim P2Address1 As String = CType(Session.Item("Address1"), String)
        Dim P2Address2 As String = CType(Session.Item("Address2"), String)
        Dim P2cityName As String = CType(Session.Item("City"), String)
        Dim P2countyName As String = CType(Session.Item("County"), String)
        Dim P2stateName As String = CType(Session.Item("State"), String)
        Dim P2zipCode As String = CType(Session.Item("Zip"), String)
        Dim P2countryName As String = CType(Session.Item("Country"), String)

        If chkSameAdd.Checked Then

            For Each b As ListItem In AddTypeP2.Items
                If b.Text = P2AddressType Then
                    AddTypeP2.Value = b.Text
                End If
            Next

            addressP2.Value = P2Address1
            address2P2.Value = P2Address2
            cityP2.Value = P2cityName

            For Each c As ListItem In countyP2.Items
                If c.Text = P2countyName Then
                    countyP2.Value = c.Text
                End If
            Next

            For Each d As ListItem In stateP2.Items
                If d.Text = P2stateName Then
                    stateP2.Value = d.Text
                End If
            Next

            zipP2.Value = P2zipCode

            For Each f As ListItem In countryP2.Items
                If f.Text = P2countryName Then
                    countryP2.Value = f.Text
                End If
            Next

        End If

    End Sub

End Class    

此代码可以正常工作,但是我是否在Page_Load中缺少某些内容?我在其他一些文章中也看到了很多,但是我不确定那是他们在谈论的地方。

再次,我们将不胜感激!非常感谢!

0 个答案:

没有答案