Jakiej wartości „href” należy użyć w przypadku łączy JavaScript, „#” lub „javascript: void (0)”?

Poniżej przedstawiono dwie metody budowania łącza, którego jedynym celem jest uruchomienie kodu JavaScript. Co jest lepsze pod względem funkcjonalności, szybkości ładowania strony, celów sprawdzania poprawności itp.?

function myJsFunc() {
    alert("myJsFunc");
}

<a href="#" onclick="myJsFunc();">Run JavaScript Code</a>

lub

function myJsFunc() {
    alert("myJsFunc");
}

 <a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

Używam javascript:void(0).

Trzy powody. Zachęcanie do korzystania z #zespołu programistów nieuchronnie prowadzi do tego, że niektórzy używają wartości zwracanej funkcji o nazwie tak:

function doSomething() {
    //Some code
    return false;
}

Ale potem zapominają używać return doSomething()w kliknięciu i po prostu używać doSomething().

Drugim powodem unikania #jest to, że finał return false;nie zostanie wykonany, jeśli wywoływana funkcja zgłosi błąd. Dlatego programiści muszą również pamiętać, aby odpowiednio obsługiwać każdy błąd w wywoływanej funkcji.

Trzecim powodem są przypadki, w których onclickwłaściwość zdarzenia jest przypisywana dynamicznie. Wolę mieć możliwość wywoływania funkcji lub przypisywania jej dynamicznie, bez konieczności kodowania funkcji specjalnie dla jednej metody dołączania lub innej. Stąd moje onclick(lub cokolwiek) znaczniki HTML wyglądają tak:

onclick="someFunc.call(this)"

LUB

onclick="someFunc.apply(this, arguments)"

Używanie javascript:void(0)pozwala uniknąć wszystkich powyższych bólów głowy i nie znalazłem żadnych przykładów wad.

Więc jeśli jesteś samotnym programistą, możesz wyraźnie dokonać własnego wyboru, ale jeśli pracujesz jako zespół, musisz określić:

Użyj href="#", upewnij się, że onclickzawsze zawiera return false;na końcu, że dowolna wywoływana funkcja nie zgłasza błędu, a jeśli funkcja zostanie dołączona dynamicznie do onclickwłaściwości, upewnij się, że nie zwróci ona błędu false.

LUB

Posługiwać się href="javascript:void(0)"

Drugi jest wyraźnie znacznie łatwiejszy do komunikowania się.

Ani.

Jeśli możesz mieć rzeczywisty adres URL, który ma sens, użyj go jako HREF. Onclick nie uruchomi się, jeśli ktoś kliknie link środkowy, aby otworzyć nową kartę lub jeśli ma wyłączoną obsługę JavaScript.

Jeśli nie jest to możliwe, należy przynajmniej wstrzyknąć tag zakotwiczony do dokumentu za pomocą JavaScript i odpowiednich procedur obsługi zdarzeń kliknięcia.

Zdaję sobie sprawę, że nie zawsze jest to możliwe, ale moim zdaniem należy dążyć do opracowania dowolnej publicznej strony internetowej.

Sprawdź dyskretny JavaScript i ulepszenia progresywne (obie Wikipedia).

Robienie <a href="#" onclick="myJsFunc();">Link</a>lub <a href="javascript:void(0)" onclick="myJsFunc();">Link</a>cokolwiek innego, co zawiera onclickatrybut - było w porządku pięć lat temu, choć teraz może to być złą praktyką. Dlatego:

1. Promuje praktykę natrętnego JavaScript - który okazał się trudny do utrzymania i trudny do skalowania. Więcej na ten temat w dyskretnym JavaScript .

2. Spędzasz czas na pisaniu niewiarygodnie przesadnego kodu - co ma bardzo małą (jeśli w ogóle) korzyść dla twojej bazy kodu.

3. Istnieją teraz lepsze, łatwiejsze i łatwiejsze w utrzymaniu i skalowalne sposoby osiągnięcia pożądanego rezultatu.

Dyskretny sposób obsługi JavaScript

