CODEWITHSUNDEEP
model-view-controllerhtmlcssjquery-mobile
Jandarm
Jandarm

Reputation: 11

How to create a dialog within page with jquery mobile?

Here is my code. I build 20 questions dynamically. So I need to create a dialog for each of them. It's a mobile application, built using jquery mobile. So I prefer to use the jquery mobile dialog functionality.

I know for sure it can be done, just not sure how.

<div data-role="page" id="Survey">

<div class="quest">
   @Html.DisplayFor(modelItem => item.Text)<div class="quest_com">
   <a href="#[email protected](modelItem => item.Id)" data-rel="dialog" data-transition="flip">Comments</a></div>
</div>


<div data-role="page" id="dialog">
            <div data-role="header">
                <h1>
                    Dialog</h1>
            </div>
            <div data-role="content">
                <div class="center-wrap">
                    <textarea style="width: 320px" title="Comments">

            </textarea><a data-rel="dialog" data-role="button">Save</a>
                </div>
            </div>
</div>

</div>

Upvotes: 1

Views: 2367

Answers (1)

shanabus
shanabus

Reputation: 13115

You cannot have a page nested in another page for it to work. Your 20 questions should each be setup as their own jQuery Mobile page elements.

<div data-role="page" id="Survey">
 ...
 <a data-rel="dialog" href="question-dialog-1">Question 1</da>
</div>

<div data-role="page" id="question-dialog-1">
 ...
</div>

Here is a live example of it in action: http://jsfiddle.net/shanabus/ZfBvB/

That should solve what you are looking to do.

Here is the documentation on jQuery Mobile dialogs.

Upvotes: 1

Related Questions