CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-chrome
Becky
Becky

Reputation: 2289

Page not loading in Chrome

I have a page I am working on that worked fine up until I added AJAX to it. Now, the page won't even load. I get the "Aw snap! Something went wrong when trying to load this page" message that Chrome gives. The files are on the server. I have no way of pulling up the developer tools because it won't even load. It will load in Internet Explorer, though. Does anyone see anything that would cause this to fail to load? I have never had this issue before.

<!DOCTYPE html>

<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
<head>
    <title></title>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
.block {
    display: block;
    margin: 25px 10px;
}
#text-success {
    display: none;
    color: red;
}
</style>    
</head>
<body>  
<form action="" method="POST">
    <input type="number" placeholder="Phone Number" class="block" id="number">
    <select class="block" id="carrier">
        <option>Verizon</option>
        <option>Virgin Mobile</option>
        <option>Alltel</option>
        <option>AT&T</option>
        <option>Boost Mobile</option>
        <option>Republic Wireless</option>
        <option>Sprint</option>
        <option>T-Mobile</option>
        <option>U.S. Cellular</option>
    </select>
    <textarea placeholder="Your Message" class="block" id="message"></textarea>
    <input type="submit" value="Send Text" id="submit-text">
    <p id="text-successful">Your Message Sent Successfully!</p>
</form>
<script>
jQuery(document).ready(function() {
$("#submit-text").on("click", function(event) {

    var number = $("#number").val();
    var carrier = $("#carrier").val();
    var message = $("#message").val();
});
$.ajax({
    url: "text-send.php",
    type: "POST",
    data: {
        "number": number,
        "carrier": carrier,
        "message": message
},
success: function(data) {
    //console.log(data); // data object will return the response when status code is 200
    if (data == "Error!") {
    alert("Unable to send email!");
    alert(data);
    } else {
        $(".project-container").addClass("removeClass");
        $("#text-success").show();
        $(".light-gray-container").hide();
    }
},
complete: function() {
    $('body, html').animate({
        scrollTop: $('.email-success').offset().top
    }, 'slow');
},
error: function(xhr, textStatus, errorThrown) {
    alert(textStatus + "|" + errorThrown);
    //console.log("error"); //otherwise error if status code is other than 200.
}
});
});
</script>
</body>
</html>

Upvotes: 0

Views: 103

Answers (1)

brk
brk

Reputation: 50291

I think you want to make ajax call on click of button.

Also since input button type="submit" you need to use event.preventDefault() so stop the default behavior & make ajax call. Otherwise you can change type submit to type button

Also the ajax is outside the click function. Perhaps that is the main reason why page is not loading. As it is outside the click it will try to make ajax call as soon as document is ready

jQuery(document).ready(function() {
$("#submit-text").on("click", function(event) {

    event.preventDefault(); 

    var number = $("#number").val();
    var carrier = $("#carrier").val();
    var message = $("#message").val();
 // Removed the closing braces of click function
$.ajax({
    url: "text-send.php",
    type: "POST",
    data: {
        "number": number,
        "carrier": carrier,
        "message": message
},
success: function(data) {
    //console.log(data); // data object will return the response when status code is 200
    if (data == "Error!") {
    alert("Unable to send email!");
    alert(data);
    } else {
        $(".project-container").addClass("removeClass");
        $("#text-success").show();
        $(".light-gray-container").hide();
    }
},
complete: function() {
    $('body, html').animate({
        scrollTop: $('.email-success').offset().top
    }, 'slow');
},
error: function(xhr, textStatus, errorThrown) {
    alert(textStatus + "|" + errorThrown);
    //console.log("error"); //otherwise error if status code is other than 200.
}
}); // Added closing braces
})
});

Upvotes: 1

Related Questions