Posts

Showing posts with the label jQuery

Display Loading/Wait image on Long Process using jQuery

If you are planning to display a logging image on a time consuming task on a web page then this post will help you in doing this. You can make this happen only by following below simple steps Step 1 CSS     .overlay {     background: #e9e9e9;       display: none;             position: absolute;        top: 0;                       right: 0;                     bottom: 0;     left: 0;     opacity: 0.5;     }   #loading-img {     background: url(../Images/Loading.gif) center center no-repeat;/*Add the loading image that you want to show*/     height: 100%;  ...

Add Basic Authentication to ajax request

In this post, I am going to explain how to pass the user credentials to a service that is enabled with basic authentication. In demo example, I have used the ajax jQuery request to connect to a service that validates user based on the credentials that we send in authentication header, if user successfully validated then it will return the data in JSON format and that data will get displayed on webpage in tabular format. If you are interested in getting to know how to enable basic authentication in MVC application, you can refer my this blog. Lets get started Step 1 CDN for   jQuery ,  jQuery min   Step 2 – HTML Code – in this example < table id ="tblProcess">                     < tr >                         < th > Process I...

Add-Edit-Delete-Duplicate rows in HTML table using AngularJS, jQuery and MVC

Image
My client asked me to build the screen that will allow users to add/modify/delete/duplicate records and it should be in tabular format. In this post I am going to use MVC, angularJS, jQuery and HTML technologies to achieve this. Lest get starts Screen mock-up Add Delete/Edit/Duplicate Update Step – 1 CDN for jQuery , jQuery min & angularJS Step -2 HTML Code < script lang ="javascript" type ="text/javascript">     var baseURL = ' @ Url.Action( "Index" ) ' + "/" ; </ script > < div style =" display : none ; color : red" id ="errContainer">     < div class ="span12" id ="divMessage"></ div > </ div > < table id ="tblFutureBulkUpload" style =" font-size : 12px ; padding-left : 5px ; border-color : Black ; border-width : 1px ; border-style : solid ; border-collapse : collapse...