JQuery не работает в aspx-странице с Masterpage - PullRequest
Новая
       3

JQuery не работает в aspx-странице с Masterpage

0 голосов
/ 08 февраля 2012

Я сделал этот пример, и он отлично работает на простой веб-странице aspx. Я использую Visual Studio 2010.

Head-часть: 

<title>Show/hide element</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $('#CheckBoxShowHide').click(function () {
            $("#ShowHideElement").slideToggle();
        });
    });
</script>

<style type="text/css">
    #ShowHideElement
    {
        width:400px;
        height:100px;
        background-color:Aqua;
    }
</style>

Часть тела: 

<form id="form1" runat="server">

    <asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
    <div id="ShowHideElement">
        This is the element for show/hide
    </div>

</form>

Когда у меня есть главная страница и тот же код на дочерней веб-странице, JQuery не работает. Загрузка файла JQuery Javascript завершается неудачно. Дочерняя страница и главная страница находятся в одной папке. Если я добавлю код на главную страницу, он будет работать нормально, но я также хочу JQuery на дочерней странице. Пожалуйста, помогите мне.

Ответы [ 4 ]

2 голосов
/ 08 февраля 2012

Я также вижу другую проблему, вы пытаетесь получить идентификатор флажка на основе его идентификатора сервера, а не ClientID.Как только элемент управления asp был представлен клиенту, его идентификатор изменяется.Попробуйте следующий код: 

<title>Show/hide element</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $('#<%=CheckBoxShowHide.ClientID%>').click(function () {
            $("#ShowHideElement").slideToggle();
        });
    });
</script>

<style type="text/css">
    #ShowHideElement
    {
        width:400px;
        height:100px;
        background-color:Aqua;
    }
</style>

Часть тела: 

<form id="form1" runat="server">

    <asp:CheckBox ID="CheckBoxShowHide" runat="server" Text="Show/hide" />
    <div id="ShowHideElement">
        This is the element for show/hide
    </div>

</form>

Единственное, что я изменил, - следующая строка: 

$('#<%=CheckBoxShowHide.ClientID%>').click(function () {

Надеюсь, это поможет.

1 голос
/ 08 февраля 2012

Если вы уверены, что ваша страница загружает jQuery, используйте абсолютный URL на главной странице для ссылки на библиотеку jQuery.

1 голос
/ 08 февраля 2012

Если jQuery находится на вашей главной странице, он будет работать на вашей дочерней странице.

Мастер <head>

<head>
     <script type="text/javascript" src="js/jquery.js"></script>
</head>

Ребенок <head>

<head>
    <script type="text/javascript">
        $(document).ready(function () {
             //Do Child jQuery Stuff here....
        });
    </script>
<head>

Если у вас возникли проблемы, единственное, что нужно проверить, - убедиться, что ваш путь к файлу jquery указан правильно. (т.е. может быть, это должно быть ../js/jquery.js)

Используйте это, чтобы убедиться, что это не проблема, если другая вещь, которую я предложил, не работает:

Для вашей мастер-страницы <head>: 

<head>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>

Или (если вы хотите разместить его) 

<head>
     <script type="text/javascript" src='<%=ResolveURL("~/js/jquery.js")%>'></script>
</head>

Где ~ / - ваш корень.

0 голосов
/ 08 февраля 2012

Вы можете просто разместить ссылку на библиотеку JQuery в разделе HEAD главной страницы. Когда страница запускается, она сгенерирует контент HTML для главной страницы со ссылкой в ​​разделе HEAD, после чего страница контента сможет сделать пользователя библиотекой JQuery. Я знаю, что у нас была проблема с тем, как делалась ссылка. Может быть, попробуйте вместо ссылки в заголовке главной страницы, как это: 

<script type="text/javascript" src='<% = ResolveURL("~/js/jquery.js") %>' ></script>

<%%> - это способ встроенного кода на стороне сервера при загрузке страницы, поэтому страница будет вводить правильный src, учитывая расположение URL.

...