[tjrtech]

Hello all. I have attempted before to raise this question on these forums with very little success, but I am hoping that that is only because I have not been very clear. I would like to clear up what I am talking about and make it as succinct and simple as possible.

The app I am building will be allow users to enter data into a MYSQL database hosted by a PHP webserver elsewhere and then will allow them to search for that data using keywords. So far, I have successfully connected to the MYSQL database and successfully created a form for users to enter data into that database. Via phpMyAdmin, I am able to verify that the data is being stored correctly. The issue I am having has to do with displaying results from the search.

The search will use SELECT to look through the ITEM column in the DB for LIKE terms and then display them in a table. The PHP code I have created uses a loop to achieve this.

I should say that the PHP code for even the search results function works PERFECTLY on a web server with just using PHP to echo the results. Clearly this approach will not work on the iPhone UI. That is where I am assuming some Javascript will be needed to insert the results into a waiting DIV. This is where I would really appreciate some help.

So far, I have tried to call the PHP function by way of ajax and then to display the results in a DIV. FAILED.
I have tried to create a form again and output the results by way of JS to a DIV element (document.getbyelementid….). FAILED.
I have tried inserting the raw PHP code into the HTML/PHP that MobiOne generates. FAILED.
I also tried using json_encode to output the results of the PHP array. Unfortunately, although the code again works in a browser, can not get it to display in the exported version of MobiOne that has been uploaded to my PHP server. FAILED.

Even if someone can point me in a right direction, that would be great, as I am definitely getting a little frustrated with this. It is such a simple concept, one that works flawlessly in any web browser but I do completely understand that Javascript is needed, so any help would be greatly appreciated.

Thanks again Support and all my fellow colleagues! What a wonderful program and although I realize it is meant to be mainly a UI generator and not server or client side scripting, I do greatly appreciate the support. It is definitely difficult to find help with MobiOne on other forums, as I have tried! (Stack Overflow being one of them).

[tjrtech]

I should add that I can post any relevant code anyone would like to see. For now, I thought I would add a link to the PHP code I use to search the MYSQL database and return the data, which like I said, works in a database.

http://www.tjrcomputersolutions.com/apps/edibles/v3.0/searchphp.txt

Unfortunately, my attempts to add the code directly in this comment were unsuccessful, even with using the “Code” option from the menu bar.

[support-octavio]

Hi tjrtech,

Are you testing on a native app or web app? It looks that you are uploading the generated files to your server, could you confirm it?

You need to design a results screen and then use it as either a php template or client-side ajax page that is dynamically populated with the search results using javascript.
The process is very simliar to custom-list the webdb example where a mocked up screen’s html is used as a template for generating a results screen:
http://www.genuitec.com/support-genuitec/viewtopic.php?f=14&t=6217

These others thread also might be helpful for you:
http://www.genuitec.com/support-genuitec/viewtopic.php?p=6846#p6846
http://www.genuitec.com/support-genuitec/viewtopic.php?p=11094#p11094

[tjrtech]

First of all, thank you for your response!

In answer to your question, the goal is to build it as a native app receiving data from a websource (in this case my web server hosting MYSQL – that being Bluehost, where yes, I am currently uploading the files). The app need only receive the information and then parse the data and format into a static template (much like what you were describing). That template I am having issues with, specifically displaying the data.

I know PHP must generate the database connection, perform the MYSQl Select query and then gather the results, but getting that data out of PHP into Javascript in order to display on the phone UI is where I am having major difficulty.

I have looked at those examples, but like with the sample app you linked me to, it does a great job at gathering information and inserting it into an SQL database, which my app has no problem with whatsoever, but the issue lies in after performing a search, displaying the results. I will keep looking into that app and see if I have maybe missed something. Thank you again and I hope between the two of us, we can come up with a solution!

[tjrtech]

Well here is an update on my progress. I have successfully created the search function of the hosted MYSQL database. Once executed, the source code shows the remote search.php (results) page as a remote source. However, I still can not display the data from that source page in the UI of the phone. I have tried eveything I can think of, including js include statements, php echo calls, js getelementbyid, etc. Any help would be so much appreciated! I am definitely running out of patience with this!

[tjrtech]

Still making progress…

I have successfully used an AJAX XMLHttpRequest to get at least part of the data from the PHP form submission. By that, I mean that the static table in that PHP file came through, but the data from the MYSQL database that was searched for does not.

