Ajax Post Error Loading Page

Question

I have a form in which Ajax is used to send data to a php file. THE DATA SENDS PROPERLY...EVERYTHING WORKS FINE... BUT an "Error loading page" message pops up (using jquerymobile)

html file

<div data-role="page" id="cc">
<div data-role="header">
    <h1>Home</h1>
</div>
<div data-role="content">
    <form id="cname" align="left" action="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" value=""  />
        <input type="submit" value="Submit" data-inline="true">
    </form>


    <div id="result" style="visibility: hidden"></div>
</div>
</div>

    <script type="text/javascript">
       $("#cname").submit(function (e) {
           e.preventDefault();
           $.ajax({
               url: 'http://www.clubbedin.isadcharity.org/createclub.php',
               crossDomain: true, //set as a cross domain requests
               type: 'post',
               data: $("#cname").serialize(),
               success: function (data) {
                   $("#result").html(data);
               },
           });
        });
    </script>

php file

header("access-control-allow-origin: *");

$name = $_POST['name'];

Answer 1

Your form must also have have this attribute:

data-ajax="false"

Without it jQuery Mobile will initialize its own ajax logic for form posting and you don't want that. Read more about it here or read my other answer on how to properly handle forms in jQuery Mobile.