I am building a DrupalGap based mobile application and using Ripple Emulator in GC for development.

The design requires custom HTML buttons and links, one of which is used to link to a form. I moved away from the sandbox Webform module for drupalgap, because Page breaks were not supported and hard-coding the form fields via drupal gap gave a bit more control.

This form I am creating is "simulating" a multi-page experience by using JQuery's show() & hide() and CSS on the form fields and a switch based on the pageNumber. At the bottom of the form page is a drupalgap block that displays the buttons needed to increment and to decrement the page number.

Here is the function called to set the page:

function navigatePage(pgNo){
  $("#custom_module_custom_form .form-item").hide();
  $("#back-btn").hide();
  $("#next-btn").hide();
  switch(pgNo){
    case 1:
      $(".field-name-first-field").show();
      $(".field-name-second-field").show();
      $("#back-btn").show();
      $("#next-btn").show();
      break;
    case 2: ...

There is a CSS selector on form-items that set's them to "display:none" because when loading the form I could not get the above script to run properly on any JQM page event hooks (page show, page load, pagebeforeload, form_alter, etc). It would either display all of the form items or none at all. So using CSS I could have the styles pre-set to hide all and then allow the "style='display:block'" from Jquery override that.

The first time you navigate to the form, it works perfectly, but once you return home and navigate there again, the actual form no longer loads.

Here is what the link to the form page looks like on the home page (this is within a 'markup' field described in the 'custom page' documentation:
<a href="#" onclick="javascript:drupalgap_goto('+"'custom_form_page'"+', {reloadPage:true});">Form</a>
I've tried with and without the "reloadPage", but when I navigate a second time to the DOM actually shows multiple pages with the same ID, and neither have children nodes containing the form. What could be going on here?

Does anything above jump out as the likely cause of this issue? Any support would be appreciated, it's been quite a headache!

Comments

tyler.frankenstein’s picture

tyler.frankenstein commented
Category: Bug report » Support request
Priority: Major » Normal
Status: Active » Postponed (maintainer needs more info)

When building a "multi page" form, others have had success actually building one form for each page. Then in the submit handler for form A, make a call to drupalgap_goto() to load the next page/form.

ivangrozni’s picture

ivangrozni commented

Thanks for your reply! I'll try that. I just want to confirm, you mean to make 4 DrupalGap forms with hidden values carrying between, correct? Not like, 4 Webforms or something?

ivangrozni’s picture

ivangrozni commented

I Just split up the forms, but using "drupalgap_back" and then navigating to the form again it doesn't re-render the form. This is without any display settings hiding form fields.

Any ideas what could be happening?

ivangrozni’s picture

ivangrozni commented
Title: DrupalGap Form Creator Won't Reload Page / Multi-page Conflict » Form doesn't reload after drupalgap_back
Category: Support request » Bug report
Priority: Normal » Major
ivangrozni’s picture

ivangrozni commented
Status: Postponed (maintainer needs more info) » Active
ivangrozni’s picture

ivangrozni commented
Status: Active » Closed (works as designed)

I found the source of the issue in the code. I changed the more HTML5 semantically-specific 'article' to a div in the page.tpl.html and removed tabs and it seems to have fixed the problem:
In my code I changed this:

      <article {:drupalgap_page_attributes:}>
          {:header:}
                  {:content:}
              {:footer:}
      </article>

to this:

<div {:drupalgap_page_attributes:}>
{:header:}
{:content:}
{:footer:}
</div>

And now it is working with a multi-page form that tyler.frankenstein suggested. Thanks for your help!