Tips on implementing a dialogue box on a page using jQuery Mobile

My code involves dynamically creating 20 questions, each requiring a dialog. This is for a mobile application utilizing jQuery Mobile, making the jquery mobile dialog functionality ideal.

I am confident that this can be accomplished, although I am unsure of the exact implementation.

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

<div class="quest">
   @Html.DisplayFor(modelItem => item.Text)<div class="quest_com">
   <a href="#<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4b464e434048026f675b4243016b465c5f434e5669405d">[email protected]</a>(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>
model-view-controllerhtmlcssjquery-mobile

Answer №1

To make it work, ensure each of your 20 questions is set up as its own jQuery Mobile page element instead of nesting them within another page.

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

For a live example of this setup, visit: http://jsfiddle.net/shanabus/ZfBvB/

This approach should address what you are trying to achieve.

Explore the documentation on jQuery Mobile dialogs for further guidance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best combination of tools to use for web development: express with jade/ejs, along with html5, css

As I delve into learning node.js/express, a question arises about how jade/ejs, html, and css work in harmony. Allow me to share my understanding: The application logic is implemented in node.js/express A portion of this logic/variables is injected into ...

htmlcssnode.jsexpresspug

The word-wrap property does not function properly in the <small> element or any other HTML elements

My code has a small issue with the word-wrap property not working as expected. When I change it to a div element, it works fine but I need to use the small or another specified element. Does anyone have any ideas why the word is not breaking and what could ...

htmlcss

Is there a way to determine the dimensions of a pdf file using javascript and capture a snapshot of it for showcasing on a website?

I'm fairly new to HTML/CSS and haven't delved into javascript yet, but I have a good understanding of reading other people's code. Currently, I'm putting together my portfolio website and would like to include my resume on the page in a ...

javascripthtmlcsspdf

Error: The term "Particles" has not been defined

I'm attempting to integrate code from a website into my project, but encountered an error when the particles failed to run after adding it. I downloaded and installed particle.js from "https://github.com/marcbruederlin/particles.js/issues" for this pu ...

javascripthtmlcssparticlesparticles.js

Displaying an image in a popover using Bootstrap without the need to download the image again

As I work on downloading and resizing an image to fit into my design by adjusting the width and height, I encounter a question about creating a popover when hovering over the full image. Specifically, do I have to download the image again for this purpose? ...

jquerycsstwitter-bootstrap

having difficulty grasping the variable's scope within this code

Here we have a code snippet where the variable vid is initialized inside a function. The question arises on how this variable can be used outside the function, specifically in the context of vid.play(). How does the program know that vid was created usin ...

javascripthtml

Are there numerous instances of jQuery references both preceding and following the use of '$.noConflict'?

Managing a large project with thousands of PHP files can be challenging, especially when dealing with conflicting jQuery references that hinder the implementation of a desired plugin. Consider this scenario: <html> <head> ...

javascriptphpjqueryhtml

Use a for loop to iterate through elements and retrieve input values using getElementById()

As I work through a for loop in JavaScript, I am utilizing the getElementById() method to fetch multiple input values. To begin, I dynamically created various input boxes and assigned distinct id's using a for loop. Subsequently, I am employing anoth ...

javascripthtmlloopsgetelementbyid

The 16x9 Bootstrap ratio is causing a significant spacing issue when utilizing the Azure Media Player

I am trying to create a layout with 2 columns - a video on the left (with aspect ratio 16x9) and a sidebar on the right (with min-width). As the window width changes, I want the video to resize proportionally while the sidebar maintains its width. However ...

csstwitter-bootstrapflexboxbootstrap-5azure-media-player

Tips for eliminating the shadow effect from a textbox using CSS

I need assistance with removing the shadowed edges on a textbox in an existing project. Can anyone provide guidance on how to remove this effect? Thank you for your help! ...

htmlcsstwitter-bootstrapbootstrap-modal

Struggling to Send Data and Generate a Calculated Value with Django

Hello, I am currently in the process of learning Django as a beginner. I have written some code that allows me to input data, but for some reason, I cannot successfully POST it to the database. I'm not quite sure where I've made an error. Model ...

pythonhtmldjangodjango-models

What is the best way to ensure that all elements inside a Grid item extend to the bottom, except for the text?

I currently have four columns within a Grid container, each structured as follows: <Grid item> <Typography>Big Title 1</Typography> <Card className={classes.stretchMe}> <CardContent> ...

cssreactjsmaterial-ui

Issue with iOS iframe scrolling - unable to scroll as expected

On iOS devices like the iPad and iPhone 6, scrolling doesn't seem to work as intended. Instead of the iframe scrolling, it's the 'body' that is moving. Javascript $(document).on(clickHandler, '#content a', function(){ href ...

javascriptjqueryhtmlcssiframe

I’m currently developing a browser-based game, but the issue lies in the fact that the same repetitive actions occur in each

Creating a web-based game has been a challenge for me as the same sequence of events occurs in every round, leading to predictability and monotony. The issue lies in the lack of randomization, which is crucial for maintaining excitement and unpredictabilit ...

javascripthtmlcss

Flex container has images stretched, but align-self-center cannot be utilized

Looking for a solution to resolve an issue with the following Bootstrap 4 markup: <div class="col-3 d-flex flex-column"> <img class="align-self-center" src="#"/> </div> The problem arises when using align-self-center in a flex conta ...

htmlcssbootstrap-4flexbox

Avoiding interference with adjacent elements caused by long content in a div

Hey there, I could really use some help with my CSS layout, I'm pretty new to CSS and Flexbox and I'm trying to create a simple layout. The issue I'm running into is how to stop long content inside a pre tag from pushing other divs. Here& ...

htmlcssflexbox

What is the best way to create a drop-up feature for a Bootstrap navbar positioned at the bottom of the

I am experiencing some issues with my navbar. I have a dropdown menu in the third li element that does not seem to work properly. Despite adding the dropup class, it still fails to appear when I hover over it. <nav class="navbar navbar-expand-lg navb ...

htmlcsstwitter-bootstrapbootstrap-4

Having difficulty with utilizing the sendKeys() method within the paragraph tag using Selenium WebDriver

Below is an image showing the page I want to make changes to: https://i.sstatic.net/jRtlT.png This is the HTML code snippet: <div id="taTextElement7190829193028565" class="ng-pristine ng-untouched ng-valid ta-bind" contenteditable="true" ta-bind="ta- ...

javahtmlseleniumselenium-webdriver

Limit the character count in a textarea

My goal is to control the number of characters that can be entered into a textarea. While I am aware that I could simply use a substring to limit the characters, I prefer to visually inform the user when their text has reached the maximum length. The maxl ...

phpjavascripthtml

Special Table Spacing

Within my table, I am looking to create spacing between cells without setting padding and/or margin on each individual td. While using the CellSpacing and/or CellPadding properties of the table could be a potential solution, these properties apply space on ...

htmlcsshtml-table