How to access divs of mutiple html pages in single .js file

Question

I am completely new to Jquery mobile, HTML and js. I have created 5 html forms. First form has drop-down and according to particular selection of that drop-down I wanted to load other html pages. Also depending on different element selection of html pages contents vary. My problem is how to show and hide html contents for different different conditions.

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

    <div data-role="header">
        <a href="index.html" data-rel="back">Login</a>
        <h1>Page 1</h1>
    </div>

    <div data-role="content">

        <form action="process.cfm" method="post">


            <fieldset data-role="fieldcontain">
                <label for="application">Application Name :</label> <input
                    type="text" name="application" id="application" value="RMS-Motor">
            </fieldset>

            <!--Category  Tag -->

            <fieldset data-role="fieldcontain">
                <label for="category">Category: <span>*</span></label> <select
                    id="category" name="category">
                    <option>category1</option>
                    <option>category2</option>
                    <option>category3</option>
                    <option>category4</option>

                </select>
            </fieldset>

            <input type="button" value="Next" data-inline="true" id="nextPage" />
            <!-- <a href="#raisereferralpage2"><button type="button"
                    id="nextPage" data-inline="true">Next</button></a> -->

        </form>
    </div>
</div>

this is my form1.html page its has dropedown. On selecting category I am loading different html pages and on selecting sub category I am hiding and showing some content inside of that particular html pages. I have written this logic on Next button click event. Here is .js file code

$('#nextPage').click(function () {
    if (category == 'Category1') {
        $.mobile.changePage('form2.html');
        $(".dis1").show();
        $(".dis2").show();
    }
    if (category == 'Category2') {
        $.mobile.changePage('form3.html');
        $(".match1").show();
        $(".match2").show();
    }
    if (category == 'Category3') {
        $.mobile.changePage('form3.html');
        $(".match4").show();
        $(".match5").show();
    }
});

on button click I can see the respective Html files loaded but code to show and hide is not working.

Can anybody please guide me for this.

can you add your code for show and hide? – Ramzan Zafar Nov 20 '14 at 13:43 — Ramzan Zafar, Nov 20 '14 at 13:43

score 0 · Answer 1 · answered Nov 20 '14 at 13:30

Make sure the page is loaded, when you fire your show functions!
i dont know $.mobile.changePage but maybe it was createdby you.
With $.ajax you can fire your show functions in the success handler:

function loadPage(callback) {
    $.ajax({
        url: 'http://...',
        success: function() {
            callback();
        }
    };
}

score 0 · Answer 2 · edited May 23 '17 at 12:05

Since you're using $.mobile.changePage() ^(*) to navigate to new pages, those pages are loaded into DOM before navigating to them. Hence, you need to listen to pagecontainerload, check filename of loaded page and then target those elements in the loaded page through data.page object.

$(document).on("pagecontainerload", function (event, data) {
  var filename = $.mobile.path.parseUrl(data.absUrl).filename,
      page     = data.page;

  if (filename == "form2") {
    $(".dis1, .dis2", page).show(); /* or page.find(".dis1, .dis2").show(); */
  }

});

^{(*) $.mobile.changePage() is deprecated as of jQM 1.4, use $.mobile.pageContainer.pagecontainer("change", "form2.html")}

How to access divs of mutiple html pages in single .js file

2 Answers2