[sixgundesign]

Hello there, love the program, am doing a small test version of a larger project I intend to undertake and I ran into a problem.

I am trying to create a native app that will allow our employees to submit paperless reports from the field.

Using Mobi I created a basic app (1 page) that is essentially two text fields and two radio buttons. This is the configuration, with the address of the script on action erased:

Here is the script that it calls to when you hit the submit button, (assuming those app settings are right)

$con=mysqli_connect(“localhost”,”*****”,”******”,”*****”);
// Check connection
if (mysqli_connect_errno())
{
echo “Failed to connect to MySQL: ” . mysqli_connect_error();
}

$sql=”INSERT INTO MYSQL_TEST
(Name,IdNumber,Radio)

VALUES
(‘$_POST[name]’,’$_POST[idnumber]’,’$_POST[radio]’)”;

if (!mysqli_query($con,$sql))
{
die(‘Error: ‘ . mysqli_error($con));
}

mysqli_close($con);

I know the PHP script works, I wrote a web based html form and it wrote correctly to my Database. Any help as to what I am missing or messing up would be greatly appreciated.

[support-michael]

Before we dig in are you expecting any type of returned content? I don’t see the script returning any data or content. Just curious.

Proceeding on, debugging is a skill unto itself. I’ll walk through how I would approach isolating the problem in a few steps. Based on what you learn if you still have questions we can dialog further.

1) known facts
– server side script works independently of app – you shared this info

2) Q: is there a bug in your app
If you have not included additional javascript or implemented your own JS functions then goto #3
Let’s check for a javascript error that is causing an issue.
Run your project in the Simulator and open the Chrome Dev Tools. You can do this from either F12 key or from the right-click menu in Sim choose Inspect. Open the console and look for any error messages pertaining to the file <startupfilename>_custom.js. If you see error then stop, fix the coding error and start over. Otherwise proceed to #3.

3) Q: can the device see your webserver and php script
From the device, are you able to open and run the db script URL from the device’s browser?
if yes, then goto #4
if no, then your web server needs to be visible to the device on the same network, e.g., either same wifi network or publicly over internet.

4) verify that the app is actually posting form data with the properly named parameters
From the script it looks like you are passing parameters named: name, idnumber, and radio. Verify that the mobione input-field widgets that correspond to these parameters have their ‘id’ property set with the correctly spelled parameter names. The code generator will use the id property as the name of the parameters that are posted.

