CODEWITHSUNDEEP
javascriptjquery-uiasp.net-mvc-3jquery-plugins
ZVenue
ZVenue

Reputation: 5027

Jquery plug in - Ajax pop up

I found this excellent plugin for ajax pop up for MVC called SimleModal, but am not able to get it to work. http://www.ericmmartin.com/projects/simplemodal/ is the website.

I want to use this plugin to pop up a view (in MVC) when a link is clicked on. Can any one show me the right direction here.. thank you..sample pseudo code?

Upvotes: 0

Views: 2141

Answers (2)

Adam Tuliper
Adam Tuliper

Reputation: 30152

Why not just use the built in jQuery-ui? Simply call $('#someDiv').Dialog(...) to make it work. Then you can use the jQuery theme roller site as well to customize your look - and you are dealing with 'base line' jQuery code.

To keep the same example syntax like Darrin added above for ease of comparison see below.

Configure your widget options and download them (you can choose from a whole lot of widgets - just the dialog if youd like or others Do this at: http://jqueryui.com/download

Make sure you reference the css file, jquery, and the jquery ui. Download the jQuery ui and put the /images folder into your /content folder as well as the css file.

Ensure you are linking in the files (I chose google for the second file - you can choose your own local if you'd like)


<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<link href="@Url.Content("~/Content/jquery-ui-1.8.13.custom.css")" rel="stylesheet" type="text/css" />

calling it is as simple as:


<div id="result">bipbip</div>
<script type="text/javascript">
    $(document).ready(function () {
    //initialize the dialog
        $("#result").dialog({ width: 400, resizable: false, position: 'center', title: 'My Dialog', autoOpen: false,
         buttons: { "Ok": function() { $(this).dialog("close"); } } 
         });
    });

    $(function () {
        $('#modal').click(function () {
            //load the content from this.href, then turn it into a dialog.

            $('#result').load(this.href).dialog('open');
            return false;
        });
    });
</script>

@Html.ActionLink("show modal", "Index2", null, new { id = "modal" })

For more details on the dialog see: http://docs.jquery.com/UI/Dialog

Upvotes: 2

Darin Dimitrov
Darin Dimitrov

Reputation: 1038930

Controller: 

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Modal()
    {
        return PartialView();
    }
}

View:

<script src="@Url.Content("~/Scripts/jquery.simplemodal-1.4.1.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#modal').click(function () {
            $.get(this.href, function (data) {
                $.modal(data, {
                    containerId: 'result'
                });
            });
            return false;
        });
    });
</script>

@Html.ActionLink("show modal", "modal", null, new { id = "modal" })

<div id="result"></div>

Now when you click on the "show modal" link an AJAX request will be sent to the Modal action on HomeController and the resulting partial view will be shown inside the result div (so don't forget to provide one in ~/Views/Home/Modal.cshtml).

Also make sure you checkout the examples section in the documentation for other available options.

Upvotes: 1

Related Questions