CODEWITHSUNDEEP
c#jqueryhtmlasp.net
alonirock
alonirock

Reputation: 73

My ajax post will not stop running (C#,JQuery,Ajax)

My Ajax call works. It sends data to the database as expected. However, after it completes this task, it will not call the success or fail function. It just keeps running. I set the timeout for the ajax call but it didn't work.

I have a form in my html page

<form class="form-horizontal" id="signupForm" role="form" method="post" name="signupForm" action="">
    <div class="form-group">
       <label class="col-xs-3 control-label" for="TextBoxUsername">Username:</label>
       <div class="col-xs-9"><input type="text" placeholder="username" id="TextBoxUsername" class="form-control" /></div>
    </div>
    <div class="form-group">
       <label class="col-xs-3 control-label" for="TextBoxPassword">Password:</label>
       <div class="col-xs-9"><input type="text" placeholder="password" id="TextBoxPassword" class="form-control" /></div>
    </div>
    <div class="form-group">
       <label class="col-xs-offset-5 control-label" for="selectImage" style="font-weight:bold;font-size:15px;">Choose Your Avatar</label>
    </div>
    <div class="content">
        // I used the Image-Picker jQuery plugin here to create a selection of images and show them as thumbnails
        <select name="selectImage" class="image-picker" id="selectImage" form="signupForm">
           <option class="grid-item" data-img-src="img1.png" value="img1.png">Image 1</option>
           <option class="grid-item" data-img-src="img2.png" value="img2.png">Image 2</option>
           <option class="grid-item" data-img-src="img3.png" value="img3.png">Image 3</option>
        </select>
    </div>
    <div class="form-group">
       <button type="submit" class="btn btn-default">Sign in</button>
    </div>
</form>

This is my jQuery:

// this is my main jQuery function
$(function () {
   // this is my form submit function
   $("form").submit(function (e) {
        e.preventDefault(); // this stops the form from refreshing the page
        create();
   });
});

// this function creates an object to be added to the database
function create() {
   user = new Object();
   user.Username = $("#TextBoxUsername").val();
   user.Password = $("#TextBoxPassword").val();

   // here I am getting the value of the selected item from <select> div
   selectedImage = document.signupForm.selectImage.options[document.signupForm.selectImage.selectedIndex].value;

   // this is just to convert the image to base 64 string.
   var img = new Image();
   img.src = selectedImage;
   // draw canvas
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");
   ctx.drawImage(img, 0,0);
   var imageURL = canvas.toDataURL();
   user.Image = imageURL;
   // end base 64 string conversion

   $.ajax({
      type: "Post",
      url: "api/signup", // this url goes to a controller, it works perfectly
      data: JSON.stringify(data),
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      processData: true,
      timeout: 3000, // does not do anything!
      success: function () {
        // this function is not being called!
        $("#lblstatus").text("User was created!");
      },
      error: function (jqXHR, textStatus, errorThrown) {
        // this function is not being called either!
        errorRoutine(jqXHR);
    }
   });

}; // end create function

Like I said, the database is receiving the data just fine. But for some reason, this ajax call will not stop running. If I manually stop the application from the debugger, I can check the database and everything worked. I just need this ajax call to complete.

Upvotes: 0

Views: 105

Answers (2)

alonirock
alonirock

Reputation: 73

I found the tiny typo culprit.

it was inside the success function. I didn't add the "#" in front of "("lblstatus"). It should have been ("#lblstatus").

silly silly mistake.

Thanks for all the suggestions. It turned out to be a typo afterall.

Upvotes: 0

Vashtamyty
Vashtamyty

Reputation: 112

Try changing the type to button and set an id to it <button type="button" class="btn btn-default" id="submitbtn" >Sign in</button> And handle it by jquery click function $("#submitbtn").click(function () { create(); });

by that, the page will not refresh even if you don't have the e.preventDefault();

since your using an ajax, the form is not needed anyway. So it can work even if you don't have a form tag

Upvotes: 1

Related Questions