Javascript函数仅在第二次单击时有效

Question

I'm trying to get prescription details of particular patient and the corresponding result is displayed in modal window. Problem is first result is obtained only on 2nd click. On successive click result of previous data is obtained. Below is my HTML:

<table class="table">
    <thead>
        <tr class="text-center" style="font-weight: bold">
            <td></td>
            <td>Name</td>
            <td>ID</td>
            <td>Age</td>
            <td>Registered On</td>
            <td>View Prescription</td>
        </tr>
    </thead>
    <tr class="text-center">
        <td><input name="name" type="text"></td>
        <td><input name="id" type="text"></td>
        <td><input name="age" type="text"></td>
        <td><input name="reg_on" type="text"></td>
        <td>
            <button id="view_prescription_from_patient_list" value="register" onclick="view_prescription_from_patient_list(this.value)">
                <span class="glyphicon glyphicon-share"></span>
            </button>
        </td>
    </tr>
    <div class="modal_show"></div>

function view_prescription_from_patient_list(patient_id) {
    var dataString = "get_what=prescription_list_for_patient_list&patient_id=" + patient_id;
    $.ajax({
        type: "GET",
        url: "ajax_get_data.php",
        data: dataString,
        dataType: "html",
        success: function(response) {
            $('.modal_show').append(response);
        }
    })
}

I tried on.click method within javascript but that also has the same problem.

Answer 1

You are passing a value of "register" ( this.value from the button clicked).

Instead use jQuery to connect and handler the click event (delete the inline onclick handler).

eg

$('#view_prescription_from_patient_list').click(function(){ 
        var patient_id = $(this).closest('tr').find('[name=id]').val();
        var dataString = "get_what=prescription_list_for_patient_list&patient_id=" +  patient_id;
        $.ajax({
           type: "GET",
            url: "ajax_get_data.php",
            data: dataString,
            dataType: "html",
            success: function(response) {
                $('.modal_show').append(response);
            }
        })
    }
});

This will fetch the patent-id from the name="id" TD (which presumably has the ID value - but not shown in your example HTML).

If your code does not follow the DOM elements it references you will also need to wrap it in a DOM ready handler:

$(function(){
    // Your code here
});

Note: $(function(){ is just a shortcut for $(document).ready(function(){

Answer 2

Code with jquery on.('click' and you can get patient_id from the parent td Like $(this).parent().parent().find('input[name=id]').val();

This code may help you to understand

 $('#view_prescription_from_patient_list').on('click',function(){ var patientId = $(this).parent().parent().find('input[name=id]').val(); var dataString = "get_what=prescription_list_for_patient_list&patient_id="+patientId; $.ajax( { type:"GET", url:"ajax_get_data.php", data:dataString, dataType:"html", success:function(response) { $('.modal_show').append(response); } } ) }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table class="table"> <thead> <tr class="text-center" style="font-weight: bold"> <td></td> <td>Name</td> <td>ID</td> <td>Age</td> <td>Registered On</td> <td>View Prescription</td> </tr> </thead> <tr class="text-center"> <td><input name="name" type="text"></td> <td><input name="id" type="text"></td> <td><input name="age" type="text"></td> <td><input name="reg_on" type="text"></td> <td><button id="view_prescription_from_patient_list" value="register" ><span class="glyphicon glyphicon-share"></span></button></td> </tr> 

Answer 3

You're reading wrong value as pointed out in previous answers.
I'd suggest also to use Unobtrusive JavaScript

$( document ).ready(function(){

    $('#view_prescription_from_patient_list').on('click', function(){
        var patient_id = $('[name="id"]', $(this).closest('tr')).val(),
            dataString = "get_what=prescription_list_for_patient_list&patient_id="+patient_id;
        $.ajax({
            // ...
        });
    });
});

---

If you really need to stick to onclick attribute for some reason (althought you shouldn't), pass the button to the method:

<button id="view_prescription_from_patient_list" value="register" onclick="view_prescription_from_patient_list(this)">
     <span class="glyphicon glyphicon-share"></span>
</button>

and then in JS:

function view_prescription_from_patient_list(btn) {
    var patient_id = $('[name="id"]', $(btn).closest('tr')).val(),
        dataString = "get_what=prescription_list_for_patient_list&patient_id=" + patient_id;
    $.ajax({
        // ...
    });
}

Answer 4

Since you are already using jQuery you can wire the "onclick" event of your button using jQuery.

You need to wire your event handler up like this.

$(document).ready(function() {
    $('#view_prescription_from_patient_list').on('click', function(e) {
        e.preventDefault();

        var patientId = $(this).parent().parent().find('input[name=id]').val();

        // do your ajax call here...
    });
});