Take the 2-minute tour ×

In this partial view (sitting inside another view) I have a button, an empty div, and JQuery that loads another partial view into this one... just wondering why it doesn't load on one click, but on two?

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


$("#btnPaymentAdd").click(function () {


    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);
share|improve this question
add comment

1 Answer

up vote 2 down vote accepted

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

    $("#paymentSection").load('/Donation/AddPaymentInfo', function(){

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

    $.get('/Donation/AddPaymentInfo', function(data){

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.

share|improve this answer
Thanks... that's very similar to what I just did... I think the problem may have been I had a couple elements on one of the views/partial views with the same ID involved in this process... But that's what I did in conjunction with making the IDs unique and it seemed to work. Thanks. –  mapleafman May 2 '12 at 2:48
add comment

Your Answer


