Question

I’m having issues making the simple script below to work but it’s not:

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

    <div data-role="content">
        <form action="" method="" name="targetForm">
            <a id="bt-addTarget" data-role="button" data-icon="plus">Add Target</a>
        </form>
    </div><!-- /content -->

    <div id="addTargetDialog"  data-role="dialog">
        <div data-role="header" data-theme="d">
            <h1>Choose a Target</h1>
        </div>
        <div data-role="content" data-theme="c">
            <form action="" method="" name="addTargetForm">
                <input type="hidden" name="addTarget" value="yes" />
                <select name="target">
                   <option value="test 1">test 1</option>
                   <option value="test 2">test 2</option>
                </select>
                <a id="btn-apply" href="target.php" data-role="button" data-theme="b">Apply</a>       
                <a href="target.php" data-role="button" data-rel="back" data-theme="c">Cancel</a>  
            </form>
        </div>
    </div>

    <script>
        $(document).undelegate("#targetPage", "pageinit").delegate("#targetPage", "pageinit", function() {
                $('form[name="targetForm"] #bt-addTarget').off('click').on('click', function(e){
                        e.preventDefault();
                        $.mobile.changePage("#addTargetDialog");
                });
        });
    </script>   

</div>

$.mobile.changePage(“#addTargetDialog”); is called but failed

Answer 1

Your data-role=”dialog” div must be on the same level as original page from where it is called:

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

    <div data-role="content">
        <form action="" method="" name="targetForm">
            <a id="bt-addTarget" data-role="button" data-icon="plus">Add Target</a>
        </form>
    </div><!-- /content -->
</div>

<div id="addTargetDialog"  data-role="dialog">
    <div data-role="header" data-theme="d">
        <h1>Choose a Target</h1>
    </div>
    <div data-role="content" data-theme="c">
        <form action="" method="" name="addTargetForm">
            <input type="hidden" name="addTarget" value="yes" />
            <select name="target">
               <option value="test 1">test 1</option>
               <option value="test 2">test 2</option>
            </select>
            <a id="btn-apply" href="target.php" data-role="button" data-theme="b">Apply</a>       
            <a href="target.php" data-role="button" data-rel="back" data-theme="c">Cancel</a>  
        </form>
    </div>
</div>

<script>
    $(document).undelegate("#targetPage", "pageinit").delegate("#targetPage", "pageinit", function() {
            $('form[name="targetForm"] #bt-addTarget').off('click').on('click', function(e){
                    e.preventDefault();
                    $.mobile.changePage("#addTargetDialog");
            });
    });
</script>

Working example: http://jsfiddle.net/Gajotres/M6Gvz/

EDIT :

Old html looked like this:

<div data-role="page" id="targetPage">
    <div data-role="content">
            ... 
    </div>

    <div id="addTargetDialog"  data-role="dialog">
            ...
    </div><!-- end dialog -->

    <script>
            ...
    </script>   
</div> <!-- end targetPage -->

New html is looking like this:

<div data-role="page" id="targetPage">
    <div data-role="content">
            ... 
    </div>   
</div><!-- end targetPage -->

<div id="addTargetDialog"  data-role="dialog">
        ...
</div><!-- end dialog -->

<script>
        ...
</script>   

In case you are wondering how to implement this in your page.

If you have multiple html pages do it like this:

HTML 1

  <div>PAGE 1</div>
  <div>DIALOG 1</div>
  <script>PAGE 1</script>

HTML 2

    <div>PAGE 2</div>

HTML 3

    <div>PAGE 3</div>

In case you have 1 html with multiple pages do it like this:

HTML 1

    <div>PAGE 1</div>
    <div>PAGE 2</div>
    <div>PAGE 3</div>
    <div>PAGE 4</div>
    <div>PAGE 5</div>
    <div>DIALOG 1</div>
    <script>PAGE 1</script>