JqueryMobile 1.4.0 pass parameter to popup

Question

I'm pretty new to jQuery Mobile and PHP and I'm having an issue where I have a PHP while loop

    while ( $row = sasql_fetch_array ( $idresult ) ) {
    echo "
        <li>
            <a href='#' data-rel='popup' data-position-to='window' data-transition='pop'>
                <div class='ui-grid-a'>
                    <div class='ui-block-a'>
                        <div class='ui-bar ui-bar-a titleRow' style='height:15px'>Identification Type</div>
                        <div id='idType' class='ui-bar ui-bar-a 'style='height:15px; background-color:transparent; border: none; color: black; font-weight: normal;' >" . $row ['description'] . "</div>
                    </div>
                    <div class='ui-block-b'>
                        <div class='ui-bar ui-bar-a titleRow' style='height:15px'>Details</div>
                        <div id='idNo' class='ui-bar ui-bar-a ' style='height:15px; background-color:transparent; border: none; color: black; font-weight: normal;'>" . $row ['number'] . "</div>
                    </div>
                </div>
            </a>
            <a href='#editCustId' data-rel='popup' data-position-to='window' data-transition='pop'>Edit</a>
        </li>
        ";
} // end while
echo "</ul>";
} // end if

When the use clicks on the edit button I need to pass the ID of that particular row. I'm not sure where I should put this in but it could be something like this...? Will this work when there is no form?

<input type="hidden" name="the_id" value='<?php " . $row ['theid'] . " ?>' />

However I can't figure out how to do this. I have tried opening the dialog as a new page ie.

<a href='./editCustId.php?id=" . $row['theid'] . "' data-rel='popup' data-position-to='window' data-transition='pop' class='ui-btn ui-btn-inline ui-icon-edit ui-btn-icon-notext'>Edit</a>

When edit is clicked this popup will open

    <div data-role='popup' id='editCustId' data-theme='a' data-overlay-theme='a' data-dismissible='false' style='min-width: 300px;'>
                <div data-role='header' data-theme='a'>
                    <h1>Add ID</h1>
                </div>
                <div data-role='main' class='ui-content'>
                    <form id='editId' onsubmit="return false;">

                        <input type="hidden" name="cust_id" value='<?php echo $custid; ?>' /> 
                        <input type="hidden" name="sess_id" value='<?php echo $sid; ?>' />



                        <!-- <input type="hidden" name="submitted" value="true" /> -->

                        <div class="ui-field-contain">
                            <label for="phoneType">Type</label> 
                                <select name="idType" id="idType">
                                    <?php echo $idInnerOptions; ?>
                                </select>
                        </div>
                        <div class="ui-field-contain">
                            <label for="idDesc">Description</label> <input type="text" name="idDesc" id="idDesc" value="">
                        </div>

                        <div class='ui-grid-a'>
                            <div class='ui-block-a'>
                                <input type='submit' id="submit" value='Update' class='ui-btn ui-btn-inline' data-transition='pop' />       
                            </div>
                            <div class='ui-block-b'>
                                <a href='#' class='ui-btn' data-rel='back' data-transition='pop' id="addIdReset">Cancel</a>
                            </div>
                            <div id="success" style="color: black;"></div>
                        </div>
                    </form>

                </div>
        </div>

The description and number will contain the relevant info based on which link was clicked.

I've been looking into passing the data through ajax but I'm not really getting what I should be doing?

possible duplicate of [jquery mobile only one popup for many list items](http://stackoverflow.com/questions/20549242/jquery-mobile-only-one-popup-for-many-list-items) — Omar, Feb 14 '14 at 18:10
Hi I've tested this out and I can't get it working at all! I'm using jqm 1.4.1 could this make a difference? — Janey, Feb 20 '14 at 10:48
No, it shouldn't make any difference. You need to do some changes on it to fit your HTML markup i.e. selectors. Create a fiddle with a sample of your rendered HTML. — Omar, Feb 20 '14 at 11:10
Hi ok thanks I'm getting there now... what if I want to pass an HTML id instead of "li a" for example can I do something like $("theIDofTheLink").on("click", function (e) { instead of $("li a").on("click", function (e) { ? Thanks for your help — Janey, Feb 20 '14 at 14:02
You choose any selector you want. `li a` is meant to pass parameters whenever an anchor `` within `

score 0 · Answer 1 · answered Feb 14 '14 at 21:16

0

I Think there are 2 issues here for you to check more:

As i recall, the popup feature of jquery mobile is for code that are inside divs that has the popup data-role. So, what you tried to do is not in the JQM logic. However, JQM also allows you to use iframe in divs with popup data-role so maybe that will be a good solution for you.
Another way to go, could be to dynamicly load the content of the page you want by AJAX to a div that has the popup data-role.

Hope this helps

answered Feb 14 '14 at 21:16

Lupin

1,225
11
17

Hi thanks for your answer. I saw I had some issues with my original code that I think I've fixed now. What do you mean by: Another way to go, could be to dynamicly load the content of the page you want by AJAX to a div that has the popup data-role. Thanks – Janey Feb 18 '14 at 15:43
As the popup feature of JQM is for divs that are already in the Dom, what you can do is have a link/button that once pressed callsan AJAX request for an external page and when it is completed, inject the content of AJAX response into a div in your DOM and only then open the JQM pop-up. Hope this helps – Lupin Feb 19 '14 at 12:15
Thanks I'm looking into this! – Janey Feb 21 '14 at 11:59
Hi - I've made some changes to my code and have been looking into using AJAX but I'm not totally understanding how to do this without using a form? Are you able to help? I've edited my original question. Thanks – Janey Mar 25 '14 at 13:36
send a link to a working version you have until now and i will try to have a look – Lupin Mar 30 '14 at 20:46
hello - ive made this fiddle http://jsfiddle.net/DP2gd/ i basically want to pass the id "theid" when the user clicks on edit so that the correct details can be displayed in the popup. I'm using php with this. Thanks a lot :) – Janey Mar 31 '14 at 16:01
wow thanks so much for that, it's really helpful. I'll try to get it all working now :) – Janey Apr 01 '14 at 09:02

JqueryMobile 1.4.0 pass parameter to popup

1 Answers1