Member Avatar for thak123 
`enter code here`I am working on a jquery mobile html5 application.I have various pages with page id-"page1"...


Onclick of button i want a parameter to be passed with the function on which the navigation will be taking place.

for ex

<input type="button" data-transition="fade" value="Next"  onclick="checkIfValid('2');"
                            data-icon="arrow-r" data-iconpos="right">

so it redirects to the correct page...


how can i modify the 

function checkIfValid(page){
                var pag=page;
                alert(pag);
                switch (page){
                    case '2': alert('hi');
                    if ($('#page2').data('bValidator').validate())
                    {
                        $.mobile.changePage('#page3', { transition: "slideup" })
                        return true;
                    } else
                    {
                        return false;
                    }
                    break;
                    case '3': if ($('#page3').data('bValidator').validate())
                    {
                        $.mobile.changePage('#page4', { transition: "slideup" })
                        return true;
                    } else
                    {
                        return false;
                    }
                    break;

                }
            } 


function


in order to make it more dynamic
  • 2 Contributors
  • 1 Reply
  • 211 Views
  • 7 Months Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

Short practical note for (and thanks to for pointing out this is a jQuery issue): avoid inline onclick + a big switch and make the buttons declarative. Put the destination and any validation target on the button with HTML5 data-* attributes, then attach one delegated handler that reads those attributes and performs validation + navigation. This keeps the markup simple and the logic reusable.

<!-- give each nav control the destination and (optional) validation selector -->
<button type="button" data-target="page3" data-transition="slideup" data-validate="#formPage2">Next</button>
$(document).on('click', '[data-target]', function(e){
  e.preventDefault();
  var $btn = $(this);
  var to = '#' + $btn.data('target');
  var transition = $btn.data('transition') || 'slide';
  var validateSel = $btn.data('validate');

  if (validateSel) {
    var $form = $(validateSel);
    if ($form.length && $form[0].checkValidity && !$form[0].checkValidity()) {
      // browser will show native messages; or use reportValidity() to force display
      return;
    }
  }

  // preferred jQuery Mobile navigation API
  $('body').pagecontainer('change', to, { transition: transition });
});

Event delegation with on(...) is the right pattern for dynamically enhanced pages, and data-* attributes are the recommended way to store small, per-element metadata. (api.jquery.com)

Note about jQuery Mobile versions: $.mobile.changePage was deprecated in favor of the Pagecontainer widget; use pagecontainer("change", ...) (or the :mobile-pagecontainer selector) so the code works with 1.4+ and avoids future breakage. Also make sure your target element exists and is a jQuery Mobile page (has the expected page markup/role). (jquerymobile.com)

Troubleshooting tips: confirm the id in data-target matches a page id, test the checkValidity() fallback (or call your validator API before changing page), and log the computed to and transition values if navigation does not occur. Using this pattern makes adding new steps trivial — no more switch/case. (developer.mozilla.org)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.