mvc 5 controller not called more than once

I have a <div> that I load using jquery:
  $("#<divId").load("/controller/action/" + id);
this works perfectly ... ONCE!

if I make a modification to the database (update, delete, add) and call the load function again, I don't see the updates because the second load function never calls the controller!  I'm stumped here!
dan hendersonAsked:
Who is Participating?
 
Chris StanyonCommented:
OK. You've still not shown any HTML so I can't really figure out what's going on. In your AJAX call, try adding in a few logging calls so you can visualise the data being sent to, and received from the server. Try switching out the load() call and use the get call instead. It will allow you to more easily examine the data returned. Keep an eye on the 'Network' tab in your Web Developer tools and check to see what the Server response is.

function SaveNewVictim(form) {
    var formId = '#' + form;
    var url = '/IncidentVictims/Create';
    var frmData = $(formId).serialize();
    console.log(frmData);

    $.ajax({
        type: "POST",
        url: url,
        data: frmData,
        success: function (data) {
            var fetchUrl = '/IncidentVictims/Index/' + data;
            console.log(fetchUrl);
            $("#victim").empty();

            $.get(fetchUrl, function(data) {
                console.log(data);
                $('#victim').html(data);
            });
        }
    });
}

Open in new window

0
 
Chris StanyonCommented:
How do you trigger the load event (button click / on page load / etc.). If it's done from an element that's inside of the <div> you're loading then you will effectively clear the event when new data is loaded in.
0
 
dan hendersonAuthor Commented:
I am loading an edit view (or delete or add), from a button click.  The click event of the button has e.preventDefault(); included.
0
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
dan hendersonAuthor Commented:
after the edit (add, delete) runs from an ajax call, the success event of the ajax call loads the div again, but it is loading something that appears to be cached, since it never calls the controller!
0
 
Chris StanyonCommented:
Will probably need to see your html / jquery code or even better - a link to a working demo
0
 
dan hendersonAuthor Commented:
here's the code. specifically, I load an index view of child records for an incident (incidentId).  I add a new child record (victim) and it updates the database using ajax post.  I return the incidentId from the controller in the success method of the ajax call, which loads the div with index view, but the index view is not updated.  I have been going nuts trying to figure this out.

controller:
public ActionResult Index(string IncId)
        {
            
            if (string.IsNullOrEmpty(IncId))
            {
                return PartialView(db.IncidentVictims.Take(5).ToList());
            }

            var recs = db.IncidentVictims.Where(i => i.IncidentId.Equals(IncId)).ToList();
            ViewBag.IncidentId = IncId;
            return PartialView(recs);
        }


[HttpPost]
        public ActionResult Create(IncidentVictimViewModel vm)
        {
            string iid = vm.IncidentId;

            if (ModelState.IsValid)
            {
                var model = Mapper.Map<IncidentVictimViewModel, IncidentVictim>(vm);
                model.IncidentId = vm.IncidentId;

                db.IncidentVictims.Add(model);
                db.SaveChanges();

                [b]return Content(iid);[/b]
            }

            return View(vm);
        }

Open in new window



and here is the javascript:

    function CreateVictim(IncId) {
        var url = '/IncidentVictims/Create/' + IncId;
        alert(url);
        $('#victim').load(url);
    }

    function SaveNewVictim(form) {
        var formId = '#' + form;
        var url = '/IncidentVictims/Create';
        var frmData = $(formId).serialize();


        $.ajax({
            type: "POST",
            url: url,
            data: frmData,
            success: function (data) {
                var fetchUrl = '/IncidentVictims/Index/' + data;
                alert(fetchUrl);
                $("#victim").empty();
                $('#victim').load(fetchUrl);
            }
        });
    }

Open in new window


as you can see, I am simply returning the incidentId (iid) which is a string value.  Then I use that value to call the index method again to get the new child record ... this all works, but the view is never updated!  please help.
0
 
dan hendersonAuthor Commented:
THANKS!!  You solved it!  I added the code you suggested, and the whole thing came down to doing another .ajax call to reload the list instead of the .load function.  Didn't even think of that.  You have just pushed this project forward by days!  Again, thanks.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.