Ajax works on Projects

//Refresh particular element with jQuery
1. $("#printablediv").load(location.href + " #printablediv"); // Add space between URL and selector.
   Or
   $("#MainForm").load(location.href+" #MainForm", function() {
                            $(".select2").select2();
                        });
2. $('#showDetaildModalBody').load("<?php echo base_url('setup/OrganizationSetup/create')?>");
3. $("#find_gen_sdl").trigger("click");
4. Another Ajax Request inside Success Method
5. location.reload();
6. window.location =windowRedirect; //Redirect path
7. $('html, body').animate({
    scrollTop: $("#divTwo").offset().top
  }, 2000);
  
8. 
var data = $(".frmContent").serialize();
var url = '<?php echo base_url() ?>reportViewPrint/strengthByBranch/genPDF';
window.open(url+'?'+ data, '_blank');
9. table.ajax.reload();
10. 
//window.scrollTo(0, 0);
/* $("html, body").animate({ scrollTop: 0 }, 200);
$('.alert-msg').fadeIn(1, function(){
    $('.alert-msg').fadeOut(2000);
});*/

// scroll top and hide
$('html, body').animate({
    scrollTop: 0
},50,"linear", function() {
    $('.alert-msg').fadeIn(1, function(){
        $(this).fadeOut(500);
    });
});

11. GET Request for Report
var data = $(".frmContent").serialize();
var url = '<?php echo base_url() ?>reportViewPrint/strengthByBranch/branchPreview';
window.open(url+'?'+ data, '_blank');
		

//Last segment of URL i.e, http://mywebsite/folder/file
alert(formAction.substr(formAction.lastIndexOf('/') + 1));
--OR
var parts = formAction.split('/');
var lastSegment = parts.pop() || parts.pop();  // handle potential trailing slash

//Base URL
var baseUrl = window.location.protocol + "//" + window.location.host + "/";
var baseUrl = window.location.origin;
var wholeUrl = window.location.origin+window.location.pathname;
//Same page for form submission
var samePageUrl = window.location.href;

For example: http://ex.com:82/mypage.html
Here, window.location.origin = http://ex.com:82
      window.location.pathname = /mypage.html
      
//Current URL
window.location.href

//Find numeric from numeric with character string
var thenum = thestring.replace( /^\D+/g, ''); // replace all leading non-digits with nothing
var thenum = "foo3bar5".match(/\d+/)[0] // "3"
...OR
var str="foo3bar5";
var pattern =/\d+/;
var res = pattern.test(str); //true
  
  


//Published and Unpublished button
//v.01
if (result == '0' || result == '1' ){
    alert("in");
    $(myID).toggleClass("red");

    if( $(myID).is('.green') )
	$(myID).text('publish');

    if( $(myID).is('.red') )
	$(myID).text('unpublish');
    alert("done");
}
//v.02
$("button#publish").click(function() {
	var id = $(this).attr("value");
	var progress = '#'+$(this).attr('progress'+id);
	$('#progress'+id).show();
	if ($(this).text() == 'published')
	    $(this).text('unpublished');
	else
	    $(this).text('published');
	$(this).toggleClass('green');
	$(this).toggleClass('red');
	$.ajax({
		type: "POST",
		url: "ajax/blogPublishUnpublish.php",
		data: "id="+ id ,
		success:function(result){
		    if (result == -1){
			// add X button in case if fails !
		    }
		    $('#progress'+id).hide();
	    }
	});
})

//v.03 My Work
//Tender Status Change
$(document).on('click','.TenderStatus',function (event) {
    event.preventDefault();
    var button = $(this);
    var id = $(this).data('id');
    var value = $(this).data('value');
    var url = baseUrl+"/back/StatusUpdateById";
    $.ajax({
        url: url,
        type: 'POST',
        data: {id:id, value:value},
        success: function(data){
            console.log('Status updated Successfully');
            if (button.text() == 'Published'){
                button.text('Unpublished');
                button.attr('data-value','A');
            }else{
                button.text('Published');
                button.attr('data-value','B');
            }
            button.toggleClass('btn-danger');
            button.toggleClass('btn-success');
        },
        error:function () {
            console.log('Error: Status not updated');
        }
    });
});


//Image upload v.01
$(document).ready(function (e) {
    $('#imageUploadForm').on('submit',(function(e) {
        e.preventDefault();
        var formData = new FormData(this);

        $.ajax({
            type:'POST',
            url: $(this).attr('action'),
            data:formData,
            contentType: false,
            processData: false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });
    }));

    $("#ImageBrowse").on("change", function() {
        $("#imageUploadForm").submit();
    });
});

