Tak więc we wszystkich moich nieudanych próbach uruchomienia jQueryUI wypróbowałem ten przykład tutaj po pobraniu motyw ze strony jQueryUI.

A oto mój kod patrzący na ten przykład w powyższym linku na mojej stronie asp.net mvc.

<link type="text/css" href="<%= Url.Content("~/Scripts/jquery-ui/css/smoothness/jquery-ui-1.8.17.custom.css")%>" rel="stylesheet" />    
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui/js/jquery-1.7.1.min.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui/js/jquery-ui-1.8.17.custom.min.js")%>"></script>



<script>

$('#dialog_link').click(function(){
    $('#Dialog').dialog('open');  
    return false;
});


</script>

<p id="dialog_link">Open Dialog</p> 


<div id="Dialog" title="Dialog title!">
This content shown within dialog...

</div>

Po wciśnięciu F5 spodziewałbym się zobaczyć tekst, który można kliknąć, który po kliknięciu wywoła modalne okno dialogowe z przyciskiem [x], aby je zamknąć i wrócić do głównego okna. Jednak widzę to podczas ładowania strony,

screenshot of mvc application

Gdzie tekst „otwarte okno dialogowe” nie reaguje na zdarzenia kliknięcia, a rzekome „okno modalne” jest już widoczne w postaci zwykłego ciągu i bez żadnego formatowania. Więc gdzie się podziała cała magia jQueryUI? Coś nie tak w moich poprawnych skryptach linkujących? Całkiem zagubiony. Proszę pomóż..

Edytuj Ten dokładnie ten sam kod działa w czystym trybie html w innym pliku. kiedy skopiuję ten kod do mojej strony asp.net mvc w obrębie tagów content, pojawia się błąd javascript w nieopisanym wierszu!

0
user20358 23 luty 2012, 21:48

2 odpowiedzi

Najlepsza odpowiedź

Po prostu wyjmij 'open' ze swojego $('#Dialog').dialog('open'); i możesz iść.

Edycja: dodałem ten jsFiddle z twoim kodem jako przykład:

http://jsfiddle.net/DoomHamster/LhJsL/1/

Ponadto nie musisz „zwracać false” po kliknięciu elementu bez domyślnego zdarzenia kliknięcia.

EDIT: Z twojego komentarza poniżej podejrzewam, że masz problemy z ładowaniem jQuery i jQueryUI w pierwszej kolejności. Spróbuj zastąpić swój skrypt i linki css następującymi jako test, aby wyeliminować problemy ze ścieżką:

<link type="text/css" rel="Stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
2
Bradley Mountford 24 luty 2012, 00:15

Spróbuj tego

$(function()
{
    $('#dialog_link').click(function(){
    $('#Dialog').dialog();  
   return false;
    });
})
1
MikeSW 23 luty 2012, 21:58