Почему этот скрипт не запускается с главной страницы? - PullRequest
Новая
       16

Почему этот скрипт не запускается с главной страницы?

0 голосов
/ 25 марта 2009

У меня есть страница, связанная с главной страницей. На главной странице я помещаю ссылки css в раздел head и помещаю тег сценария jquery и сценарий, который содержит функцию для переключения сетки, но когда она не работает. Похоже, это даже не вызывает showhide, когда я нажимаю на элемент.

Вот фрагмент главной страницы: 

<head runat="server">
<title></title>
<link href="MainLayout.css" rel="stylesheet" type="text/css" />
<link href="ajaxtab.css" rel="stylesheet" type="text/css" />
<link href="dialog.css" rel="stylesheet" type="text/css" />
<link href="grid.css" rel="stylesheet" type="text/css" />
<link href="pager.css" rel="stylesheet" type="text/css" />
<link href="subgrid.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

<script type="text/javascript">
      //master: id of div element that contains the information about master data
      //details: id of div element wrapping the details grid
      function showhide(master, detail) {
          //First child of master div is the image
          var src = $(master).children()[0].src;
          //Switch image from (+) to (-) or vice versa.
          if (src.endsWith("plus.png"))
              src = src.replace('plus.png', 'minus.png');
          else
              src = src.replace('minus.png', 'plus.png');

          //Set new image
          $(master).children()[0].src = src;

          //Toggle expand/collapse                   
          $(detail).slideToggle("normal");
      }
</script>
<asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>
</head>

Вот div, который содержит функцию showhide в событии onclick на странице aspx: 

<div class="searchgroup" 
id='<%#String.Format("master{0}",Container.DataItemIndex)%>'
onclick='showhide(<%#String.Format("\"#master{0}\"",Container.DataItemIndex)%>
,
<%#String.Format("\"#detail{0}\"",Container.DataItemIndex) %>)'>
<asp:Image ID="imgCollapsible" 
           CssClass="first" 
           ImageUrl="plus.png" 
           Style="margin-right: 5px;"
           runat="server" />

<span class="searchheader"><%#Eval("Business")%></span>
</div>

Вот HTML, который он генерирует для основного и подробного div: 

//master div
<div class="searchgroup"   
     id='master0'                                                     
     onclick='showhide("#master0","#detail0")'>

<img id="ctl00_ContentPanel_gvMaster_ctl02_imgCollapsible" 
     class="first" src="plus.png" 
     style="border-width:0px;margin-right: 5px;" />
     <span class="searchheader">ABC</span>
</div>

//details div
<div id='detail0' class="searchdetail">
<div>
<table class="searchgrid"
       id="ctl00_ContentPanel_gvMaster_ctl02_gvDtails">
<tr>
<th>Status</th>
<tr class="searchrow">
<td>2</td>
</tr>
</table>
</div>
</div>

Я не мог заставить JQuery работать, и у меня не хватало времени, поэтому сейчас я решил использовать разборную панель экстендера из набора инструментов управления ajax. Когда у меня будет время, я буду исследовать проблему JQuery. Спасибо за все ваши предложения. Если у кого-то есть еще, пожалуйста, дайте мне знать.

Ответы [ 4 ]

1 голос
/ 25 марта 2009

Ваш javascript выдает ошибку в src.endsWith ("plus.png"), потому что в js нет встроенной функцииndsWith. замените его на src.substr (-8) == "plus.png" вместо этого, и это сработает: 

<script type="text/javascript">
      //master: id of div element that contains the information about master data
      //details: id of div element wrapping the details grid
      function showhide(master, detail) {
          //First child of master div is the image
          var src = $(master).children()[0].src;
          //Switch image from (+) to (-) or vice versa.
          if (src.substr(-8) == "plus.png")
              src = src.replace('plus.png', 'minus.png');
          else
              src = src.replace('minus.png', 'plus.png');

          //Set new image
          $(master).children()[0].src = src;

          //Toggle expand/collapse                   
          $(detail).slideToggle("normal");
      }
</script>

РЕДАКТИРОВАТЬ - Рабочий пример:

MasterPage.master 

<%@ Master Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
          //master: id of div element that contains the information about master data
          //details: id of div element wrapping the details grid
          function showhide(master, detail) {
              //First child of master div is the image
              var src = $(master).children()[0].src;
              //Switch image from (+) to (-) or vice versa.
              if (src.substr(-8) == "plus.png")
                  src = src.replace('plus.png', 'minus.png');
              else
                  src = src.replace('minus.png', 'plus.png');

              //Set new image
              $(master).children()[0].src = src;

              //Toggle expand/collapse                   
              $(detail).slideToggle("normal");
          }
    </script>

    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

Default2.aspx 

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <div class="searchgroup" id='master0' onclick='showhide("#master0","#detail0")'>

    <img id="ctl00_ContentPanel_gvMaster_ctl02_imgCollapsible" class="first" src="plus.png" style="border-width:0px;margin-right: 5px;" />
     <span class="searchheader">ABC</span>
    </div>

    <div id='detail0' class="searchdetail">
        <div>
            <table class="searchgrid"
               id="ctl00_ContentPanel_gvMaster_ctl02_gvDtails">
                <tr>
                    <th>Status</th>
                </tr>
                <tr class="searchrow">
                    <td>2</td>
                </tr>
            </table>
        </div>
    </div>
</asp:Content>
0 голосов
/ 03 июня 2009

Просто подумайте, если вы щелкнете правой кнопкой мыши по источнику просмотра в браузере, правильно ли вы увидите путь jquery? мой опыт подсказывает, что вам нужно разрешать ссылки javascript на главных страницах (это прекрасно работает для css, но не для js-файлов) 

<script src="<%= ResolveUrl("~") %>jquery-1.3.2.min.js" type="text/javascript"></script>
0 голосов
/ 25 марта 2009

Вы можете проверить правильность пути jquery на вашей странице (той, которая использует эту главную страницу).

Чтобы быть уверенным, что при вызове showhide () вы можете использовать Firebug в Firefox с точкой останова в функции.

Кроме того, это даст вам больше подсказок для отладки и угадывания, что идет не так.

Код, кажется, мне тоже подходит.

0 голосов
/ 25 марта 2009

«Похоже, это даже не вызов showhide, когда я нажимаю на элемент». Если вы упростите функцию с помощью только функции alert (), она сработает.

Код выглядит хорошо для меня. Возможно, есть какое-то несоответствие идентификатора.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...