Click here to Skip to main content
14,427,436 members
Rate this:
Please Sign up or sign in to vote.
I have a piece of code that returns success or error response based on Ajax call.

The alert and all is working fine.

How do i reload the same page from server after this call? Does location.reload does the trick?

$.ajax({
         type: "POST",
         url: "/ChurnFB/InsertQuestionnaireForExistingClCode",
         data: JSON.stringify(questions),
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function (response) {
          if(response.success)
             alert(response.responseText);
             (responseText is return of JSON coming from Controller action method.)
         }
     });



I want to achieve two things :
a> Refreshing the same page.
b> Make the border color of TextBoxes having errors return to normal default style.
This is the Javascript code for which i want the border style to return to default.

question.CLCode = document.getElementById('valCLCode').value;
          question.QSerial = document.getElementById("txtQserial" + counter).value;


HTML code for which i want borderColor to return from red to normal:


<div id="insertDiv" class="row-fluid" style="display:none;">
<div class="row" style="margin-left:0px;">
<div class="col-12">
<div class="widget-box">
<div class="widget-content nopadding">
<table id="tblQuestion" class="table">
<thead>
<tr>
<th>QSerial</th>
<th>QGroup</th>
<th>Question</th>
<th>Description</th>
<th>AnswerType</th>
<th>ManualEntry</th>
<th>ScriptName</th>
<th>ParameterString</th>
<th>ValidFrom</th>
<th>ValidTill</th>
<th></th>
</tr>
</thead>
<tbody id="insertBody">
<tr id="tablerow0">
<td><input style="max-width:50px;" type="text" id="txtQserial0" placeholder="Qserial" required="required" /></td>
<td><input style="max-width:100px;" type="text" id="txtGroup0" placeholder="QGroup" required="required" /></td>
<td><textarea style="max-width:110px;" type="text" id="txtQuestion0" placeholder="Question" required="required"></textarea></td>
<td><textarea style="max-width:110px;" type="text" id="txtDescription0" placeholder="Description" required="required"></textarea></td>
<td>
<select style="max-width:110px;" id="ddlAnswerType0">

<option value="S" selected>Select Any</option>
<option value="N">Number</option>
<option value="T">Text</option>
<option value="C">CheckBox</option>
</select>
</td>
<td><input style="max-width:50px;" type="checkbox" id="chkManualEntryChkBox0" /></td>
<td><textarea style="max-width:110px;" type="text" placeholder="Script Name" id="txtScriptName0"></textarea></td>
<td><textarea style="max-width:110px;" type="text" placeholder="Parameter String" id="txtParameterString0"></textarea></td>
<td><input style="max-width:140px;" type="date" placeholder="Parameter String" id="validFrom0" /></td>
<td><input style="max-width:140px;" type="date" placeholder="Parameter String" id="validTill0" /></td>
<td><i id="addNewRow" style="cursor: pointer;color:grey; font-size: 25px;padding: 2px; display:block;" class="fas fa-plus-circle" aria-hidden="true"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

What I have tried:

Googling some basic CRUD operations. Also tried using abort method but not much helpful.
Posted
Updated 6-Jan-20 8:16am
Comments
ZurdoDev 30-Dec-19 15:34pm
   
Yes, location.reload will reload the page.
Christian Graus 3-Jan-20 23:09pm
   
Given you made an AJAX call, why would you WANT to reload the page? Can't your call give you whatever data you need and you can populate it without a full refresh? That's what AJAX is for
Rate this:
Please Sign up or sign in to vote.

Solution 2

It was pretty simple. Instead I could have focused on stopping the AJAX call reaching the controller.
In controller i used :
return Json(new { success = true, responseText = "Saved successfully!" }, JsonRequestBehavior.AllowGet);



if (isValidate) {
          $.ajax({
          type: "POST",
          url: "/Controller/ActionMethod",
          data: JSON.stringify(questions),
          contentType: "application/json; charset=utf-8",
          dataType: "json",
          success: function (response) {
              if (response.success) {
                  alert(response.responseText);
                  location.reload(true);
              }
              else {
                  alert(response.responseText);
              }

          }
      });
      }



The call goes only when the client side verification finishes and then after response comes from controller, after putting alert message ,I could reload the page to reflect chnages by using location.reload(true) forcing reload from server.
   
Rate this:
Please Sign up or sign in to vote.

Solution 1

Given you made an AJAX call, why would you WANT to reload the page? Can't your call give you whatever data you need and you can populate it without a full refresh? That's what AJAX is for
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100