CODEWITHSUNDEEP
jqueryasp.net-mvcjquery-mobile
InspiredBy
InspiredBy

Reputation: 4320

Unable to display Partial View as JQuery Mobile dialog

I put together a simple example:

I have a list of thumbnails and I want to display a bigger image when an image from the list is selected:

@if (Model.GalleryIcon.Any())
{
    foreach (var cell in Model.GalleryIcon)
    {  
        <a href="/Logo/[email protected]" data-rel="dialog" data-transition="pop" ><img src="@cell.ThumbInvPath" /></a>        
    }    
}

/Logo/[email protected] returns a partial view where @Model is a imagePath string:

@model string

<div id="logo-image-wrap">
      <img src='@Model' id="logo-wrap-mobile-image"/>
      <br />
      <a href="#" data-role="button" data-rel="back" data-icon="arrow-l">Back</a>
 </div>

This works is I set rel="external" on the anchor and simply opens an image in new, separate page but it doesn't work as a Dialog box. When an thumbnail image is selected from the list a blank dialog box comes up with "Undefined"

How can I mage my Partial view load with image details in a Dialog when a thumbnail is selected from the list?

Thank you.

Upvotes: 1

Views: 2121

Answers (3)

InspiredBy
InspiredBy

Reputation: 4320

Detailed solution is posted here:

http://usnitch.blogspot.com/2012/08/jquery-mobile-how-to-dynamically-load.html

Upvotes: 0

Tieson T.
Tieson T.

Reputation: 21231

EDIT THREE:

My apologies to anyone trying to make use of my answer. I somehow missed the whole "Mobile" part of the question, so the examples+explanation I had here were entirely irrelevant. If you want to see the code and whatnot from previous edits, click on the "edited" link below the answer.

After chatting on this problem with the OP, we think something like this may work (but needs to be tested before we know):

Modifying the generated anchors to add a hook for our jQuery bindings:

<ul>
...
    <li><a class="btn" href="someurl">Art</a></li>
...
</ul>

Then, we need to add a handler for the click event for these links:

$('a.btn').on('click', function(event){
    event.preventDefault();
    var href = $(this).attr('href');
    $.mobile.changePage( href, { role: 'dialog', transition: 'slide' } );
});

What this should do it make a request to the page we want to display, which is hijaxed by the jQuery Mobile framework. The second parameter tells the framework to display the page as a dialog rather than "navigating" to it.

Upvotes: 2

G&#246;rkem &#214;ğ&#252;t
G&#246;rkem &#214;ğ&#252;t

Reputation: 1791

I think you may try to call the dialog via an onclick event rather than inline statement on dynamic dom loading. By this way you may have a chance to load the created dom element rather than the one in process. On onclick Event you may also refresh the dom by .load before sending to the dialog.

Upvotes: 1

Related Questions