14 Replies Latest reply on Oct 3, 2016 11:32 AM by VectorP

    post data using jquery mobile

    antu4n

      Hi

       

      I am facing a problem with posting data using jquery mobile.

      1) i have created a new project using phonegap cli

      2) i have added my piece of code using jquery mobile + added a form for posting data to another PHP file

      3) i am using the developer tools from Chrome browser so as to emulate the process

      4) whenever i submit the form i get 404 error

       

      Now i can not find the problem whether is in my config.xml file or so... Anyone's advice is appreciated

       

      Thank you

        • 1. Re: post data using jquery mobile
          VectorP Level 4

          How did you whitelist the external server, where your web service is located?

          • 2. Re: post data using jquery mobile
            antu4n Level 1

            Hi Vector,

             

            currently i do not use external server, it is all locally tested using the " phonegap serve" server

            In index.html i define a form which posts data to demoform.php

             

            Whitelist in config,xml:

             

            <access origin="*" />

                <allow-navigation href = "http://localhost:port/*" />

                <allow-intent href="http://*/*" />

                <allow-intent href="https://*/*" />

            • 3. Re: post data using jquery mobile
              antu4n Level 1

              Hi Vector,

               

              currently i do not use external server, it is all locally tested using the " phonegap serve" server

              In index.html i define a form which posts data to demoform.php

               

              Whitelist in config,xml:

               

              <access origin="*" />

                  <allow-navigation href = "http://localhost:port/*" />

                  <allow-intent href="http://*/*" />

                  <allow-intent href="https://*/*" />

              • 4. Re: post data using jquery mobile
                VectorP Level 4

                Your app is a client. You can't have php files in your assets.

                Try testing in an environment that matches the future production environment, otherwise your test results do not reflect what is going to hapen once the app gets published.

                 

                Secondly:

                - did you include the whitelist plugin from npm?

                - are you waiting for the deviceready event to fire before attempting to make any http request?

                - are you catching the submit event of the form and are you preparing and executing an ajax request (per XHR)?

                1 person found this helpful
                • 5. Re: post data using jquery mobile
                  antu4n Level 1

                  Hi VectorP and thank you for your help

                   

                  As regards the client app i do  know this but if i need to submit data to server side file (a php file) how can i do this?

                   

                  For your questions:

                   

                  1) whiteleist plugin in config_xml file:

                  <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />

                   

                  2) i get this error in command prompt when running phonegap serve --> "[phonegap] [console.log] Error: exec proxy not found for :: StatusBar :: _ready"

                   

                  3) Yes i am catching the submit event as shown in chrome's developer tools but it indicates a 404 error (CANNOT POST demoform.php)

                   

                  Now if i test this app using apache server and a browser the script works just fine.

                  • 6. Re: post data using jquery mobile
                    antu4n Level 1

                    Just for your information V

                     

                    I am using the phonegap cli to test the app locally and then as per your advice i upload it to phonegap build for the next steps

                    • 7. Re: post data using jquery mobile
                      antu4n Level 1

                      and something final may be it helps you out

                       

                      when i upload my files to the phonegap build and obtain the apk file onto my adroid phone it simply not works "Initializing" all the time

                      • 8. Re: post data using jquery mobile
                        antu4n Level 1

                        I think you helped me with this: "Your app is a client. You can't have php files in your assets."

                         

                        I have instead created an external folder (outside my project) as Server_Side and performed an ajax post call using json to this external script using apache web server (120.0.0.1:8080/Server_Side/demoform.php and it is working just fine. Let mw know your thoughts.When this project goes live offcourse i will be using a server side static ip inseatd of the localhost

                         

                        Also please advice if the way i am using to develop a phonegap is correct:

                         

                        1) I create a new project using phonegap create

                        2) i insert my pieces of coding using jquery mobile + javascript + php for server side

                        3) i upload a zip file of the project to phonegap build

                         

                        Cheers Friend

                        • 9. Re: post data using jquery mobile
                          VectorP Level 4

                          1. 'Initializing': do you have both index.html and config.xml in the root directory of whatever you are uploading to PGB?

                          Are you sure you are only uploading your assets and a config, and not the full Cordova project?

                          2. You are pinning an older version of the whitelist plugin. Why? There have been two newer versions on npm, meanwhile.

                          3. Do you 'catch the submit event' using the simple action attribute of the form element? Or do you really have an eventlistener, which in the callback function prepares and executes an XHR (ajax) request?

                          If you don't know, you may want to read up on this. Search for "ajax php tutorial".

                          • 10. Re: post data using jquery mobile
                            antu4n Level 1

                            1. 'Initializing': do you have both index.html and config.xml in the root directory of whatever you are uploading to PGB?

                            Are you sure you are only uploading your assets and a config, and not the full Cordova project?

                             

                            1. i create the project using phonegap create so the zip file contains a config.xml file + the 'www' folder with index.html in it

                             

                            2. You are pinning an older version of the whitelist plugin. Why? There have been two newer versions on npm

                             

                            2. i have updated the phongap cli today and after created a new project this what it includes in the config.xml file (the old version) do not know why

                             

                            3. Do you 'catch the submit event' using the simple action attribute of the form element? Or do you really have an eventlistener, which in the callback function prepares and executes an XHR (ajax) request?

                             

                            3. no i do not catch the submit event in the chrome's developer tools

                            • 11. Re: post data using jquery mobile
                              VectorP Level 4

                              1. That's not what PGB expects. You can't simply upload what Phonegap generates for you as a project.

                              Please read the Getting Started section of the Phonegap Build Docs.

                               

                              2. Then edit the config file which you upload to PGB and remove the spec attribute from the plugin element.

                               

                              3. You should catch the submit event. In the callback function, prepare an ajax request (jQuery will do most part for you) and send the request to your web service. The ajax() function will get data returned  (if your web service does so).

                              1 person found this helpful
                              • 12. Re: post data using jquery mobile
                                antu4n Level 1

                                i will try and come back to you V.

                                 

                                Thank you very much

                                • 13. Re: post data using jquery mobile
                                  antu4n Level 1

                                  My friend V.

                                   

                                  I need your help to better understand this procedures:

                                   

                                  when i create a new phonegap project using the phonegap cli command i get the below directories+filesdirectory.png

                                   

                                  i have created another folder outside this project to act as the server side

                                  when i upload to pgb which files should i upload, just the index.html or the whole project as seen above

                                  In addition can you please advice for future reference if using POST (ajax, json) commands from my app to a server script is considered as a good method or is there any other method more safe.

                                   

                                  thanks

                                  • 14. Re: post data using jquery mobile
                                    VectorP Level 4

                                    You should upload your assets (the /www content) plus your config, in the same directory as index.html. This is the easiest way:

                                    - move config,xml into /www

                                    - adjust the paths to icons/splashes in config

                                    - zip up the contents of /www (not the directory itself).

                                     

                                    And yes, using ajax/xhr to communicate with your web service is the usual and correct method.