Po prostu nie mam hrefatrybutu! Każdy dobry reset CSS zająłby się brakującym domyślnym stylem kursora, więc nie jest to problemem. Następnie dołącz swoją funkcjonalność JavaScript za pomocą wdzięcznych i dyskretnych najlepszych praktyk - które są łatwiejsze w utrzymaniu, ponieważ logika JavaScript pozostaje w JavaScript, a nie w znacznikach - co jest niezbędne, gdy zaczynasz opracowywać aplikacje JavaScript na dużą skalę, które wymagają podzielenia logiki na komponenty i szablony w blackboxie. Więcej na ten temat w Architekturze aplikacji JavaScript na dużą skalę

Prosty przykład kodu

// Cancel click event
$('.cancel-action').click(function(){
    alert('Cancel action occurs!');
});

// Hover shim for Internet Explorer 6 and Internet Explorer 7.
$(document.body).on('hover','a',function(){
    $(this).toggleClass('hover');
});

a { cursor: pointer; color: blue; }
a:hover,a.hover { text-decoration: underline; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cancel-action">Cancel this action</a>

Przykład Backbone.js w czarnej skrzynce

Skalowalny przykład komponentu Backbone.js w postaci czarnej skrzynki - zobacz ten działający przykład jsfiddle tutaj . Zwróć uwagę, w jaki sposób stosujemy dyskretne praktyki JavaScript, aw niewielkiej ilości kodu mamy komponent, który może być wielokrotnie powtarzany na stronie bez skutków ubocznych lub konfliktów między różnymi instancjami komponentu. Niesamowity!

Notatki

• Pominięcie hrefatrybutu aelementu spowoduje, że element nie będzie dostępny za pomocą tabnawigacji kluczowej. Jeśli chcesz, aby te elementy były dostępne za pomocą tabklucza, możesz ustawić tabindexatrybut lub buttonzamiast tego użyć elementów. Możesz łatwo stylizować elementy przycisków, aby wyglądały jak normalne linki, jak wspomniano w odpowiedzi Tracker1 .

• Pominięcie hrefatrybutu aelementu spowoduje, że Internet Explorer 6 i Internet Explorer 7 nie przyjmą a:hoverstylu, dlatego dodaliśmy prostą podkładkę JavaScript, aby to osiągnąć a.hover. Co jest całkowicie w porządku, ponieważ jeśli nie masz atrybutu href i nie masz wdzięcznej degradacji, twój link i tak nie będzie działał - i będziesz miał większe problemy do zmartwienia.

• Jeśli chcesz, aby twoja akcja nadal działała z wyłączoną obsługą JavaScript, użyj aelementu z hrefatrybutem, który prowadzi do adresu URL, który wykona akcję ręcznie zamiast przez żądanie Ajax lub cokolwiek innego, co powinno być. Jeśli to robisz, to chcesz upewnić się, że wykonujesz event.preventDefault()wywołanie kliknięcia, aby upewnić się, że kliknięcie przycisku nie powoduje kliknięcia linku. Ta opcja nazywa się wdzięczną degradacją.

'#'zabierze użytkownika z powrotem na górę strony, więc zwykle wybieram void(0).

javascript:; też zachowuje się jak javascript:void(0);

Szczerze nie zasugerowałbym żadnej z nich. Użyłbym stylizowanego <button></button>do tego zachowania.

button.link {
  display: inline-block;
  position: relative;
  background-color: transparent;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: #00f;
  text-decoration: underline;
  font: inherit;
}

<p>A button that looks like a <button type="button" class="link">link</button>.</p>

W ten sposób możesz przypisać swoje kliknięcie. Sugeruję również powiązanie za pomocą skryptu, nie używając onclickatrybutu na znaczniku elementu. Jedyny problem to efekt tekstowy 3D psuedo w starszych IE, którego nie można wyłączyć.

Jeśli MUSISZ użyć elementu A, użyj go javascript:void(0);z powodów już wymienionych.

• Zawsze przechwytuje w przypadku niepowodzenia zdarzenia onclick.
• Nie spowoduje wystąpienia błędnych wywołań ładowania ani nie wyzwoli innych zdarzeń na podstawie zmiany skrótu
• Tag skrótu może powodować nieoczekiwane zachowanie, jeśli kliknięcie spadnie (rzuty po kliknięciu), unikaj go, chyba że jest to odpowiednie zachowanie przejściowe, a chcesz zmienić historię nawigacji.

UWAGA: Możesz zastąpić 0ciąg taki jak, javascript:void('Delete record 123')który może służyć jako dodatkowy wskaźnik, który pokaże, co faktycznie zrobi kliknięcie.

Pierwszy, najlepiej z prawdziwym linkiem do na wypadek, gdyby użytkownik wyłączył JavaScript. Pamiętaj tylko o zwróceniu wartości false, aby zapobiec uruchomieniu zdarzenia kliknięcia, jeśli JavaScript zostanie wykonany.

<a href="#" onclick="myJsFunc(); return false;">Link</a>

Jeśli używasz Angular2, ten sposób działa:

<a [routerLink]="" (click)="passTheSalt()">Click me</a>.

Zobacz tutaj https://stackoverflow.com/a/45465728/2803344

Ani jeśli mnie zapytasz;

Jeśli „link” ma na celu uruchomienie kodu JavaScript, nie kwalifikuje się jako link; raczej fragment tekstu z dołączoną funkcją JavaScript. Polecam użycie <span>tagu z onclick handlerdołączonym do niego i podstawowego CSS, aby naśladować link. Linki są tworzone do nawigacji, a jeśli kod JavaScript nie służy do nawigacji, nie powinien być <a>tagiem.

Przykład:

function callFunction() { console.log("function called"); }

.jsAction {
    cursor: pointer;
    color: #00f;
    text-decoration: underline;
}

<p>I want to call a JavaScript function <span class="jsAction" onclick="callFunction();">here</span>.</p>

Idealnie byłoby to zrobić:

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Lub nawet lepiej, będziesz mieć domyślny link akcji w kodzie HTML i dodasz zdarzenie onclick do elementu dyskretnie przez JavaScript po renderowaniu DOM, zapewniając w ten sposób, że jeśli JavaScript nie jest obecny / wykorzystywany, nie będziesz mieć bezużyteczne programy obsługi zdarzeń, które oszukują kod i potencjalnie zaciemniają (lub przynajmniej odwracają uwagę) rzeczywistą treść.

Używanie #powoduje tylko kilka zabawnych ruchów, więc polecam użyć tego, #selfjeśli chcesz zaoszczędzić na pisaniu JavaScript bla, bla,.

Używam następujących

<a href="javascript:;" onclick="myJsFunc();">Link</a>

zamiast

<a href="javascript:void(0);" onclick="myJsFunc();">Link</a>

Zgadzam się z sugestiami w innym miejscu, mówiącymi, że powinieneś używać zwykłego adresu URL w hrefatrybucie, a następnie wywołać funkcję JavaScript w kliknięciu. Wadą jest to, że automatycznie dodają return falsepo rozmowie.

Problem z tym podejściem polega na tym, że jeśli funkcja nie będzie działać lub wystąpi jakiś problem, łącze stanie się nieskomplikowalne. Zdarzenie Onclick zawsze zwróci false, więc normalny adres URL nie zostanie wywołany.

Istnieje bardzo proste rozwiązanie. Pozwól funkcji powrócić, truejeśli działa poprawnie. Następnie użyj zwróconej wartości, aby określić, czy kliknięcie powinno zostać anulowane, czy nie:

JavaScript

function doSomething() {
    alert( 'you clicked on the link' );
    return true;
}

HTML

<a href="path/to/some/url" onclick="return !doSomething();">link text</a>

Zauważ, że neguję wynik doSomething()funkcji. Jeśli to zadziała, wróci true, więc zostanie zanegowane ( false) i path/to/some/URLnie zostanie wywołane. Jeśli funkcja zwróci false(na przykład przeglądarka nie obsługuje czegoś używanego w funkcji lub coś innego pójdzie nie tak), zostanie to zanegowane truei path/to/some/URLzostanie wywołane.

#jest lepszy niż javascript:anything, ale następujące są jeszcze lepsze:

HTML:

<a href="/gracefully/degrading/url/with/same/functionality.ext" class="some-selector">For great justice</a>

JavaScript:

$(function() {
    $(".some-selector").click(myJsFunc);
});

Zawsze powinieneś dążyć do pełnej wdzięku degradacji (w przypadku, gdy użytkownik nie ma włączonej obsługi JavaScript ... i gdy jest to zgodne ze specyfikacjami i budżetem). Ponadto uważanie za niewłaściwe korzystanie z atrybutów i protokołu JavaScript bezpośrednio w HTML jest uważane za złą formę.

Polecam <button>zamiast tego użyć elementu, zwłaszcza jeśli formant ma wywoływać zmianę danych. (Coś jak POST.)

Jeszcze lepiej, jeśli wstrzykujesz elementy dyskretnie, rodzaj progresywnego ulepszenia. (Zobacz ten komentarz .)

O ile nie wypisujesz linku za pomocą JavaScript (abyś wiedział, że jest włączony w przeglądarce), najlepiej dostarczać odpowiedni link dla osób przeglądających z wyłączoną obsługą JavaScript, a następnie uniemożliwić domyślną akcję linku w swoim kliknięciu moduł obsługi zdarzeń. W ten sposób osoby z włączoną obsługą JavaScript uruchomią tę funkcję, a osoby z wyłączoną obsługą JavaScript przejdą na odpowiednią stronę (lub lokalizację na tej samej stronie) zamiast klikać link i nic się nie dzieje.

Zdecydowanie hash ( #) jest lepszy, ponieważ w JavaScript jest to pseudoschem:

1. zanieczyszcza historię
2. tworzy nową kopię silnika
3. działa w zasięgu globalnym i nie szanuje systemu zdarzeń.

Oczywiście „#” z programem obsługi onclick, który zapobiega domyślnemu działaniu, jest [znacznie] lepszy. Ponadto link, którego jedynym celem jest uruchomienie JavaScript, nie jest tak naprawdę „linkiem”, chyba że wysyłasz użytkownika do jakiejś sensownej kotwicy na stronie (tylko # wyśle ​​na górę), gdy coś pójdzie nie tak. Możesz po prostu symulować wygląd i styl połączenia z arkuszem stylów i całkowicie zapomnieć o href.

Ponadto, w odniesieniu do sugestii cowgod, szczególnie tej: ...href="javascript_required.html" onclick="...To dobre podejście, ale nie rozróżnia scenariuszy z „wyłączoną obsługą JavaScript” i „niepowodzeniem po kliknięciu”.

Zwykle wybieram

<a href="javascript:;" onclick="yourFunction()">Link description</a>

Jest krótszy niż javascript: void (0) i robi to samo.

Użyłbym:

<a href="#" onclick="myJsFunc();return false;">Link</a>

Powody:

1. To sprawia, że hrefproste, wyszukiwarki tego potrzebują. Jeśli użyjesz czegoś innego (np. Łańcucha), może to spowodować 404 not foundbłąd.
2. Gdy kursor myszy znajdzie się nad linkiem, nie pokazuje, że jest to skrypt.
3. Korzystając return false;ze strony, strona nie przeskakuje na górę ani nie łamie backprzycisku.

Wybieram użycie javascript:void(0), ponieważ użycie tego może uniemożliwić kliknięcie prawym przyciskiem, aby otworzyć menu zawartości. Ale javascript:;jest krótszy i robi to samo.

Tak więc, gdy robisz kilka rzeczy JavaScript z <a />tagiem i jeśli również wstawisz href="#", możesz dodać return false na końcu zdarzenia (w przypadku powiązania zdarzenia inline), np .:

<a href="#" onclick="myJsFunc(); return false;">Run JavaScript Code</a>

Możesz też zmienić atrybut href za pomocą JavaScript, np .:

<a href="javascript://" onclick="myJsFunc();">Run JavaScript Code</a>

lub

<a href="javascript:void(0)" onclick="myJsFunc();">Run JavaScript Code</a>

Ale semantycznie wszystkie powyższe sposoby osiągnięcia tego są złe (choć działa dobrze) . Jeśli jakikolwiek element nie jest tworzony do poruszania się po stronie i z którym związane są pewne elementy JavaScript, nie powinien to być <a>tag.

Możesz po prostu użyć <button />zamiast tego do zrobienia rzeczy lub dowolnego innego elementu, takiego jak b, zakres lub cokolwiek, co tam pasuje, zgodnie z twoimi potrzebami, ponieważ możesz dodawać zdarzenia do wszystkich elementów.

Tak, jest jedna korzyść do użytku <a href="#">. Gdy to zrobisz, domyślnie otrzymasz kursor na tym elemencie a href="#". W tym celu myślę, że możesz użyć CSS do tego, cursor:pointer;co również rozwiązuje ten problem.

I na koniec, jeśli wiążesz zdarzenie z samego kodu JavaScript, możesz to zrobić, event.preventDefault()jeśli używasz <a>tagu, ale jeśli nie używasz <a>tagu do tego, masz przewagę, nie „ muszę to zrobić.

Jeśli więc widzisz, lepiej nie używać tagu do tego typu rzeczy.

Nie używaj linków wyłącznie w celu uruchomienia JavaScript.

Użycie href = "#" przewija stronę do góry; użycie void (0) powoduje problemy nawigacyjne w przeglądarce.

Zamiast tego użyj elementu innego niż link:

<span onclick="myJsFunc()" class="funcActuator">myJsFunc</span>

I stylizuj to za pomocą CSS:

.funcActuator { 
  cursor: default;
}

.funcActuator:hover { 
  color: #900;
}

Lepiej byłoby użyć jQuery,

$(document).ready(function() {
    $("a").css("cursor", "pointer");
});

i pomiń oba href="#" i href="javascript:void(0)".

Znacznik zakotwiczenia będzie podobny

<a onclick="hello()">Hello</a>

Wystarczająco proste!

Jeśli używasz AngularJS , możesz użyć następujących opcji:

<a href="">Do some fancy JavaScript</a>

Co nic nie da.

Dodatkowo

• Nie zabierze Cię na górę strony, jak w (#)
  • Dlatego nie musisz jawnie wracać falsez JavaScript
• To jest krótkie, zwięzłe

Jeżeli nie ma href być może nie ma powodu, aby używać tagu kotwicy.

Możesz dołączyć zdarzenia (kliknięcie, najechanie kursorem itp.) Do prawie każdego elementu, więc dlaczego nie użyć po prostu a spanlub adiv ?

A dla użytkowników z wyłączoną obsługą JavaScript: jeśli nie ma rezerwy (na przykład alternatywy href), powinni przynajmniej nie być w stanie zobaczyć tego elementu i wchodzić w interakcje z nim, bez względu na to, czy jest to tag, <a>czy <span>tag.

Zwykle zawsze powinieneś mieć link rezerwowy, aby upewnić się, że klienci z wyłączoną obsługą JavaScript nadal mają pewną funkcjonalność. Ta koncepcja nazywa się dyskretnym JavaScript.

Przykład ... Załóżmy, że masz następujący link wyszukiwania:

<a href="search.php" id="searchLink">Search</a>

Zawsze możesz wykonać następujące czynności:

var link = document.getElementById('searchLink');

link.onclick = function() {
    try {
        // Do Stuff Here        
    } finally {
        return false;
    }
};

W ten sposób osoby z wyłączoną obsługą JavaScript są przekierowywane, search.phppodczas gdy twoi widzowie z JavaScript mają dostęp do twojej rozszerzonej funkcjonalności.

Osobiście używam ich w połączeniu. Na przykład:

HTML

<a href="#">Link</a>

z odrobiną jQuery

$('a[href="#"]').attr('href','javascript:void(0);');

lub

$('a[href="#"]').click(function(e) {
   e.preventDefault();
});

Ale używam tego tylko do zapobiegania przeskakiwaniu strony na górę, gdy użytkownik kliknie pustą kotwicę. Rzadko używam onClick i innych onzdarzeń bezpośrednio w HTML.

Moją sugestią byłoby użycie <span>elementu z classatrybutem zamiast kotwicy. Na przykład:

<span class="link">Link</span>

Następnie przypisz tę funkcję do .linkskryptu owiniętego w treści i tuż przed </body>tagiem lub w zewnętrznym dokumencie JavaScript.

<script>
    (function($) {
        $('.link').click(function() {
            // do something
        });
    })(jQuery);
</script>

* Uwaga: W przypadku dynamicznie tworzonych elementów użyj:

$('.link').on('click', function() {
    // do something
});

W przypadku dynamicznie tworzonych elementów, które są tworzone z dynamicznie tworzonymi elementami, użyj:

$(document).on('click','.link', function() {
    // do something
});

Następnie możesz zaprojektować element span, aby wyglądał jak kotwica z małym CSS:

.link {
    color: #0000ee;
    text-decoration: underline;
    cursor: pointer;
}
.link:active {
    color: red;
}

Oto przykład wyżej wspomnianego jsFiddle .

W zależności od tego, co chcesz osiągnąć, możesz zapomnieć o kliknięciu i po prostu użyć href:

<a href="javascript:myJsFunc()">Link Text</a>

To omija potrzebę zwrotu false. Nie podoba mi się ta #opcja, ponieważ, jak wspomniano, zabierze użytkownika na górę strony. Jeśli masz gdzieś wysłać użytkownika, jeśli nie ma włączonej obsługi JavaScript (co jest rzadkością tam, gdzie pracuję, ale bardzo dobry pomysł), to proponowana metoda Steve'a działa świetnie.

<a href="javascriptlessDestination.html" onclick="myJSFunc(); return false;">Link text</a>

Na koniec możesz użyć, javascript:void(0)jeśli nie chcesz, aby ktokolwiek nigdzie jeździł i jeśli nie chcesz wywoływać funkcji JavaScript. Działa świetnie, jeśli masz obraz, który ma się zdarzyć po najechaniu myszką, ale użytkownik nie ma nic do kliknięcia.

Kiedy mam kilka sztucznych linków, wolę dać im klasę „bez linków”.

Następnie w jQuery dodaję następujący kod:

$(function(){
   $('.no-link').click(function(e){
       e.preventDefault();
   });
});

A w przypadku HTML link jest po prostu

<a href="/" class="no-link">Faux-Link</a>

Nie lubię używać Hash-Tagów, chyba że są one używane do zakotwiczeń, i robię to tylko wtedy, gdy mam więcej niż dwa fałszywe linki, w przeciwnym razie korzystam z javascript: void (0).

<a href="javascript:void(0)" class="no-link">Faux-Link</a>

Zazwyczaj lubię po prostu unikać korzystania z linków i po prostu owijać coś wokół siebie i używać tego jako sposobu na aktywację jakiegoś kodu JavaScript, takiego jak wyskakujące okienko lub odsłonięcie zawartości.

Wierzę, że przedstawiasz fałszywą dychotomię. To nie jedyne dwie opcje.

Zgadzam się z panem D4V360, który zasugerował, że nawet jeśli używasz tagu kotwicy, tak naprawdę nie masz tutaj kotwicy. Wszystko, co masz, to specjalna sekcja dokumentu, która powinna zachowywać się nieco inaczej. <span>Tag jest o wiele bardziej odpowiednie.

Próbowałem obu w Google Chrome z narzędziami dla programistów i id="#"zajęło to 0,32 sekundy. Podczas gdy javascript:void(0)metoda zajęła tylko 0,18 sekundy. Tak więc w Google Chrome javascript:void(0)działa lepiej i szybciej.

Zasadniczo parafrazuję ten praktyczny artykuł, używając progresywnego ulepszania . Krótka odpowiedź jest taka, że nigdy nie używasz javascript:void(0);lub #chyba że interfejs użytkownika został już wywnioskować, że JavaScript jest włączona, w takim przypadku należy użyćjavascript:void(0); . Nie używaj też span jako linków, ponieważ jest to semantycznie fałszywe na początek.

Dobrym zwyczajem jest również używanie w aplikacji tras przyjaznych SEO , takich jak / Home / Action / Parameters. Jeśli masz link do strony, która najpierw działa bez JavaScript, możesz później poprawić jej jakość. Użyj prawdziwego linku do działającej strony, a następnie dodaj zdarzenie onlick, aby ulepszyć prezentację.

Oto próbka. Strona główna / ChangePicture to działający link do formularza na stronie wraz z interfejsem użytkownika i standardowymi przyciskami przesyłania HTML, ale ładniej wygląda w modalnym oknie dialogowym z przyciskami jQueryUI. Tak czy inaczej, w zależności od przeglądarki, działa to w pierwszej kolejności.

<p><a href="Home/ChangePicture" onclick="return ChangePicture_onClick();" title="Change Picture">Change Picture</a></p>

<script type="text/javascript">
    function ChangePicture_onClick() {
        $.get('Home/ChangePicture',
              function (htmlResult) {
                  $("#ModalViewDiv").remove(); //Prevent duplicate dialogs
                  $("#modalContainer").append(htmlResult);
                  $("#ModalViewDiv").dialog({
                      width: 400,
                      modal: true,
                      buttons: {
                          "Upload": function () {
                              if(!ValidateUpload()) return false;
                              $("#ModalViewDiv").find("form").submit();
                          },
                          Cancel: function () { $(this).dialog("close"); }
                      },
                      close: function () { }
                  });
              }
        );
        return false;
    }
</script>