2010-01-22 4 views
0

Im пытается показать и скрыть элемент div с помощью метода jquery toggle. У меня есть linkbutton, который onclick вызывает javascript на странице. При нажатии кнопки link страница выполняет обратную передачу, даже когда я объявила функцию javascript для возврата false. Кто-то понял, как это решить?Почему мой jquery не выполняется?

function toggleDiv(){ 
     $('#app').toggle("fast"); 
    } 
</script> 

<form runat="Server"> 

    <asp:LinkButton ID="LinkButton1" runat="Server" OnClientClick="toggleDiv(); return false;" Text="Show/Hide"></asp:LinkButton> 

    <div id="app" style="background-color:Fuchsia; width:900px; height:300px;"> 
      <p>jQuery Example </p> 
    </div> 

</form> 
+1

, где сценарий открытия тега , где включает файл Jquery – Gabe

+0

Это, вероятно, больше проблемы в рамках ASP.NET MVC вы используете Я добавил, что тег так, чтобы вы получите лучшее освещение. – BalusC

ответ

0

Я хотел бы сделать это следующим образом:

$('#LinkButton1').click(function(e) { 
    $('#app').toggle('fast'); 
    e.preventDefault(); 
}); 

Тогда просто удалить OnClientClick событие. Должно быть немного легче и работать на вас.

+1

.NET будет переписывать ID на что-то загадочное на стороне клиента –

+0

@Mike: Также для простых HTML-элементов ванили? Sun JSF также делает подобное, но только для HTML, созданного компонентами. – BalusC

2

переписать ваши JS следующему, и он должен работать нормально

<script type="text/javascript"> 
    $('#<%= LinkButton1.ClientID %>').click(function(e) { 
     $('#app').toggle("fast"); 
     e.preventDefault(); 
    }); 
</script> 

<form runat="Server"> 
    <asp:LinkButton ID="LinkButton1" runat="Server" Text="Show/Hide"></asp:LinkButton> 
    <div id="app" style="background-color:Fuchsia; width:900px; height:300px;"> 
     <p>jQuery Example </p> 
    </div> 
</form> 
+0

Кажется, что работает, но страница все еще делает обратную передачу и отображает div снова. – elias

0

вы добавить готовый документ в начале вас ваш код? Поскольку вы используете повторно, используя управление сервером Asp, элементы управления называются .net, и, возможно, linkbutton1 не был отложен как linkbutton1 id. Я хотел бы написать код так:

$(function(){ 
     $('a[id$=LinkButton1]').click(function() { 
     $('#app').toggle("fast"); 
     return false; 
    }); 

}); 
0

Ссылка вероятно вызывает постбэк, который Переустановка в DIV видимым. Самый простой способ исправить это - вернуть false из вашей функции.

<script type="text/javascript"> 
$('#<%= LinkButton1.ClientID %>').click(function(e) { 
    $('#app').toggle("fast"); 
    return false; 
}); 
</script> 
+0

Я думал, что возврат false поможет, но, к сожалению, это не так. Жесткая проблема. – elias

0

Если вид html-кода выглядит так. Обратите внимание, «JavaScript: __ doPostBack

<a id="btn" href="javascript:__doPostBack('btn','')">Show/Hide</a> 

<div id="app" style="background-color:Fuchsia; width:900px; height:300px;"> 
<p>jQuery Example </p> 
</div> 
0

Я считаю, что проблема в том, что вы кладете операторы Javascript в том же тег сценария в качестве тега, который включает в себя JQuery

Я изменил код, чтобы это и решить эту проблему. для меня:?.

<script src="scripts/jquery-1.4.min.js" type="text/javascript"></script> 
    <script type="text/javascript" language="javascript"> 
     $(document).ready(function() { 
      $('#<%= LinkButton1.ClientID %>').click(function(e) { 
       $('#app').toggle("fast"); 
       return false; 
      }); 
     }); 
    </script> 
Смежные вопросы