CODEWITHSUNDEEP
asp.net-mvc-3jquery-ui
user20358
user20358

Reputation: 14736

MVC jqueryUI modal dialog

So in all my failed attempts to get jQueryUI working, I have tried this example here after downloading a theme from the jQueryUI site.

and here is my code looking at that example in the link above in my asp.net mvc page. 

<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>

After hitting F5 I would have expected to see a clickable text which when clicked would bring up a modal dialog with a [x] button to close it and get back to the main window. However what I get to see is this on page load,

screenshot of mvc application

where the text 'open dialog' does not respond to click events and the supposed "modal dialog" is already visible in the form of a plain string and without any formatting. So where did all the magic of jQueryUI go? Something wrong in my linking correct scripts? Totally lost. Please help..

Edit This exact same code works in pure html mode in a different file. when I copy this code into my asp.net mvc page within the content tags I get a javascript error at a non-descript line!!

Upvotes: 0

Views: 3895

Answers (2)

Bradley Mountford
Bradley Mountford

Reputation: 8273

Just take the 'open' out of your $('#Dialog').dialog('open'); and you are good to go.

Edit: Added this jsFiddle with your code as an example:

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

Also, you don't need 'return false' when clicking an element with no default click event.

EDIT: From your comment below I suspect that you are having issues with loading jQuery and jQueryUI in the first place. Try replacing your script and css links with the following as a test to eliminate path issues:

<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>

Upvotes: 2

MikeSW
MikeSW

Reputation: 16348

Try this

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

Upvotes: 1

Related Questions