Guide to making two text boxes with SimpleDialog in jQuery Mobile

I came across the link below, but unfortunately it's not working for me. jQuery Mobile SimpleDialog with two Inputs?

Is there anyone who can assist me after reviewing the code snippet provided below?

<script type="text/javascript> 
            $(document).delegate('#addDialog', 'click', function() {
                $(this).simpledialog({
                    'mode' : 'string',
                    'prompt' : 'Product',
                    'cleanOnClose': true,
                    'buttons' : {
                        'OK': {
                            click: function () { 
                                $('#simplestringout').text($('#addDialog').attr('data-string'));
                            }
                        },
                        'Cancel': {
                            click: function () { console.log(this); },
                            icon: "delete",
                            theme: "c"
                        }
                    }
                })
            });
        </script>

I am triggering this function by clicking on a button.

Initially, I am able to get one textbox perfectly. However, I'm facing issues when trying to obtain two text fields simultaneously.

If anyone could provide guidance on how to achieve two text boxes, I would greatly appreciate it.

Answer №1

When aiming to obtain 2 inputs, it is necessary to utilize blank mode and design the dialog markup according to your needs.

Take a look at this example where the blankContent attribute is utilized to insert markup with 2 inputs and 2 buttons into the dialog. A handler is then included for the OK button utilizing event delegation (.on()) since the button does not exist until the dialog is activated:

$(document).on("pageinit", "#page1", function () {
    $(document).on("click", "#openDialog", function () {
        $('<div>').simpledialog2({
            mode: 'blank',
            headerText: 'Product',
            headerClose: true,
            width: "75%",
            blankContent: '<div class="sdCont"><label for="inp1">Text input 1:</label><input id="inp1" type="text" value="" placeholder="Type something..." /><label for="inp2">Text input 2:</label><input id="inp2" type="text" value="" placeholder="Really, go ahead and type..." /><div class="ui-grid-a"><div class="ui-block-a"><button id="btnOK" data-inline->OK</button></div><div class="ui-block-b"><button id="btnCancel" data-theme="c" data-icon="delete" rel="close">Cancel</button></div></div></div>'
        });
    });

    $(document).on("click", "#btnOK", function(){
        alert("Dialog OK clicked!");
        $.mobile.sdCurrentDialog.close();
    });
});

Check out the DEMO

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

Discovering the properties of a class/object in a module with Node.js

Recently I delved into the world of node.js and found myself puzzled about how to discover the attributes, such as fields or properties, of a class or object from a module like url or http. Browsing through the official documentation, I noticed that it on ...

Is it possible to swap a <div> element with the content of another HTML page using the .innerHTML method?

I am currently working on a project that involves loading different webpages into a <div> on my page once specific links are clicked. I came across a thread about using jQuery for this purpose, but I'm not familiar with it. Is there a way to ach ...

Need help with functions in JavaScript?

I'm struggling with understanding some code related to javascript and angularjs. I came across this line - !function(a,b,c){}(x,y,z) - and I can't make sense of it. It's something new to me and I would appreciate any help in clarifying its p ...

There is a lack of 'Access-Control-Allow-Origin' header, resulting in no access to the API

Having some trouble with the UK Parliament API, I keep encountering this error: XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not a ...

After my jQuery functions are executed, my CSS rules are loaded

Struggling with the communication between CSS and jQuery, I find myself torn. In CSS, my rules are often very specific, like this: div#container > div#contentLeft { //Code here } However, when I add jQuery to spice up my site, the CSS rules seem to ...

Troubleshooting a problem with a personalized webkit scrollbar in Chrome

Using the CSS property scroll-snap-type: y mandatory; to customize my scrollbar with the following styles: ::-webkit-scrollbar { width: 12px; background: transparent; } ::-webkit-scrollbar-track { background-color: rgba(0, 0, 0, 0.5); -webkit-box-s ...

Utilizing Node.js to retrieve streams in conjunction with OpenAI

I am currently working on setting up a node/react setup to stream results from openai. I came across an example project that accomplishes this using next.js. While I have successfully made the API call and received the results as expected, the challenge li ...

Utilize JSON data to dynamically populate TextFields or Select menus depending on a specific key in the JSON object

As I retrieve multiple JSON groups from an API, each group contains one or more questions objects. The task at hand is to attach each question along with its corresponding response to a textField. Based on the value of QuestionType, it will be decided whet ...

Timeout set to run indefinitely

Looking at the code snippet below, it seems to be running at a frame rate of 60 frames per second. If any button is clicked, the variable isjump will be set to true and the following code will start executing. The goal here is to exit the jump() function a ...

Only function components can utilize hooks within their body. The useState functionality is currently not functioning as expected

Currently working on a GatsbyJS project and attempting to utilize a Hook, however encountering an error message. Initially, I decided to remove the node_modules folder and package.json.lock file, then executed npm install again, unfortunately without reso ...

Automatically updating numbers upon adding input with jquery for a dynamic user experience

To keep the numbers in correct order #1, #2, #3, #4.... simply add an input and then reorder after removing any of them. |add_input+| (button) #1 |new_input| |remove| (button) #2 |new_input| |remove| (button) #3 |new_input| |remove| (button) If you ...

Assessing the validity of a boolean condition as either true or false while iterating through a for loop

I am facing an issue that involves converting a boolean value to true or false if a string contains the word "unlimited". Additionally, I am adding a subscription to a set of values and need to use *NgIf to control page rendering based on this boolean. &l ...

Ways to conceal all components except for specific ones within a container using JQuery

My HTML structure is as follows: <div class="fieldset-wrapper"> <div data-index="one">...</div> <div data-index="two">...</div> <div data-index="three">...</div> < ...

What is causing the table to not be displayed in this Javascript program when it is used in a

I am currently experimenting with incorporating an infinite loop before the prodNum and quantity prompts to consistently accept user input and display the output in a table. Although the program is functional when executed, it fails to showcase the table ...

Is AJAX the way to load image files?

Is it feasible to load an image using AJAX alone, maybe from a form that includes or another method like drag-and-drop? I'm posing this question because all responses have been along the lines of: "No, it's impossible due to security concerns. ...

Experiment with the Users.Get function available in vk-io

I am having an issue with a create command: Ban [@durov] and I encountered an error. Here is how I attempted to solve the problem: let uid = `${message.$match[1]}` let rrr = uid.includes('@') if(rrr == true){ let realid = uid.replace(/[@]/g, &ap ...

Express.js application experiencing technical difficulties

When attempting to create a simple Express application with the file called serv.js, I encountered an error. Here is the code snippet I used: var express = require('express'), app = express(); app.listen(3000, function() { c ...

What is the best way to remove table cells from a TableBody?

Currently, I am in the process of designing a table to display data retrieved from my backend server. To accomplish this, I have opted to utilize the Table component provided by Material UI. The data I retrieve may either be empty or contain an object. My ...

What is the method for configuring the URL of an ajax request to open in a separate window?

I am currently working on an ajax call where I need to open a URL in a new tab or window. Since I'm still learning about ajax, I would greatly appreciate any help and explanation that you can provide. Below is the code snippet: $.ajax({ url: &apo ...

Type of JavaScript map object

While exploring TypeScript Corday, I came across the following declaration: books : { [isbn:string]:Book}={}; My interpretation is that this could be defining a map (or dictionary) data type that stores key-value pairs of an ISBN number and its correspon ...