Question

Wondering why it doesn’t load on one click, but on two………………………………………………………..?

<input id="btnPaymentAdd" type="button" value="Add Payment Info" />
</p>
<div id="paymentSection"></div>
<br />    

....

$("#btnPaymentAdd").click(function () {
    $("#paymentSection").load('/Donation/AddPaymentInfo');
    $("#paymentSection").show('slow');
});

....

public ActionResult AddPaymentInfo()
{

    var vModel = new PaymentViewModel();
    vModel.Payment = new Payments();
    vModel.PaymentType = new WCCDentalApp.Models.PaymentType();

    ViewBag.PaymentTypes = new SelectList(dbEntities.PaymentTypes.OrderBy(pt => pt.PaymentTypeID),
    "PaymentTypeID", "PaymentType1", vModel.Payment.PaymentTypeID);

    return PartialView("PaymentPView", vModel);
}

Answer 1

You need to bind your .show() function after the page loads…

$("#btnPaymentAdd").click(function(){
    $("#paymentSection").load('/Donation/AddPaymentInfo', function(){
         $(this).show('slow');
    });
});

or you can use .get(), like this:

$("#btnPaymentAdd").click(function(){
    $.get('/Donation/AddPaymentInfo', function(data){
         $("#paymentSection").html(data).show('slow');
    });
});

Otherwise, the way you have it will just do the .show() without waiting for the page to load, will make you think like clicking it twice works.