Category

JQuery

On scroll load more data in jquery datatable using Ajax

By | JQuery | No Comments

on scroll in a jquery datatable if you want to add more rows or data than you can use scroll methods and some ajax methods.

var processing;
    $(document).ready(function () {
var currentPageID = 1;
var from = 0;
        var to = 30;
$('.dataTables_scrollBody').on('scroll', function () {
            if (processing)
                return false;
            if ($(this).scrollTop() + $(this).innerHeight() >= ($(this)[0].scrollHeight / 2)) {
                processing = true;
                from = to + 1; // load more 30 records and will append
                to = to + 30;
                FillGrid(from, to, currentPosition); // will call for fill datatable
            }
        });





});

and here the fillgrid() method to append the 30 rows to datatable, and on sucess data will come as HTML <tr><td></td></tr> view

function FillGrid(from, to, currentPosition) {
        $.ajax({
            type: "POST",
            url: _rootURL + 'Survey/Grid',
            data: {
                "PageFrom": from,
                "PageTo": to,
            },
            success: function (data) {
                if (!$.trim(data) == '') { 
                    data = data.replace(/^\s*|\s*$/g, '');
                    data = data.replace(/\\r\\n/gm, '');
                    var expr = "</tr>\\s*<tr";
                    var regEx = new RegExp(expr, "gm");
                    var newRows = data.replace(regEx, "</tr><tr");
                    $("#SurveyDetails").DataTable().rows.add($(newRows)).draw();

                    
                    $('.dataTables_scrollBody').scrollTop(currentPosition);
                    processing = false;
                }
                else {
                    processing = true;
                }

            },
            error: function () {
                alert('error');
            }
        })
    }

Ajax post method sample in jquery

By | JQuery | No Comments

How to send, get post data through ajax without refreshing whole page in jquery.

first you have to include jquery script files, you can download from jquery website.

$.ajax({
                cache: false,
                type: "POST",
                url: _rootURL + obj.deleteUrl,
                data: { Token: removeId },
                success: function (result) {
      //result of function, get here or put here data in JSON format
alert("sucess");
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    showErrorNotification('Failed to processed successfully!');
                }
            });

Compare date and time in jquery

By | JQuery | No Comments

To compare date or dateandtime in jquery you have to pass date sring or date in Date() object.

if(new Date($('#txtsearchdatefrom').val()) <= newDate($('#txtsearchdateto').val())) {
//your code....
                }

OR

if(new Date('2018/12/02')<=new Date('2018/12/03'))
{
//your code
}

Preview an image before it is uploadedĀ in Jquery

By | JQuery | No Comments

How to preview image before uploading in jquery.

function readURL(input) {

  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>