Question

Apologies in advance if this becomes a very long question…

Background Info

I have an MVC 3 application, using Telerik components and this particular issue is specific (I think) to the Window() component.

From my main view (Index.cshtml) I executing an ajax request to return a partial view which is what I am populating the contents of my window with. This is the jquery which is executing the request:

var url = '@Url.Action("GetAddPart", "Jobs")';            
var window = $("#Window").data("tWindow");
var data = $("#indexForm").serialize();
window.ajaxRequest(url, data);
window.center().open();

the controller action is:

[HttpGet]
public ActionResult GetAddPart(MDTCompletedJobM model)
{
    // show the AddPart window

    //TryUpdateModel<MDTCompletedJobM>(model);
    model.ActionTakenList = ActionTakenList;
    model.ProblemTypes = ActualProblemList;
    var addPartM = new MDTAddPartM() { CompletedJobM = model };
    return PartialView(string.Concat(ViewDefaultUrl, "AddPart.cshtml"), addPartM);
}

this opens my window hunky dory.

in my partial view i have a form with two or three fields and an “Add”, “Cancel button. For the sake of brevity I’ll just show what I think are the relevant parts of the partial view, but i can produce the entire view if need be:

<div id="resultDiv">
    @using (Html.BeginForm("AddPart", "Jobs", FormMethod.Post, new { id = "addPartForm", name = "addPartForm" }))
    { 

             ** layout components removed from here **

        <input type="button" value="Add" class="t-button" id="btnAdd"/>
        <input type="button" value="Cancel" class="t-button" id="btnCancel"/>

        <p />
        <div id="progressdiv">
        </div>

    }    
</div>

is the “top level” tag in the partial view.

my jquery to handle the Cancel button is:

$("#btnCancel").click(function () {
    var window = $("#Window").data("tWindow");
    window.close();
});

In my main view, I have a submit button, which when completed effectively reders the main view “disabled” or displays errors. The action for this submit button returns the main view:

Controller's action snippet:
            if (ViewData["DoPayJobWarningStr"] == null)
                return RedirectToAction("GetAutoDispatchJob", new { autoDispatchJob = model.JobReferenceNumber});
            else
                return View(string.Concat(ViewDefaultUrl, "Index.cshtml"), tmpModel);

My actual problem

For a specific example I am using, I am expecting ViewData[“DoPayJobWarningStr”] NOT to be null, there the return View(…) will be executed.

if I execute this action (for the submit button) without opening the window, my view returns correctly and the page is updated to show the warning message. However, if I open the window first then execute the submit button, the View isn’t updated on the page, but seems to be placed into the Window’s html. ie, if I hit the submit button (nothing happens), then click on the button which opens the Telerik window, I briefly see the View returned by the submit Action being shown before it’s updated with what the Partial View should contain. I don’t understand at all how or why the returned View is being placed there?

Things I’ve tried:

1. Commenting out the ajax request (window.ajaxRequest(url, data);) fixes the issue (even though I obviously have a blank partial view to look at).
2. Not making the Partial View a “Form” doesnt’ work
3. No matter how I “close” the window, the view is still placed within there. eg clicking the x in the top right hand corner
4. Using Firebug, the HTML after the submit button is clicked is not updated.

5. Rather than using “window.ajaxRequest(url, data)”, i’ve also tried (with the same result):

   $.ajax({
       type: "GET",
       cache: false,
       url: url,
       data: $("#indexForm").serialize(),
       success: function (data) {
           var window = $("#Window").data("tWindow");
           window.content(data);
           window.center().open();
           $("#progress").html('')
       },
       error: function (e) {
           alert(e.Message);
       }
   });
   

Is it all possible to determine what I am doing wrong? Is it the ajax request? Only assuming that because removing it fixes the issue, but there might be more to it than that.

Thanks and of course if you need more info, ask 🙂

Thanks

EDIT

After suggestions from 3nigma, this is what I’ve updated to (still no luck)…

Telerik window definition:

@{Html.Telerik().Window()
    .Name("Window")
    .Title("Add Part")
    .Draggable(true)
    .Modal(true)
    .Width(400)
    .Visible(false)
    .Height(270)
    .ClientEvents(e => e.OnOpen("onWindowOpen"))
    .Render();
}

jquery function which is an OnClick event for a button:

function AddBtnClicked() {
    $("#Window").data('tWindow').center().open();
}

the onWindowOpen event:

function onWindowOpen(e) {
    //e.preventDefault();

    var data = @Html.Raw(Json.Encode(Model));
    var d2 = $.toJSON(data);

    $.ajax({
        type: 'GET',
        url: '@Url.Action("GetAddPart", "Jobs")',
        data: d2,
        contentType: 'application/json',
        success: function (data) {
            var window = $("#Window").data("tWindow");
            window.content(data);
            $("#progress").html('');
        },
        error: function (xhtr, e, e2) {
            alert(e +'\n' + xhtr.responseText);
        }
    });
};

Answer 1

OK.

Issue was related to this line in the Partial View:

<script src="@Url.Content("~/Scripts/ValidationJScript.js")" type="text/javascript"></script>

As soon as I took that out, it all works. Not sure why that was causing the issue – I don’t think it had been previously been loaded but maybe it had which was causing the problem.

Thanks to 3nigma for your thoughts, nonetheless!