current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I am trying to use jQueryUI dialogs to show a list of matched data and return the chosen data, via JSon to the original view using ajax/jquery.

The flow is View (user completes textbox and clicks hyperlink) > Partial View in jQuery dialog > JSon data back to form.

My initial question is :-

Q. Should this be possible or am I trying to do something impossible?

If it should be working, here is my code

Index.view

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

@Html.TextBox("Postcode") <a href="#" id = "PCSearch">Search</a>

<div id="mDialog"></div>

<script type="text/javascript">
    $(document).ready(function () {

        $("#mDialog").dialog({
            modal: true,
            width: 550,
            height: 250,
            resizable: true,
            position: 'center',
            title: 'Select Correspondent',
            autoOpen: false,
            dataType: 'json',
            //open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); },
            success: function (data) {

            }
        });

        $('#PCSearch').click(function (e) {
            e.preventDefault();
            $.ajax({
                type: "POST",
                url: "/Item/Search",
                dataType: 'html',
                data: { Postcode: $("#Postcode").val() },
                success: function (data) {
                    $("#mDialog").html(data).dialog('open');
                    console.log("Hello");
                }
            });
        });
    });
</script>

ItemController

[HttpPost]
public ActionResult Search(string postcode)
{
    if (postcode == null || postcode == "")
    {
        return PartialView("SearchByPostCode", null);
    }
    var model = Correspondents.Where(x => x.Postcode.ToLower().Contains(postcode.ToLower()));
    return PartialView("SearchByPostCode", model);
}
[HttpPost]
public ActionResult ChooseCorrespondent(int CorrespondentID)
{
    return Json(CorrespondentID, "text/html");
}

The flow is working fine, User enters text, the Item/Search PartialView is displayed in a modal dialog, when the user selects a button the ChooseCorrespondent is hit, but the page redirects to a blank screen with the CorrespondentID, rather than back to the calling page.

I have tried a number of examples and methods to catch the JSON and update the Index view, but it either fails(errors) or returns the Json to a blank page.

Q. What is the best method for catching the Json returns in these circumstances?

Thanks for taking the time to read this far!

Update

I have combined the javascript into:

    $(document).ready(function () {
    $('#PCSearch').click(function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "/Item/Search",
            dataType: 'html',
            data: { Postcode: $("#Postcode").val() },
            success: function (data) {
                $("#mDialog").html(data).dialog({
                    modal: true,
                    width: 550,
                    height: 250,
                    resizable: true,
                    position: 'center',
                    title: 'Select Correspondent',
                    autoOpen: false
                }).dialog('open');
                //How can I trap the Json returned from this dialog open?
                //Using a bindForm function ?
            }
        });
    });
});

I am trying to trap the returned Json and update the originating page.

share|improve this question

1 Answer 1

up vote 0 down vote accepted

This got a bit convoluted, but is now working

The javascript is

<script type="text/javascript">
        $(document).ready(function () {
            $("#searchClick").live("click", function (e) {
                e.preventDefault();
                var title = 'Select Correspondent';
                var url = '@Url.Action("Select", "Correspondent", new { Postcode = "xx" })'.replace('xx', $("#Postcode").val().replace(" ", ""));
                $('#dialog').load(url, function () {
                    $(this).dialog({
                        open: function (event, ui) { $('#submit').blur(); },
                        title: title,
                        modal: true,
                        width: 700,
                        height: 350,
                        resizable: false
                    })
                    bindForm(this);
                });
                return false;
            });
            $("#searchClear").live("click", function (e) {
                resetCorrespondent();
            });
        });
        function bindForm(dialog) {
            $('form', dialog).submit(function (data) {
                data.preventDefault();
                $('#dialog').dialog('close');
                var chosenID = $("input[type=submit][clicked=true]").prev().val();
                var url = '@Url.Action("Picked", "Correspondent", new { CorrespondentId = "xx" })'.replace('xx', chosenID);
                $.post(url, function (response) {
                    if (response.success) {
                        if (typeof response.Correspondent == 'object') {
                            var $inputs = $('#IC input');
                            $.each(response.Correspondent, function (key, value) {
                                $inputs.filter(function () {
                                   return "Item.Correspondent." + key == this.name;
                                }).val(value).attr("disabled", true);
                           });
                           var text1 = 'Two';
                           $("select option").filter(function () {
                               return $(this).text() == response.Salutation;
                           }).attr('selected', true).attr("disabled", true);
                           $("#Item_CorrespondentID").val(response.Correspondent.CorrespondentID);
                           $("#searchClick").hide();
                           $("#searchClear").show();
                           $("#EnterName").hide();
                           $("#ShowName").show();
                        }
                    }
                    else {
                        resetCorrespondent();
                    }
                });
            });
        }
        function resetCorrespondent() {
            $('#IC input').each(function (i) {
                $(this).val("");
                $(this).removeAttr("disabled");
            });
            $("#searchClick").show();
            $("#searchClear").hide();
            $("#EnterName").show();
            $("#ShowName").hide();

        }
</script>

The Controller is 

    public ActionResult Select(string postcode)
    {
        if (postcode == null || postcode == "")
        {
            return PartialView();
        }
        var model = db.GetCorrespondentByPartialPostcode(postcode); 
        return PartialView("_Select",model);
    }
    [HttpPost]
    public ActionResult Picked(int CorrespondentID)
    {
        Correspondent model = db.GetCorrespondentByID(CorrespondentID);
        return Json(new { success = true, Correspondent = model, Salutation=model.Salutation.Detail }, JsonRequestBehavior.AllowGet);
    }

And the partial view is 

@if (Model == null || Model.Count() == 0)
{
    <div>No matches</div>
}
else
{
foreach (var item in Model)
{
    using (Html.BeginForm("Select", "Three", FormMethod.Post))
    {
        <div>@item.DisplayName <span>@item.SingleLineAddress</span>
        <input type="hidden" id="CorrespondentID" value="@item.CorrespondentID" />
        <input type="submit" value="Select" id="submit" /></div>
    }
}

<script type="text/javascript">
    $(document).ready(function () {
        $("form input[type=submit]").click(function () {
            $("input[type=submit]", $(this).parents("form")).removeAttr("clicked");
            $(this).attr("clicked", "true");
        });
    });
</script>
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.