//Image upload v.02
var form = $('form')[0]; // You need to use standard javascript object here
var formData = new FormData(form);
or specify exact data for FormData()

var formData = new FormData();
formData.append('section', 'general');
formData.append('action', 'previewImg');
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]); 
Sending form

Ajax request with jquery will looks like this:

$.ajax({
    url: 'Your url here',
    data: formData,
    type: 'POST',
    contentType: false, // NEEDED, DON'T OMIT THIS (requires jQuery 1.6+)
    processData: false, // NEEDED, DON'T OMIT THIS
    // ... Other options like success and etc
});
After this it will send ajax request like you submit regular form with enctype="multipart/form-data"

//Image upload v.03
<form id="upload_form" enctype="multipart/form-data">
jQuery with CodeIgniter file upload:

var formData = new FormData($('#upload_form')[0]);

formData.append('tax_file', $('input[type=file]')[0].files[0]);

$.ajax({
    type: "POST",
    url: base_url + "member/upload/",
    data: formData,
    //use contentType, processData for sure.
    contentType: false,
    processData: false,
    beforeSend: function() {
        $('.modal .ajax_data').prepend('<img src="' +
            base_url +
            '"asset/images/ajax-loader.gif" />');
        //$(".modal .ajax_data").html("<pre>Hold on...</pre>");
        $(".modal").modal("show");
    },
    success: function(msg) {
        $(".modal .ajax_data").html("<pre>" + msg +
            "</pre>");
        $('#close').hide();
    },
    error: function() {
        $(".modal .ajax_data").html(
            "<pre>Sorry! Couldn't process your request.</pre>"
        ); // 
        $('#done').hide();
    }
});
you can use.

var form = $('form')[0]; 
var formData = new FormData(form);     
formData.append('tax_file', $('input[type=file]')[0].files[0]);
or

var formData = new FormData($('#upload_form')[0]);
formData.append('tax_file', $('input[type=file]')[0].files[0]); 

//simple ajax
 $('.add_cart').click(function(){
	var product_id = $(this).data("productid");
	var product_name = $(this).data("productname");
	var product_price = $(this).data("price");
	var quantity = $('#' + product_id).val();
	
	if(quantity != '' && quantity > 0)
	{
		$.ajax({
			url:"<?php echo base_url(); ?>shopping_cart/add",
			method:"POST",
			data:{product_id:product_id, product_name:product_name, product_price:product_price, quantity:quantity},
			success:function(data)
			{
			 alert("Product Added into Cart");
			 $('#cart_details').html(data);
			 $('#' + product_id).val('');
			}
		});
	}else{
		alert("Please Enter quantity");
	}
 });
 
//delete
$('#publicity_delete').on('click',function(){
    var deleted_row = $(this).parent().parent();
    var id = $(this).data('id');
    var url = '<?php echo base_url("publicity/delete"); ?>';

    if (confirm('Are you sure to delete?')) {
	$.ajax({
	    type:'post',
	    url:url,
	    data:{publicity_id:id},
	    success:function(data){
		if (data=='yes') {
		    deleted_row.fadeOut().remove();
		    alert("Deleted successfully"); 
		    //Refresh particular element with jQuery
                    $("#printablediv").load(location.href + " #printablediv"); // Add space between URL and selector.
		}
	    },
	    error:function(){
		alert('Error deleting');
	    }
	});
    }
});
	
//delete- 
$('#showdata').on('click', '.item-delete', function(){
	var id = $(this).data('id');
	$('#deleteModal').modal('show');
	//prevent previous handler - unbind()
	$('#btnDelete').unbind().click(function(){
		$.ajax({
			type: 'get',
			async: false,
			url: '<?php echo base_url() ?>employee/deleteEmployee',
			data:{id:id},
			dataType: 'json',
			success: function(response){
				if(response.success){
					$('#deleteModal').modal('hide');
					$('.alert-success').html('Employee Deleted successfully').fadeIn().delay(4000).fadeOut('slow');
					showAllEmployee();
				}else{
					alert('Error');
				}
			},
			error: function(){
				alert('Error deleting');
			}
		});
	});
});