It DOES work perfectly once again in any browser, but not the test center (the app). The PHP file outputs the data by means of while loop, which outputs the data in table format. This works perfectly in a browser but can not replicate in the app, although like I said, the AJAX call does bring in the table format however.

eg. Item | Store | Size | Price

but NOT

Shoe | Sportchek | 10 | 5.99

Therefore, I know my script is connecting properly now, but not bringing in the entire bit of data I need it to.

http://www.tjrcomputersolutions.com/apps/edibles/v4.0/index4.1.html (link to copy of AJAX Javascript I am using. It is in the form of an HTML file, which works perfectly; feel free to try it in a browser. I have set that piece of Javascript to run with a button onclick within MB1).

If you decide to try it, just enter “egg” in the input box, then click outside the box (it is currently set to onchange).

Thank you again for your help and hopefully we can figure this out!

[tjrtech]

BUMP

Just for your reference:

http://www.tjrcomputersolutions.com/apps/edibles/v4.0/search4.2.txt

is the PHP code used to generate the datanbase connection, query the database and output the results. What I can not figure out is why it works perfectly on a web page, but I can not get the calues queried back from the PHP file although I CAN get the static table values.

CAN GET THIS IN MOBIONE:

print “<table border=’1′>
<tr>
<th>Item</th>
<th>Store</th>
<th>Size</th>
<th>Price</th>
</tr>”;

CAN NOT GET THIS IN MOBIONE:

while($row = mysqli_fetch_array($result))
{
print “<tr>”;
print “<td>” . $row[‘item’] . “</td>”;
print “<td>” . $row[‘store’] . “</td>”;
print “<td>” . $row[‘size’] . “</td>”;
print “<td>” . $row[‘price’] . “</td>”;
print “</tr>”;
}
print “</table>”;

PLEASE HELP!!! I AM RUNNING OUT OF SANITY!!! THANK YOU!!!

[support-octavio]

Hi tjrtech,

What Mobione version are you using?
How are you testing this in Mobione?

The problem could be on this code:

  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }

What is the name of the div that you are using in your Mobione tests? Note that mobione adds a prefix to its widgtes in order to avoid duplicated ids, f.e. if your screen name were Main the prefix would be m1-Main-txtHint for a panel named txtHint on Design Center

Also, I recomend you to use the new Web Simulator that was introduced in this last new 2.5 version of Mobione, that is much more stable and leverages the latest web developer tools.

[tjrtech]

Thank you for your response!

That particular javascript you saw was on the web; but the copy I am using for MobiOne has the div prefixed with “searchResultsTesting-” as that is the name of the mobione app. I promise that that is not the issue, which is proven by the fact that the PHP table does populate properly, just not the values generated by the MySQL query.

I will try it in the new web simulator right now.

Would it help if I uploaded a copy of the actual mobione app project file?

[tjrtech]

See attachment searchResultsTesting.mobiWell I just switched from the old school simulator to the Chrome simulator. Unfortunately, the exact same issue happened. And I decided to just upload the project file in case you wanted to check it out. I made it considerably smaller so that it would be easier to debug for you.

The div in use has the correct prefix as I mentioned above. The app is set up so that once run, you enter a search term (put in “cracker”) and then click outside of the input box(q), and the output should come up in the div below it (txtHint).

Thank you again and I am really hoping we’re going to get closer!

Attachments:

You must be logged in to view attached files.

[support-octavio]

Hi tjrtech,

I did a quick review to your files and have some ideas, I’ve ran out of time today and will continue reviewing it tomorrow.

[support-octavio]

Hi tjrtech,

What about using POST instead GET?

Please try changing next in your php file:

$q = trim($_GET['q']);

to

$q = trim($_POST['q']);

Then, change the Form method property on your .mobi file. Instead of calling custom function, let Mobione do the work for you with the form: set the onclick action of your button to submit the form.
Lastly note the phoneui.postSubmitForm_m1_searchResultsTesting function in your _custom.js file, the var data is the info that server is returning, so you should append this info to your html widget:

  var result = true;
  if (isSuccess) {
    
    document.getElementById("searchResultsTesting-txtHint").innerHTML=data;
    result = true;
  } else {
      document.getElementById("searchResultsTesting-txtHint").innerHTML="Error";
    // data = error msg
    result = false;
  }
  return result;

You can use next example as a guide to config your UI:
http://www.genuitec.com/support-genuitec/viewtopic.php?f=14&t=2846

Let me know how it goes and if you need further assistance.

[Author]

Posts