Phonegap ajax form not working

Question

I have the following html/javascript inside my index.html

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
    <script type="text/javascript">
        function PostData() {
            // 1. Create XHR instance - Start
            var xhr;
            if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest();
            }
            else if (window.ActiveXObject) {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
            }
            else {
            throw new Error("Ajax is not supported by this browser");
            }
            // 1. Create XHR instance - End

            // 2. Define what to do when XHR feed you the response from the server - Start
            xhr.onreadystatechange = function () {
              if (xhr.readyState === 4) {
                if (xhr.status == 200 && xhr.status < 300) {
                document.getElementById('div1').innerHTML = xhr.responseText;
                }
            }
            }
            // 2. Define what to do when XHR feed you the response from the server - Start

            var userid = document.getElementById("userid").value;

            // 3. Specify your action, location and Send to the server - Start
            xhr.open('POST', 'localhost:3000/ajax');
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send("userid=" + userid);
            // 3. Specify your action, location and Send to the server - End
        };
    </script>
</head>
<body>


    <div class="app">

        <h1>Ajax Testarea</h1>

            <form>
                  <label for="userid">User ID :</label>
                  <input type="text" name ="userid" id="userid" />
                  <div id="div1"></div>
                  <input type="button" value ="Check" onclick="PostData()" />
            </form>
    </div>



    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>
</body>

Which works perfectly fine on my mac but when I try to get it to work with phonegap I can't click the button to send the form. And therefore it won't launch the PostData() function.

I'm also not sure if it's good practise to put the Javascript directly inside the html or if it's better to place it inside the index.js? I've read about putting it inside:

onDeviceReady: function() {
        app.receivedEvent('deviceready');
   // ---My Code--- 
},

I would be very happy if someone could point me out what I'm doing wrong!

Answer 1

I've had issues using onClick and Jquery's Click functions in Phonegap for iOS. I had to use the jQuery .On() function with touchstart instead

$('#buttonID').on({ 'touchstart' : function(){ /* Do stuff... */ } });

Doesn't look like you're using jQuery so maybe try onTouch="function" or onTouchStart="function" instead of onClick.

Phonegap ajax form not working

Question

1 answers

solution1
0 2015-06-09 13:49:08

Phonegap ajax form not working

Question

1 answers

solution1 0 2015-06-09 13:49:08

solution1
0 2015-06-09 13:49:08