We help IT Professionals succeed at work.

Error system asking me to save Json file after submission

lulu50
lulu50 used Ask the Experts™
on
Hi,

How can I send back my model info to the dialog box ounce I submitted its form.
right now it's asking me to save json file after my submission

         [HttpPost]
        public JsonResult RulePartialView(CABRRulePartialViewModel model)
        {
            model.SelectGroupDataListSource = _careAdvanceBusinessRulessService.GetGroupse();
            model.SelectGroupDataSource = _careAdvanceBusinessRulessService.SelectedDataFromGroup(model.HiddenFieldForSelectedCondition);

            Thread.Sleep(1000);
            return Json(model, JsonRequestBehavior.AllowGet);
}

Open in new window



my dialog box partial view


@model BCUW.Model.CABusinessRules.CABRRulePartialViewModel




<script >
    $(document).ready(function () {

        debugger;

        $('#OperatorSelect').multiselect(getOperatorOptions(true));
        $('#ConditionSelect').multiselect(getOperatorOptions(true));
        $('#ValueSelect').multiselect(getOperatorOptions(true));
        $('#GroupSelect').multiselect(getGroupOptions(true));

        
        $("#ConditionSelect").change(function () {
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            
            $('#RulePartialViewForm').submit();
        });


        function getOperatorOptions(isFilter) {
            return {
                buttonWidth: '170px'
            }
        }


        function getGroupOptions(isFilter) {
            return {
                enableFiltering: isFilter,
                enableCaseInsensitiveFiltering: isFilter,
                filterPlaceholder: 'Search ...',
                nonSelectedText: 'Check an option!',
                numberDisplayed: 1,
                maxHeight: 600,
                buttonWidth: '350px'
            }
        }


       

    });


</script>



<div id="RuleDetailprtDiv" class="panel panel-default" style="width:99.5%;margin-left:3px;">
    <div class="panel-heading">
        <h3 class="panel-title">
            CONDITION ATTRIBUTE(S) AND VALUE(S)
        </h3>
    </div>
</div>

<div id="RuleDetailchldDiv" class="panel panel-default" style="width:99.5%;margin-left:3px;padding-top:25px;padding-left:5px;padding-bottom:25px;">



@using (Ajax.BeginForm("RulePartialView", "CareAdvanceBusinessRules", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "binddata", OnFailure = "FailAlert" }, new { id = "RulePartialViewForm" }))
{
    @Html.HiddenFor(x => x.HiddenFieldForSelectedCondition)
    <table border="0">
        <tbody>
            <tr>
                <td style="width:20%;">
                    <select id="OperatorSelect" name="OperatorSelect" class="btn btn-default dropdown-toggle">
                        <option value="">Select Operator</option>
                        <option value="IF">IF</option>
                        <option value="AND">AND</option>
                        <option value="OR">OR</option>
                    </select>
                </td>
                <td style="width:20%;"> 

                    <select id="ConditionSelect" name="ConditionSelect" class="btn btn-default dropdown-toggle">
                        <option value="0" selected>Select Group</option>
                        @foreach (var data in Model.SelectGroupDataListSource)
                        {
                            if (data.Value == Model.SelectedGroupDataListSourceID.ToString())
                            {
                                <option selected value="@data.Value">@data.Text</option>
                            }
                            else
                            {
                                <option value="@data.Value">@data.Text</option>
                            }
                        }
                    </select>
                </td>
                <td style="width:20%;">
                <select id="ValueSelect" name="ValueSelect" class="btn btn-default dropdown-toggle">
                    <option value="">Select Value</option>
                    <option value="=">=</option>
                    <option value="<>"><></option>
                    <option value="Between">Between</option>
                    <option value="IN">IN</option>
                    <option value="Not IN">Not IN</option>
                    <option value=">">></option>
                    <option value=">=">>=</option>
                    <option value="<"><</option>
                    <option value="<="><=</option>
                </select></td>
                <td style="width:40%">
                    <select id="GroupSelect" name="GroupSelect" class="btn btn-default dropdown-toggle">
                        <option value="0" selected>Select Group</option>
                        @foreach (var data in Model.SelectGroupDataSource)
                        {
                            if (data.Value == Model.HiddenFieldForSelectedCondition.ToString())
                            {
                                <option selected value="@data.Value">@data.Text</option>
                            }
                            else
                            {
                                <option value="@data.Value">@data.Text</option>
                            }
                        }
                    </select>

                </td>
            </tr>
            <tr> 
                <td style="float:right;margin-right:5px;">
                   
                   
                </td>
                <td>
                    @*@Html.TextBoxFor(x => x.CommitID, new { @class = "form-control", @style = "width:100%;" })*@
                    <div id="CommitIDRequiredDiv" style="color:#bc0606;font-weight:bold;">Required Field</div>
                </td>
                <td style="float:right;">
                    @Html.TextAreaFor(x => x.ItemsTextArea, new { @class = "form-control", rows = 6, @style = "width:77%", @maxlength = 900 })</td>
                
              
            </tr>
           


        </tbody>
    </table>


}