//Check passport
    $("#lnd_passport").on('keyup change', function(){
        var lnd_passport = $(this).val();
        var url = "super_admin/checkDuplicateDataLandlord";

        $.ajax({
            url: url,
            type: "POST",
            data: {lnd_passport:lnd_passport},
            success: function(data){
                if(data==1){
                    $("#lnd_passportMsg").text("Passport Already Exists!");
                    $("#lnd_passportMsg").css({"color": "red"});
                    $("#lnd_passport").css({"border": "1px solid red"});
                    $("#lnd_passportMsg").fadeIn(1000);
                    $(".submit").attr("disabled", "disabled");
                }else{
                    $("#lnd_passportMsg").fadeOut(2000);
                    $("#lnd_passport").css({"border":"1px solid #ccc"});
                    $(".submit").removeAttr("disabled", "disabled");
                }
            }
        });
    });

============================
$("#oldpass").on('keyup', function(){
    var oldpass = $(this).val();
    var oldURL = "<?php echo site_url("form/chck"); ?>";

    $.ajax({
	    url: oldURL,
	    type: "POST",
	    data:{oldpass:oldpass},
	    success:function(data){
		if(data==0){
		    $(".mgs").text("Not Match!");
		    $(".mgs").css({"color": "red"});
		    $(".mgs").fadeOut(2000);
		    $(".submit").attr("disabled", "disabled");
		} else {
		    $(".mgs").html("Matched!");
		    $(".mgs").fadeIn(2000);
		    $(".mgs").css({"color": "green", "font-weight": "bold"});
		    $(".submit").removeAttr("disabled", "disabled");
		}
	    }
	});
});

//
<script>
$("#gender").on("change", function() {
  $.ajax({
    type: "POST",
    data: {
      "gender": $("#gender").val()
    },
    url: "response.php",
    dataType: "json",
    success: function(JSONObject) {
      var peopleHTML = "";

      // Loop through Object and create peopleHTML
      for (var key in JSONObject) {
        if (JSONObject.hasOwnProperty(key)) {
          peopleHTML += "<tr>";
            peopleHTML += "<td>" + JSONObject[key]["name"] + "</td>";
            peopleHTML += "<td>" + JSONObject[key]["gender"] + "</td>";
          peopleHTML += "</tr>";
        }
      }

      // Replace table’s tbody html with peopleHTML
      $("#people tbody").html(peopleHTML);
    }
  });
});
</script>

//
function showMessageSuccess(message){
	if(message=="") return;
	$.ajax({
		url: baseUrl+"Home/showMessage/SUCCESS",
		type: "GET",
		data: {message: message},
		success: function(result){
			$("#message").append(result);
		},
		error: function(error){
			log("ERROR: showMessageSuccess error!");
		}
	});	
}

//
$(document).ready(function() {
	$("#mobile").on("keyup change", function(){
		var mobile = $(this).val();
		var formURL = "http://www.nextadmission.com/form/mobile_check";
		  $.ajax({
			url : formURL,
			type : "POST",
			data : { mobile_no : mobile},
			success : function(data){			
				if(data == 1){
					$(".chk").text("This user already Exists!!");
					$(".submit").attr('disabled','disabled');
					$(".chk").addClass("red");
				}else {
					$(".chk").text("");
					$(".chk").removeClass("red");
					$(".submit").removeAttr('disabled','disabled');
				}
			}
		 });
	});

	//alert("Hello! welcome");
});

//
$.ajax({
    type: 'POST',
    url: _url,
    data: {name: name, pass: pass},
    dataType: 'jsonp',
    beforeSend: function(){
        if((!name) || (!pass)){
            notify('error','Kérlek tölts ki minden adatot!');
            return false;
        }else{
            $("#loginForm #loginBtn").prop("disabled", true);  
        }
    },
    success: function(data){
    if(data[0].true == 'true'){
            window.localStorage["username"] = name;
            window.localStorage["password"] = pass;  
            $.mobile.changePage("#wall",{transition:"slide", reverse:false});
        }else{
            $('#loginForm #name').val("");
            $('#loginForm #pass').val("");
            notify('error','Hibás adatok!');
        }
    },
    error: function(err){
    //átírni ha a cordovajs be lesz szúrva!!!
    alert('Hiba: '+err.message);
}
});

$("#loginForm #loginBtn").prop("disabled", false);
return false;
}

