0

In my View I have;

@foreach (var item in Model)
{
    <li>@Html.ActionLink("click me", "popup", "SomeData", new{id = item.ID}, new {@class = "PopUp"})</li>
}

I then have a controller that looks like this;

public ActionResult popup(Guid id)
{
    var singelData = db.SomeRandomData.Find(id);

    return PartialView(singelData);
}

And a partialView that looks like this;

<div>This a popup</div>
@Model.metadata1

So far so good, when I click on a link I get redirected to a partialView.

Now to the part where I'm not comfortable, the script section, here is my attempt;

<script src="~/Scripts/jquery-ui-1.8.20.js"></script>
<script type="text/javascript">
    $(function () {
        $('.PopUp').click(function () {
            $('<div/>').appendTo('body').dialog({
                close: function (event, ui) {
                    dialog.remove();
                },
                modal: true
            }).load(this.href, {});

            return false;            
        });
    });
</script>

But it still just returns a view. Where do i go wrong?

tereško
  • 58,060
  • 25
  • 98
  • 150
Tim
  • 289
  • 3
  • 23

1 Answers1

1

You should make sure that you have jQuery included before the 2 scripts you have shown. Also I would recommend you using a javascript debugging tool such as FireBug and looking at the console window where you might see potential errors with your scripts.

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • Thanks, i just notice that when i tried the native Window it didnt work in VS. I put the jquery-1.7.1.js in the shared layout, is that sufficent? Thanks for the advice, i will try firebug (trying to learn javascript so im not that sharp) – Tim Apr 08 '13 at 11:26
  • Yes, you could include jQuery in the _Layout but make sure that it is included **before** `jQuery-ui.js`. For example you could have a custom section in your _Layout where you would render the custom scripts: `@RenderSection("scripts", required: false)`. And then in your specific view you would override this section: `@section scripts { ... put your scripts here ... }`. It is inside the overriden section in the view that you could include jquery-ui and your custom script. – Darin Dimitrov Apr 08 '13 at 11:28
  • I will try it, Right now im trying to get your http://stackoverflow.com/questions/10724796/load-partial-view-in-to-a-modal-popup to work so i guess its the script import i have got really wrong. – Tim Apr 08 '13 at 11:31
  • Okey, now im really lost. I have taken the code from http://jqueryui.com/dialog/ and just added it to a view, it do not show. If i paste the same using notepad changing the filename to html it do show. In your orignial guide, is there any step you left out or do i have some strange VS-settings? – Tim Apr 08 '13 at 11:37
  • No, there are no specific settings. Make sure that you have properly included all scripts. Look in the Net tab of FireBug to see if there are some 404 errors when including the scripts. – Darin Dimitrov Apr 08 '13 at 11:40
  • Okey, now i have debugged the code an tried your code in three projects and it stills fails. So my best guess is that i do something really stupid. I have run the code in firebug and i think that its the script i get wrong, i include just before your script and at the bottom of the page i use, i have tried to include this just before also without any result. – Tim Apr 08 '13 at 12:16
  • Thanks to firebug i found the fault, it was the last script that messed everything up, when it was removed your code worked so now i guess it wouldnt be so hard to implement my code on this. Thanks for the input darin, your comments guided me in the right direction :) – Tim Apr 08 '13 at 13:23