</div>

Open in new window


My index page that is calling the Dialog box

  $(function () {
            $('#dialog').dialog({
                autoOpen: false,
                width: 950,
                height:600,
                resizable: true,
                title: 'Condition',
                modal: true,
                open: function(event, ui) {
                    $(this).load("@Url.Action("RulePartialView", "CareAdvanceBusinessRules")")
                    $(".ui-dialog-titlebar-close").hide();
                },
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                },
                closeOnEscape: false,
                //I added new code
                success: function (data) {
                    $("#RulePartialView").html(data)
                },
            });
            $("#opener").click(function (event) {
                event.preventDefault(); 
                $("#dialog").dialog("open");
            });
        });

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Eduard GherguArchitect - Coder - Mentor

Commented:
Hi,
$(this).load("@Url.Action("RulePartialView", "CareAdvanceBusinessRules")")
Who is $(this) in this context?
leakim971Multitechnician
Top Expert 2014

Commented:
How can I send back my model info to the dialog box ounce I submitted its form.

I was thinking you want to :
1) show the dialog box when the user click a button,
2) load your partial view in that dialog box
3) let the user select/fill a form in the dialog box
when the user click on a button inside the form dialog box close the dialog box
4) save/add the select/input from the dialog box TO the main page and update your model

replace :
                success: function (data) {
                    $("#RulePartialView").html(data)
                },

Open in new window

by :
                success: function (data) {
                    $("#RulePartialView").html(data);
                    $(":submit", "#dialog").click(function(event) {
                             event.preventDefault();
                             $("#dialog").dialog("close");
                             // you probably need to add some code
                             // to copy/move the select/input value to your main page/model
                    });
                },

Open in new window

lulu50Web application

Author

Commented:
Oh Thank you for helping me!!!!

1. I have an index page or parent page
2. when the user click on the link a dialog box will appear
3. On the dialog box I have two dropdown list, the user select an option from the drop down list
ounce the user make their selection it should go and populate the second dropdown list selection.

the user select something from this dropdown list 


<script >
    $(document).ready(function () {

   $('#ConditionSelect').multiselect(getOperatorOptions(true));
        $('#GroupSelect').multiselect(getGroupOptions(true));



  $("#ConditionSelect").change(function () {
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            
            $('#RulePartialViewForm').submit();   //I think here the way I'm submitting my form is wrong on my partial view dialog box
        });


        function getOperatorOptions(isFilter) {
            return {
                buttonWidth: '170px'
            }
        }


    });



</script>




my form in the dialog box 


