Tag: JavaScript

jQuery Ajax is async by nature. We use to set a flag “async:false” if we need to make Ajax call sync (non-blocking). This feature has been deprecated. Here is a compile list of Ajax using jQuery;

Alternative to “async: false” for successive AJAX calls

Handling Sequential AJAX Calls using jQuery

Multiple Simultaneous Ajax Requests (with one callback) in jQuery

jQuery callback for multiple ajax calls

jQuery.when understanding

jQuery Promises – Taking action .when() multiple ajax calls are complete

If you are constructing your URL like this;

message += '<br><a href=/Project/GetFileData?documentId=' + response.Data.vm.DocumentId + '>' + response.Data.vm.FileName + '</a>';

You will get results like this;

https://www.foo.com/Project/GetFileData?1234

This will not work on a web site that has following URL;

https://www.foo.com/demo/Project/GetFileData?1234

To fix this problem in ASP.NET Core, use this;

var url = '@Url.Content("~");
message += '<br><a href=' + url + '/Project/GetFileData?documentId=' + response.Data.vm.DocumentId + '>' + response.Data.vm.FileName + '</a>';

Other useful function to find URL are;

var url = window.location.origin;
var host = window.location.host;
var pathArray = window.location.pathname.split( '/' );

When we try to capture a value from called method we get undefined. The reason is that data hasn’t been fetched yet. Fetch takes some time to make the call and send back the result, and it’s asynchronous, Here is an example;

function getApi() {
  var obj;

  fetch("https://foo.apicode.com/posts/1")
    .then((res) => res.json())
    .then((data) => (obj = data));

  return obj;
}

let x = getApi();
console.log(x);

When we console.log the value, getApi() didn’t finish yet, therefore didn’t set the obj

The fetch method is asynchronous, so obj is undefined because the code is going to the next instruction without waiting the fetch. We can simply use async/await method that is a great way to make asynchronous calls because await will wait for the result before going to the next instruction.

async function getApi() {

      const response = await fetch("https://foo.apicode.com/posts/1")
        
      const obj = await response.json()
      
      return obj;
    }

(async() => {
   let x = await getApi();
   console.log(x);
})()

Resources

https://stackoverflow.com/questions/49432579/await-is-only-valid-in-async-function

This is how to fire jQuery event on ASP.NET Core MVC view load;

HTML

<div class="container">
    <div class="nav">
        <ul id="menu">
            <li id="link1"><a href="#">Topic One</a></li>
            <li id="link2"><a href="#">Topic Two</a></li>
            <li id="link3"><a href="#">Topic Three</a></li>
        </ul>
    </div>
    <div class="main">
        <div id="page1" class="content">
            <h1>Page 1</h1>
            <p>First section of content.</p>
        </div>
        <div id="page2" class="content">
            <h1>Page 2</h1>
            <p>Second section of content</p>
        </div>
        <div id="page3" class="content">
            <h1>Page 3</h1>
            <p>Third section of content.</p>
        </div>
    </div>
</div>

jQuery

<script type="text/javascript">
    $('#menu a').click(function (e) {
        hideContentDivs();
        var tmp_div = $(this).parent().index();
        $('.main div').eq(tmp_div).show();
    });

    function hideContentDivs() {
        $('.main div').each(function () {
            $(this).hide();
        });
    }
    hideContentDivs();

    //fire this event on view load
    $(function () {
        $('#menu li a:first').click();
    });

</script>

This function does the auto click on view load;

$(function () {
    $('#menu li a:first').click();
});

Resources;

https://forum.jquery.com/topic/menu-links-show-hide-content-in-another-div

https://stackoverflow.com/questions/7468950/execute-click-event-on-load

I am assuming that Node.Js is installed on your machine. Use any editor and write this JavaScript;

var http = require('http');
var url = require('url');

http.createServer(function (req, res) {
    console.log("Request: " + req.method + " to " + req.url);

    res.writeHead(200, "OK");
    res.write("<h1>Hello</h1>Node.js is working");
    res.end();
}).listen(80);
console.log("Ready on port 80");

Save it as NodeTest.js.

Open a command prompt and run this;

node NodeTest.js

You should see this;