All geek questions in one place

Hide and show div in ajax call in external js file

I am using ASP.net MVC and the following is HTML

 $.ajax({
        type: "POST",
        url: urlAjax,
        dataType: 'json',
        data: dataValue,
        async: false,
        beforeSend: function () {
            $("#waitscreen").show();
        },
        complete: function () {
            $("#waitscreen").hide();
        },
        success: function (data) {
            alert("success")
        },
        error: function (jqXHR, textStatus, error) {
            alert("fail")
        }
    });


<div id=waitscreen>
  //some code
</div>

Code in external js

function _post(someparameter)
{
     $.ajax({
            type: "POST",
            url: urlAjax,
            dataType: 'json',
            data: dataValue,
            async: false,
            beforeSend: function () {
                $("#waitscreen").show();
            },
            complete: function () {
                $("#waitscreen").hide();
            },
            success: function (data) {
                alert("success")
            },
            error: function (jqXHR, textStatus, error) {
                alert("fail")
            }
        });
}

Also tried adding a document ready to code above, it still doesn't work

The above code worked fine, and it showed and hid as expected, but now I need to repeat the ajax call on each page, so I decided to move to an external JS file, now the same code does not show waitscreen.

Things I tried:

  • Loaded external script in head - Doesn't work
  • Loaded external script at the end of the page - Doesn't work

Question: I want to do a job to hide and show from an external JS file

+4
source share
2

. , JS <head> jQuery.

// main window
var json = {"key": "value"}
     console.log('before calling _post()');
    _post(json); // call external JS


// code in external JS say test.js
function _post(someparameter)
{
    console.log('external JS called!');
    $.ajax({
          type: "POST",
          url: 'http://www.niketpathak.com',
          dataType: 'json',
          data: someparameter,
          async: true,  
          beforeSend: function () {
              $("#waitscreen").show();
          },
          complete: function () {
             // $("#waitscreen").hide();
          },
          success: function (data) {
              alert("success")
          },
          error: function (jqXHR, textStatus, error) {
              //delaying the error callback
              setTimeout(function() {
                  $("#waitscreen").hide();
                  console.log('after completing the http-request');
              }, 500);
          }
        });
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=waitscreen>
    Waitscreen....
</div>

, , async: true ( ), false , .

+1

ajax External.js,

function _post() 
{
  var data = {
    Email: "a@a.com",
    Password:"1111"
    }
$.ajax({
    type: "POST",
    url: "/Home/hello/",
    dataType: 'json',
    data: data,
    async: false,
    beforeSend: function () {
        $("#waitscreen").show();
    },
    complete: function () {
        $("#waitscreen").hide();
    },
    success: function (data) {
        alert("success")
    },
    error: function (jqXHR, textStatus, error) {
        alert("fail")
    }
});

}

HomeController hello,

    [HttpPost]
    public ActionResult hello(LoginViewModel data)
    {
        ViewBag.Message = "Your contact page.";

        return Json(data, JsonRequestBehavior.AllowGet);
    }

"waitscreen" div. External.js _Layout, jquery.

<script src="~/Scripts/External.js"></script>

_Layout , ,

<script>
   _post();
</script>

. . hello , like (int x), 500. RouteConfig.js , id. int id. .

0

Source: https://habr.com/ru/post/1670987/

More articles:


All Articles