jquery .ajax() issue

Question

I am using Jquery 1.7.1 and am having issues.. I'm working with a CRM in my script and am working to get the page finished but I'm stuck with this issue..

my html:

<form class="collector" action="https://www.domain.biz/admin/transact.php" method="POST">
  <input type="hidden" name="method" value="NewProspect">
  <input type="hidden" name="campaignId" value="3">
  <input type="hidden" name="ipAddress" value="<?php echo $_SERVER['REMOTE_ADDR']; ?>">
  <fieldset>
    <div style=" padding-left: 50px">
      <table>
        <tr>
          <td><span style="color:red;">*</span>Your First Name: 
              <span id="rfvFirstName" style="display:none;">*</span>
          </td>
          <td><span style="color:red;">*</span>Your Last Name: 
              <span id="rfvFirstName" style="display:none;">*</span>
          </td>
                                            <td><span style="color:red;">*</span>Your Phone Number: </td>
                                            <td><span style="color:red;">*</span>Primary Email: </td>
                                        </tr>
                                        <tr>
                                            <td>
                                            <input name="firstName" type="text" id="firstName" style="width:150px;" value="">
                                            </td>
                                            <td>
                                            <input name="lastName" type="text" id="lastName" style="width:150px;" value="">
                                            </td>
                                            <td>
                                            <input name="phone" type="text" id="phone" class="" style="width:150px;" value="">
                                            </td>
                                            <td>
                                            <input name="email" type="text" id="email" class="required email" style="width:150px;" value="">
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="clear"></div>
                                <center>
                                    <input type="submit" name="continue" id="imgbtnSubmit" class="button" style="background-image: url('<?php echo base_url();?>inc/img/button-check.png');
                                background-repeat: no-repeat; width: 348px; height: 46px; border:none; background-color:transparent;" value="" />
                                </center>
                            </fieldset>
                            <p align="center" style="font-size:12px;">
                                &nbsp;
                            </p>
                        </form>

the JS:

$('.collector').submit(function(){
    validate = true;
        $(this).find("input:text:visible:enabled").each(function() {
            if ($(this).attr("value") == "") {
                alert("Please fill in all fields!");
                $(this).focus();
                validate = false;
                return false;
            }
            else if ($(this).hasClass("email") && !$(this).attr("value").match(/@/)) {
                alert("Please enter an email address...");
                $(this).focus();
                validate = false;
                return false;
            }
        });
    if (validate != false)  { 
            $.ajax({
                url: $(this).attr('action'),
                type: 'POST',
                data: $(this).serialize(),
                success: function(response) { 
                    alert(response);
                }
            });
        }
    return false;
});

Now both of these things work, and they work together fine... the issue comes in that I don't get any response and I'm not sure why. I imagine it is because of what firebug is saying... POST https://www.domain.biz/admin/transact.php 200 OK 1.04s jquery.js (line 8102)

This line in my firebug is displayed as red, and the line 8102 in jquery.js is: xhr.send( ( s.hasContent && s.data ) || null );

Answer 1

Here are some suggestions that might help you find the error:

In your ajax call, after the success, add the following code:

success: function(response) { 
    alert(response);
},
error: function(response) {
    console.log(response.status + " " + response.statusText);
}

That will print in your console a clue to what is causing this error.

By the way, there are some other suggestions, your validations can be achieved with the new HTML5 input types (email, phone), if you have to maintain compatibility with browsers that don't support these, you can find a jQuery plugin that handles this.

Answer 2

The same thing happened to me.And I used the same version of JQuery (1.7.1) And the weirdest thing is that after adding "asyn:false ",it worked out. I guess this might be a bug of JQuery.

Answer 3

I'm not sure about using $(this).serialize(). Have you tried using $('.collector').serialize() (or whichever the form is) since inside the ajax request the context may change. It's just a quick guess, hope it helps.

Answer 4

Do you make an cross domain ajax request ? I downloaded your code and make a simple test:

Code in

• localhost:8080/domain1/a.php

Make a ajax request to

• localhost:8080/domain2/b.php

Error happens

Code in

• localhost:8080/domain1/a.php

Make a ajax request to the page itself

• (localhost:8080/domain1/a.php)

No error happens and get the expected response.

Then I googled the answer for [jquery.ajax cross domain request],and find some links may helps: jQuery AJAX cross domain

Soluation is : dataType: 'JSONP'

$.ajax({
 url:"testserver.php",
 dataType: 'JSONP', // Notice! JSONP <-- P
 success:function(json){
     // do stuff with json (in this case an array)
     alert("Success");
 },
 error:function(){
     alert("Error");
 },
 });