@using (Ajax.BeginForm("RulePartialView", "CareAdvanceBusinessRules", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "binddata", OnFailure = "FailAlert" }, new { id = "RulePartialViewForm" }))
{

<select id="ConditionSelect" name="ConditionSelect" class="btn btn-default dropdown-toggle">
                        <option value="0" selected>Select Group</option>
                        @foreach (var data in Model.SelectGroupDataListSource)
                        {
                            if (data.Value == Model.SelectedGroupDataListSourceID.ToString())
                            {
                                <option selected value="@data.Value">@data.Text</option>
                            }
                            else
                            {
                                <option value="@data.Value">@data.Text</option>
                            }
                        }
                    </select>


  <select id="GroupSelect" name="GroupSelect" class="btn btn-default dropdown-toggle">
                        <option value="0" selected>Select Group</option>
                        @foreach (var data in Model.SelectGroupDataSource)
                        {
                            if (data.Value == Model.HiddenFieldForSelectedCondition.ToString())
                            {
                                <option selected value="@data.Value">@data.Text</option>
                            }
                            else
                            {
                                <option value="@data.Value">@data.Text</option>
                            }
                        }
                    </select>




}



My Controller: 

        [HttpPost]
        public JsonResult RulePartialView(CABRRulePartialViewModel model)
        {

           //this will return the result that would populate the GroupSelect dropdown list
            model.SelectGroupDataSource = _careAdvanceBusinessRulessService.SelectedDataFromGroup(model.HiddenFieldForSelectedCondition);

            Thread.Sleep(1000);
            return Json(model.SelectGroupDataSource, JsonRequestBehavior.AllowGet);



        }

Open in new window


On my index page or parent page I have this code

  $(function () {
            $('#dialog').dialog({
                autoOpen: false,
                width: 950,
                height:600,
                resizable: true,
                title: 'Condition',
                modal: true,
                open: function(event, ui) {
                    $(this).load("@Url.Action("RulePartialView", "CareAdvanceBusinessRules")")
                    $(".ui-dialog-titlebar-close").hide();
                },
                buttons: {
                    "Close": function () {
                        $(this).dialog("close");
                    }
                },
                closeOnEscape: false,
            });
            $("#opener").click(function (event) {
                event.preventDefault(); 
                $("#dialog").dialog("open");
            });
        });

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
ok,  I see

try to replace :
  $("#ConditionSelect").change(function () {
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            
            $('#RulePartialViewForm').submit();   //I think here the way I'm submitting my form is wrong on my partial view dialog box
        });

Open in new window


