Datetimepicker Reset to current date after finishing ajax. How to stop it?

  • Resolved jayeshguru

    (@jayeshguru)


    4 years, 10 months ago

    I am using thickbox.

    In thickbox, datetime picker is in another div. Ajax data is update in another div.

    In thickbox on change on period dropdown calling ajax. But after ajax complete datatimepicker value is reset to current datetime.

    Datetimepicker value should be retain after ajax.

    May be it trigger from “Date Time Picker Field wordpress plugin” or It above issue is dueto thickbox.

    Please help me how can i fix this issue.

    HTML CODE

    <div id="learning_link_thickbox" style="display:none;">
  <form action="" id="shareLearningLinkForm">
    <p>Only Show This Period :
      <select name="period_dropdown" id="period_dropdown">
        <option value="">ALL</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </p>  
    <input name="post_id" type="hidden" value="<?= $post_id ?>">
    <div id="loader_student_list"></div>
    <div class="student_list_by_period">
      Ajax data display here.
    </div>

    <div class="schedule_later">
        <input type="text" name="sl_datetimepicker" id="sl_datetimepicker" class="sl_datetimepicker">
    </div>
    <input type="submit" value="Send"> 
  </form>
</div>

<a href="#TB_inline?&inlineId=learning_link_thickbox" class="thickbox">Share</a>

    Ajax call

    jQuery(document).ready(function($) {
    $("#period_dropdown").change(function() {
	var period = $(this).val();
	$.ajax({
		url: customObj.ajaxurl,
		data: {
			'action': 'student_list_by_period',
			'period' : period
		},
		beforeSend: function(){
			$("#loader_student_list").show();
		},
		success:function(data) {
			$('.student_list_by_period').html(data);
		},
		error: function(errorThrown){
			console.log(errorThrown);
		},
		complete:function(data){
			$("#loader_student_list").hide();
		}
	});
   });
});
    • This topic was modified 4 years, 10 months ago by jayeshguru.
    • This topic was modified 4 years, 10 months ago by jayeshguru.
Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi @jayeshguru
    to fix this in the current version you’ll need to make a custom change in the plugin code. If you’re confortable with it, open assets/js/dtpicker.js and change this line:

    .ajaxComplete(function () {
		dtp_init();
	});

    to

    .ajaxComplete(function () {
		//dtp_init();
	});

    In the file dtpicker.min.js it will be in the end:

    ajaxComplete(function(){dtp_init()});
    to
    ajaxComplete(function(){});

    Hope it helps and I’m sorry for the limitations.
    Greetings, Carlos

    Thread Starter jayeshguru

    (@jayeshguru)

    Thank you for your reply. Really appreciate it.

    I already fixed it by updating datetimepicker value in ajax success using settimeout function.

    jQuery(document).ready(function($) {
	var sl_datetimepicker;
	$("#period_dropdown").change(function() {
		var period = $(this).val();
		sl_datetimepicker = $('#sl_datetimepicker').val();
		$.ajax({
			url: customObj.ajaxurl,
			data: {
				'action': 'student_list_by_period',
				'period' : period
			},
			beforeSend: function(){
				$("#loader_student_list").show();
			},
			success:function(data) {
				$('.student_list_by_period').html(data);
				console.log(data);
			},
			error: function(errorThrown){
				console.log(errorThrown);
			},
			complete:function(data){
				setTimeout(() => {
					$('#sl_datetimepicker').val(sl_datetimepicker);
				}, 300);
				$("#loader_student_list").hide();
			}
		});
	});
});
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Datetimepicker Reset to current date after finishing ajax. How to stop it?’ is closed to new replies.