5) Debug into the presubmit and postsubmit functions during the submit and look for issue
For any screen who’s Form property is set, mobione generates 2 functions named with this pattern: phoneui_preSubmit_<screenname>(htmlFormNode) & phoneui_postSubmit_<screenname>(isSuccess, data)
You can either added alert() statements to these functions to identify when they are called or open the Chrome Dev Tools (see step #2) and set break points. In the latter, from the Chrome Dev Tools you will need to select Source tab and navigate to the file similar to this
127.0.0.1:8090/get/<long alphanumeric string>/<startupfilename>_custom.js

I have mobione configured to run on port 8090.
From the postsubmit breakpoint you should be able to view the data which will either be data returned from a successful submit process or it will be an error msg.

It would be good to see debug info logged on the server so you could see what it is doing as well. I help manage our automated sales system here and we are able to turn on massive logging to capture almost every event and action in the system when needed. Very helpful when something blows up.

[sixgundesign]

Using chrome dev tools I am seeing an error when I submit. It is not finding the file. it is calling for a much longer destination, not located at my web server.

POST http://127.0.0.1:9090/get/588fc883b99942378eb9f25ef240b934/www.sixgundesign.com/insertapp.php 404 (Not Found) ripple.js:121859
ERROR: AJAX request failed error Not Found 

Obviously the script I want to call on is the insertapp.php, how do I make the needed changes to make it call directly to my own server and not the IP it is currently looking at?

[sixgundesign]

This is the app code.

<html>
  <head>
    <title>test</title>
    <meta name="generator" content=
      "MobiOne Studio - Design Center (2.6.2.201403191812), http://genuitec.com/mobile"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="viewport" content=
      "minimal-ui, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="test.css"/>
    <link rel="stylesheet" href="res/spinningwheel.css"/>
    <script type="text/javascript" src="rte/cordova.js"></script>
    <script type="text/javascript" src="rte/rte.js"></script>
    <script type="text/javascript" src="res/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="res/iscroll.js"></script>
    <script type="text/javascript" src="test.js"></script>
    <script type="text/javascript" src="res/phoneui.js"></script>
    <script type="text/javascript" src="res/spinningwheel.js"></script>
    <script type="text/javascript" src="test_custom.js"></script>
  </head>
  <body>
    <div class="m1-top-root">
      <!-- Loading spinner  -->
      <div class="m1-loading">
        <div>
          <canvas class="m1-loading-spinner" width="25" height="25"></canvas>
          <span class="m1-loading-text"></span>
        </div>
      </div>
      <!-- Prompt to be shown for adding page on homescreen  -->
      <canvas class="m1-homescreen-prompt" width="250" height="120"></canvas>
      <!-- ***** test *****  -->
      <div id="m1-test" class="m1-root m1-background-1">
        <form id="m1_test" action="www.sixgundesign.com/insertapp.php" data-transition="DEFAULT" 
          data-resulttype="DATA_HTML" name="m1_test" method="POST">
          <textarea id="m1-test-name" 
            class="m1-textarea m1-textfield m1-textfield-border m1-iscroll-no-prevent-default m1-font-1"
            name="name" wrap="soft"></textarea>
          <div id="m1-test-text1" class="m1-text m1-font-2 m1-shadow-1">test</div>
          <textarea id="m1-test-idnumber" 
            class="m1-textarea m1-textfield m1-textfield-border m1-iscroll-no-prevent-default m1-font-1"
            name="idnumber" wrap="soft"></textarea>
          <div id="m1-test-text2" class="m1-text m1-font-2 m1-shadow-1">test 2</div>
          <div id="m1-test-radio1" class="m1-radiobutton m1-font-2">
            <input type="radio" name="radio" value="good" checked="true"/>
          </div>
          <div id="m1-test-radio2" class="m1-radiobutton m1-font-2">
            <input type="radio" name="radio" value="bad"/>
          </div>
          <div id="m1-test-Submit" 
            class="m1-clickable m1-button m1-font-3 m1-shadow-2 m1-btn-1 m1-btn-2" name="Submit" 
            data-action-click-id="action1">Submit</div>
          <div id="m1-images-preloader" class="m1-preload-images-1"></div>
        </form>
      </div>
    </div>
  </body>
</html>

[support-michael]

> the script I want to call on is the insertapp.php, how do I make the needed changes to make it call directly to my own server and not the IP it is currently looking at?

The form-action url property is the exact same value you would provide if you were manually coding an html <form> element. The value can be either a relative url (only useful for webapps loaded from the server) or an absolute url (required for apps). The app content is not loaded from your server therefore you must enter an absolute URL to your script, e.g., http://www.sixgundesign.com/insertapp.php.
See attachment form-url.png
Give it a go and let us know (unintentional rhyme).

Attachments:

You must be logged in to view attached files.

[sixgundesign]

That is exactly what I had in there to begin with. With that url in there it throws the AJAX error and is looking at “http://127.0.0.1:9090/get/588fc883b99942378eb9f25ef240b934/www.sixgundesign.com/insertapp.php&#8221;
Why would it alter my address and include the 127.x.x.x portion ahead of my specified parameters?

[support-michael]

>Why would it alter my address and include the 127.x.x.x portion ahead of my specified parameters?

From the code you posted it appears your omitted the http:// from the URL you entered in the form action url property. Please review your form action property. Without the http:// this is a relative URL which will always have the web context of the app (its starting URL) appended. If you disagree please post the screen .mobi file for review and I’ll give it a look.

For me here’s the telling pt: See attachment relative-formaction-url.png

Now here is the code generated for the example I showed where form action property is set to http://foo.com/bar. Notice the difference where my <form> elements action includes the http: and yours does not.

Attachments:

You must be logged in to view attached files.

[sixgundesign]

I have corrected that and I no longer get that error, but I am not seeing a new entry in my DB.

This shows up on loading:

Web Simulator :: Environment Warming Up (Tea. Earl Gray. Hot.) ripple.js:62757
Attr.specified is deprecated. Its value is always true.
Initialization Finished (Make it so.) ripple.js:62718
Viewport tag cannot be parsed: minimal-ui ripple.js:63715
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery-1.8.3.min.js:2

And when I input the form and click submit nothing comes up on dev tools, and no entry is made.

[Code_A]

VALUES
(‘$_POST[name]’,’$_POST[idnumber]’,’$_POST[radio]’)”;

I know you said the php script works fine, but just to test try this instead:

VALUES
($_POST['name'],$_POST['idnumber'],$_POST['radio'])";

[sixgundesign]

I actually got it working, the suggestion earlier corrected it, I just didnt have show all visible on PHP MyAdmin and was not seeing the new entries. Thanks a bunch for the help.

@Code A, is removing the “” a more proper syntax that I should encourage myself to use? As in it could potentially cause problems down the road?

[support-michael]

>I actually got it working,

great! thanks for the follow up.
have a great weekend.

[Code_A]

@sixgundesign wrote:

@Code A, is removing the “” a more proper syntax that I should encourage myself to use? As in it could potentially cause problems down the road?

I have always used the syntax that I posted when using POST in PHP. I guess if it’s working then all is ok, but it wouldn’t hurt to try it the other way and see. I was just suggesting the syntax change since you had said it wasn’t working.

POST is an associative array and the proper syntax for accessing the fields is shown in this PHP POST example from W3Schools. Look a the last example on the page.

[Author]

Posts