by :
$("#ConditionSelect").change(function (event) {
        event.preventDefautlt();
        var GetValue = $(this).val();
        $('#HiddenFieldForSelectedCondition').val(GetValue);
        var method = $('#RulePartialViewForm').attr("method").toLowerCase();
        var action = $('#RulePartialViewForm').attr("action");
        var data = $('#RulePartialViewForm').serialize();
        $.ajax({ method: method, url: action, data: data, function(json) {
                alert(json.stringify()); // please post what you get 
        });
});

Open in new window

lulu50Web application

Author

Commented:
I'm getting an error
it says that expected '}'


        $("#ConditionSelect").change(function (event) {
            event.preventDefautlt();
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({ method: method, url: action, data: data, function(json) {
                alert(json.stringify()); // please post what you get
            });    //it shows the error here, I tried to put '}' but then I got a different error
        });


so I changed it to this and I got this error:

JavaScript critical error at line 32, column 66 in http://localhost:63129/CareAdvanceBusinessRules/RulePartialView\n\nSCRIPT1003: Expected ':'

       $("#ConditionSelect").change(function (event) {
            event.preventDefautlt();
            var GetValue = $(this).val();
            $('#HiddenFieldForSelectedCondition').val(GetValue);
            var method = $('#RulePartialViewForm').attr("method").toLowerCase();
            var action = $('#RulePartialViewForm').attr("action");
            var data = $('#RulePartialViewForm').serialize();
            $.ajax({
                method: method, url: action, data: data, function(json) {
                    alert(json.stringify()); // please post what you get
                }
            });
        });
leakim971Multitechnician
Top Expert 2014

Commented:
my bad :

$("#ConditionSelect").change(function (event) {
        event.preventDefautlt();
        var GetValue = $(this).val();
        $('#HiddenFieldForSelectedCondition').val(GetValue);
        var method = $('#RulePartialViewForm').attr("method").toLowerCase();
        var action = $('#RulePartialViewForm').attr("action");
        var data = $('#RulePartialViewForm').serialize();
        $.ajax({ method: method, url: action, data: data, success :function(json) {
                alert(json.stringify()); // please post what you get 
        });
});

Open in new window

lulu50Web application

Author

Commented:
I got two errors

1. event.preventDefault();
2. alert(json.stringify());

I commented both

I don't understand what you mean by this
// please post what you get
model.SelectGroupDataSource  has the data from my second dropdown list "GroupSelect"

Is this how I can send back my model, so my dropdown list "GroupSelect" will get populated?

  [HttpPost]
        public JsonResult RulePartialView(CABRRulePartialViewModel model)
        {
                     model.SelectGroupDataSource = _careAdvanceBusinessRulessService.SelectedDataFromGroup(model.HiddenFieldForSelectedCondition);

            Thread.Sleep(1000);
            return Json(model.SelectGroupDataSource, JsonRequestBehavior.AllowGet);

        }



//Is this correct to have the form as Ajax?

@using (Ajax.BeginForm("RulePartialView", "CareAdvanceBusinessRules", null, new AjaxOptions { HttpMethod = "POST", OnSuccess = "binddata", OnFailure = "FailAlert" }, new { id = "RulePartialViewForm" }))
{
leakim971Multitechnician
Top Expert 2014

Commented:
2. alert(json.stringify()); // please post what you get

this is supposed to display an alert with the JSON string inside
I want to see that string
leakim971Multitechnician
Top Expert 2014

Commented:
here the right code :
    $("#ConditionSelect").change(function (event) {
        event.preventDefautlt();
        var GetValue = $(this).val();
        $('#HiddenFieldForSelectedCondition').val(GetValue);
        var method = $('#RulePartialViewForm').attr("method").toLowerCase();
        var action = $('#RulePartialViewForm').attr("action");
        var data = $('#RulePartialViewForm').serialize();
        $.ajax({ method: method, url: action, data: data, success :function(json) {
                alert(json.stringify()); // please post what you get
            }
        });
    });

Open in new window

leakim971Multitechnician
Top Expert 2014

Commented:
    $("#ConditionSelect").change(function (event) {
        event.preventDefautlt();
        var GetValue = $(this).val();
        $('#HiddenFieldForSelectedCondition').val(GetValue);
        var method = $('#RulePartialViewForm').attr("method").toLowerCase();
        var action = $('#RulePartialViewForm').attr("action");
        var data = $('#RulePartialViewForm').serialize();
        $.ajax({ method: method, url: action, data: data}).done(function(json) {
            alert(json.stringify()); // please post what you get
        });
    });

Open in new window

lulu50Web application

Author

Commented:
I'm getting this error


Unhandled exception at line 87, column 17 in eval code

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'stringify'

If there is a handler for this exception, the program may be safely continued.
leakim971Multitechnician
Top Expert 2014

Commented:
it seems I'm not really up today...

please use this :
    $("#ConditionSelect").change(function (event) {
        event.preventDefautlt();
        var GetValue = $(this).val();
        $('#HiddenFieldForSelectedCondition').val(GetValue);
        var method = $('#RulePartialViewForm').attr("method").toLowerCase();
        var action = $('#RulePartialViewForm').attr("action");
        var data = $('#RulePartialViewForm').serialize();
        $.ajax({ method: method, url: action, data: data}).done(function(json) {
            alert(JSON.stringify(json)); // please post what you get
        });
    });

Open in new window

lulu50Web application

Author

Commented:
ah now I know why you want me to put the alert stringify

I attached an image of the return values that need to populate my GroupSelect dropdown list


  <select id="GroupSelect" name="GroupSelect" class="btn btn-default dropdown-toggle">
                        <option value="0" selected>Select Group</option>
                        @foreach (var data in Model.SelectGroupDataSource)
                        {
                            if (data.Value == Model.HiddenFieldForSelectedCondition.ToString())
                            {
                                <option selected value="@data.Value">@data.Text</option>
                            }
                            else
                            {
                                <option value="@data.Value">@data.Text</option>
                            }
                        }
                    </select>

Open in new window

popup-window.png
lulu50Web application

Author

Commented:
ounce the user select "px' from the ConditionSelect dropdown list
the GroupSelect should be populated based on the passed value

So GroupSelect should have all the px codes.
lulu50Web application

Author

Commented:
How can I populate the data from stringify  to my ConditionSelect Dropdown list?
Multitechnician
Top Expert 2014
Commented:
you get one value, so why a dropdown ?

to set/force a dropdown to display a value :

    $("#ConditionSelect").change(function (event) {
        event.preventDefautlt();
        var GetValue = $(this).val();
        $('#HiddenFieldForSelectedCondition').val(GetValue);
        var method = $('#RulePartialViewForm').attr("method").toLowerCase();
        var action = $('#RulePartialViewForm').attr("action");
        var data = $('#RulePartialViewForm').serialize();
        $.ajax({ method: method, url: action, data: data}).done(function(json) {
               $("#GroupSelect").val(json[0].Value); // Assuming th dropdown GroupSelect is already populated
        });
    });

Open in new window


else :

    $("#ConditionSelect").change(function (event) {
        event.preventDefautlt();
        var GetValue = $(this).val();
        $('#HiddenFieldForSelectedCondition').val(GetValue);
        var method = $('#RulePartialViewForm').attr("method").toLowerCase();
        var action = $('#RulePartialViewForm').attr("action");
        var data = $('#RulePartialViewForm').serialize();
        $.ajax({ method: method, url: action, data: data}).done(function(json) {
                 $("#GroupSelect").html("<option value='" + json[0].Value + "'>" + json[0].Text + "</option>"); // this will populate the GroupSelect dropdown from what you displayed in the image (alert)
        });
    });

Open in new window

lulu50Web application

Author

Commented:
I tried the example below but wasn't able to populate it.

 $.ajax({ method: method, url: action, data: data}).done(function(json) {
                 $("#GroupSelect").html("<option value='" + json[0].Value + "'>" + json[0].Text + "</option>"); // this will populate the GroupSelect dropdown from what you displayed in the image (alert)
        });


the return value can be more than one, should we have to loop thru

I created more records for testing and attached a print screen of how it will look like
popup-window.png
Eduard GherguArchitect - Coder - Mentor

Commented:
Hi,
If you want a more responsive approach, it's not a good practice to render a form in a jQuery dialog but to create a model 'behind' that you can use as the data source for your dialog. Of course, it will be required to sync the data between this model and the back-end, but that should not be necessarily done on each dialog display. But, if the solutions previously presented are more suitable, you can follow them.
Eduard GherguArchitect - Coder - Mentor

Commented:
$("#GroupSelect").html(...) will replace the content. If you want to add the options, you'll need to use .append() instead.
lulu50Web application

Author

Commented:
Thank you for all your help
lulu50Web application

Author

Commented:
Thank you
leakim971Multitechnician
Top Expert 2014

Commented:
no matter how many value you're returning, it should add at least the first one (your initial image had only one)
this is not the issue
the current issue is why you don't see at least one value
after we fix this issue, we can go over and loop and use append

here and example showing that work : https://jsfiddle.net/1c40ueky/

as you see the second dropdown MUST be present and have the right ID before trying to set its content or append new option inside
maybe you don't have it yet or it's not the right ID
leakim971Multitechnician
Top Expert 2014

Commented:
oh did not see you fixed it
good work