kashif kashif - 20 days ago 7
PHP Question

Ajax call not working with onclick

function open_appointment(id)
{
save_method = 'open_appointment';
$('#form_open_appointment')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string

//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('ReceptionistController/ajax_edit_appointment')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{

$.ajax({
url : "<?php echo site_url('ReceptionistController/ajax_edit_patient')?>/" +data.ap_patient,
type: "GET",
dataType: "JSON",
success: function(data)
{

$('[name="pt_id"]').val(data.pt_id);
$('[name="pt_name"]').val(data.pt_name);
$('[name="pt_dob"]').val(data.pt_dob);
$('[name="pt_sex"]').val(data.pt_sex);
$('[name="pt_contact"]').val(data.pt_contact);
$('[name="pt_email"]').val(data.pt_email);
$('[name="pt_address"]').val(data.pt_address);
id=parseInt(id);
var next_id=id+1;
var previous_id=id-1;
//button to call back the function with next id
$('#next_patient').click(function() {
alert("next"+next_id);
open_appointment(next_id);
});
//button to call back the function with previous id
$('#previous_patient').click(function() {
alert("next"+next_id);
open_appointment(previous_id);
});

},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Failed');

}
});

$('#modal_open_appointment').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Open Appointment'); // Set title to Bootstrap modal title

},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}


On click of next button the function is reloaded with the next id (say id 1) But the Problem is On second time click of the next button the function load two time (with current id and with next id say id 1 and 2 ) and for third click it load three time (load id say id 1 id 2 and id 3) . i want it to be only the last id on each click

Answer

try

var next_id=1;
var previous_id=1;
function open_appointment(id)
{
save_method = 'open_appointment';
$('#form_open_appointment')[0].reset(); // reset form on modals
$('.form-group').removeClass('has-error'); // clear error class
$('.help-block').empty(); // clear error string

//Ajax Load data from ajax
$.ajax({
    url : "<?php echo site_url('ReceptionistController/ajax_edit_appointment')?>/" + id,
    type: "GET",
    dataType: "JSON",
    success: function(data)
    {

        $.ajax({
            url : "<?php echo site_url('ReceptionistController/ajax_edit_patient')?>/" +data.ap_patient, 
            type: "GET",
            dataType: "JSON",
            success: function(data)
            {

                $('[name="pt_id"]').val(data.pt_id);
                $('[name="pt_name"]').val(data.pt_name);
                $('[name="pt_dob"]').val(data.pt_dob);
                $('[name="pt_sex"]').val(data.pt_sex);
                $('[name="pt_contact"]').val(data.pt_contact);
                $('[name="pt_email"]').val(data.pt_email);
                $('[name="pt_address"]').val(data.pt_address);
                id=parseInt(id);
                next_id++;
                previous_id--;
            },
            error: function (jqXHR, textStatus, errorThrown)
            {
                alert('Failed');

            }
        });

        $('#modal_open_appointment').modal('show'); // show bootstrap modal when complete loaded
        $('.modal-title').text('Open Appointment'); // Set title to Bootstrap modal title

    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        alert('Error get data from ajax');
    }
  });
 }



$(document).on('click','#next_patient',function() {
    $('#modal_open_appointment').modal('hide');
    alert("next="+next_id);
    open_appointment(next_id);
});
//button to call back the function with previous id
$(document).on('click','#previous_patient',function() {
    $('#modal_open_appointment').modal('hide');
    alert("previous="+previous_id);
    open_appointment(previous_id);
});