// This function is used to get error message for all ajax calls
function getErrorMessage(jqXHR, exception) {
    var msg = '';
    if (jqXHR.status === 0) {
        msg = 'Not connect.\n Verify Network.';
    } else if (jqXHR.status == 404) {
        msg = 'Requested page not found. [404]';
    } else if (jqXHR.status == 500) {
        msg = 'Internal Server Error [500].';
    } else if (exception === 'parsererror') {
        msg = 'Requested JSON parse failed.';
    } else if (exception === 'timeout') {
        msg = 'Time out error.';
    } else if (exception === 'abort') {
        msg = 'Ajax request aborted.';
    } else {
        msg = 'Uncaught Error.\n' + jqXHR.responseText;
    }
    $('#post').html(msg);
}

//Preloader
JS:
<script type="text/javascript">
jQuery(document).ready(function($) {
    $(window).load(function(){
	$('#preloader').fadeOut('slow',function(){$(this).remove();});
    });
});
</script>

style: 
#preloader { position: fixed; left: 0; top: 0; z-index: 999; width: 100%; height: 100%; overflow: visible; background: #333 url('../images/loading.gif') no-repeat center center; }   

HTML:
<body>
	<div id="preloader"></div>
	

//Image Preview
<div class="row">
    <img id='lnd_photo_preview' src="<?php echo base_url();?>backend_assets/img/noimage.png" alt="আপনার ছবি দিন" class="img-thumbnail" width="150">
    <div class="form-group"><br>
        <label>আপনার ছবি দিন</label>
        <input id="lnd_photo" type="file" name="lnd_photo" >
    </div>
</div>

//script:
//Image preview for landlord
function readImgURLlnd(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

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

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

$("#lnd_photo").change(function(){
    readImgURLlnd(this);
    console.log('File selected');
});
//End image preview

//Ajax All kinds of data upload
function submit_cus(){
        var Customer_id= $("#Customer_id").val();
		//alert($("#district").val());
        var cus_name= $("#cus_name").val();
        if(cus_name==""){
            $("#cus_name_").html("Required Filed").css("color","red");
            return false;
        }
        var address= $("#address").val();
        if(address==""){
            $("#address_").html("Required Filed").css("color","red");
            return false;
        }
		var praddress= $("#praddress").val();
        if(praddress==""){
            $("#praddress_").html("Required Filed").css("color","red");
            return false;
        }
        var gur_name = $("#gur_name").val();
        var gur_contact = $("#gur_contact").val();
        var gur_address = $("#gur_address").val();
		var district= $("#district").val();
         if(district==""){
            $("#district_").html("Required Filed").css("color","red");
            return false;
        }
        var country= $("#country").val();
         if(country==""){
            $("#country_").html("Required Filed").css("color","red");
            return false;
        }
        var phone= $("#phone").val();
        var mobile= $("#mobile").val();
         if(mobile==""){
            $("#mobile_").html("Required Filed").css("color","red");
            return false;
        }
        var email= $("#email").val();
        var office_phone= $("#office_phone").val();
        var web= $("#web").val();
        var credit= $("#credit").val();
				//alert('hi');

		   var fd = new FormData();
          fd.append('biodata', $('#biodata')[0].files[0]);
		  fd.append('photo', $('#photo')[0].files[0]);
          fd.append('Customer_id', $("#Customer_id").val());
          fd.append('cus_name', $("#cus_name").val());
          fd.append('address', $("#address").val());
		  fd.append('praddress', $('#praddress').val());
          fd.append('gur_name', $('#gur_name').val());
          fd.append('gur_contact', $('#gur_contact').val());
          fd.append('gur_address', $('#gur_address').val());
		  fd.append('district', $('#district').val());
          fd.append('country', $('#country').val());
          fd.append('phone', $('#phone').val());
          fd.append('mobile', $('#mobile').val());
          fd.append('email', $('#email').val());
          fd.append('web', $('#web').val());
          fd.append('credit', $('#credit').val());
		  fd.append('notes', $('#notes').val());
       
        
        var urldata = "<?php echo base_url();?>Administrator/customer/insert_customer";
        //alert(inputdata);
        $.ajax({
            type: "POST",
            url: urldata,
            data: fd,
	    cache:false,
            processData: false, 
            contentType: false,
            success:function(data){
                $("#saveResult").html(data);
                alert("Save Success");
            }
        });
    }
    
//End Ajax all kinds of data uploads

//Ajax using submit event
$(document).on('submit', '.myForm', function(e) {
     $.ajax({
        url: $(this).attr('action'),
        type: $(this).attr('method'),
        data: $(this).serialize(),
        success: function(html) {
        alert('ok');
        }
    });
    e.preventDefault();
});