Category Archives: Ajax-javscript-jquery

Datepicker jquery validation message not disappear.date picker validation message using rules jquery.

Solution:use the $(this).valid() function in the date picker For example see the below code

<input type="text" class="form-control" id="myDate" name="myDate" value="">

1	<input type="text" class="form-control" id="myDate" name="myDate" value="">

$('#myDate').datepicker({
      autoclose: true
    }).on('change', function() {
        $(this).valid(); 
    });

$('#myDate').datepicker({

autoclose: true

}).on('change', function() {

$(this).valid();

});

Jquery Click event firing Multiple times/On change event happens more than twice

Below Ajax code executing more than once in a single change event.Here if i m trying to upload the file in the ajax call server side script is executing more than once

$('.myfile').on('change',function(){    
  
        $.ajax({
            url: siteUrl+'/getdata',
            async: true,
            type: "POST",
            data: formData,
            dataType: "json",
            success: function (data)
			{ 
                
                 
            }

        });
     });

$('.myfile').on('change',function(){

$.ajax({

url: siteUrl+'/getdata',

async: true,

type: "POST",

data: formData,

dataType: "json",

success: function (data)

{

}

});

Soultion: change the click action with bind option as below

use the below line 
	$('.myfile').unbind().on('change',function(){    
	instead of 
    $('.myfile').on('change',function(){

use the below line

$('.myfile').unbind().on('change',function(){

instead of

$('.myfile').on('change',function(){

Dynamically generated content in the web page contains an onclick action not working

please see the code below link is generated via ajax call based on one dropdown selection

<p  style="padding-left:10px;cursor: pointer;" class="file_download"   uploaded_file_name="'.$data->uploaded_file_name.'"  uploaded_path="'.$data->uploaded_path.'" >'.$data->filename.'</p>

1	<p style="padding-left:10px;cursor: pointer;" class="file_download" uploaded_file_name="'.$data->uploaded_file_name.'" uploaded_path="'.$data->uploaded_path.'" >'.$data->filename.'</p>

file download code looks like as below

  $('.file_download').click(function (e) { 
               var uploaded_file_name = $(this).attr('uploaded_file_name');
                var file_path=$(this).attr('uploaded_path');
                $('#download_hidden_filename').val(uploaded_file_name);
                $("#download_hidden_file_path").val(file_path);
                $('#upload_form_submit').submit();
            });

$('.file_download').click(function (e) {

var uploaded_file_name = $(this).attr('uploaded_file_name');

var file_path=$(this).attr('uploaded_path');

$('#download_hidden_filename').val(uploaded_file_name);

$("#download_hidden_file_path").val(file_path);

$('#upload_form_submit').submit();

});

The above code is not firing the download action Solution: change the first line of code-instead of click add on action

$(document).on("click", '.file_download', function(event) { 
var uploaded_file_name = $(this).attr('uploaded_file_name');
                var file_path=$(this).attr('uploaded_path');
                $('#download_hidden_filename').val(uploaded_file_name);
                $("#download_hidden_file_path").val(file_path);
                $('#upload_form_submit').submit();
            });

$(document).on("click", '.file_download', function(event) {

var uploaded_file_name = $(this).attr('uploaded_file_name');

var file_path=$(this).attr('uploaded_path');

$('#download_hidden_filename').val(uploaded_file_name);

$("#download_hidden_file_path").val(file_path);

$('#upload_form_submit').submit();

});

TypeError: ‘append’ called on an object that does not implement interface FormData.

I m getting the below error while executting the ajax call with FormData TypeError: ‘append’ called on an object that does not implement interface FormData. Present code Looks like as below

var formObj = $('#addTeacherForm');
        var formData = new FormData(formObj[0]);
		$.ajax({
            url: 'chkExistTeacherData',
			async: true,
            type: "POST", 
            data: formData,
            dataType: "html",

var formObj = $('#addTeacherForm');

var formData = new FormData(formObj[0]);

$.ajax({

url: 'chkExistTeacherData',

async: true,

type: "POST",

data: formData,

dataType: "html",

Solution:Please add the below lines of code in the ajax request processData: false