Databases
StackOverflow2013
Postsdbo
PO.NET MVC & jQuery-UI form inside a model dialog
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO.NET MVC & jQuery-UI form inside a model dialog
    primarykey
    data
    text
    <p>I'm tearing my hair out trying to figure out why I'm encountering this issue. I'm using a jQuery-ui model dialog box as a pop-up form for updating data. This works just fine and dandy until I try to place a div inside of the dialog div that contains the actual form. Opening the modal works fine, but when I press the "cancel" button, I get this error in the javascript console:</p> <pre><code>Uncaught TypeError: Object [object Object] has no method 'dialog' </code></pre> <p>Also, the window never closes. Finally, if I press the "X" button in the top right of the modal, the window will close fine, but I'll get the same error when I try to open the modal again.</p> <p>Here's the relevant code:</p> <p>Divs in the view:</p> <pre><code>&lt;div id="TacticInstanceModal" title="Update Tactic"&gt; &lt;div id="addEditTacticsInstanceContent"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Javascript to initialize the dialog and also populate the inner-div:</p> <pre><code>var addEditTacticInstance = '@Url.Action("Edit", "TacticInstance")'; $('#updateTacticInstanceButton').live("click", function () { $('#TacticInstanceModal').dialog({ resizable: false, modal: true, buttons: { Save: function () { $(this).dialog("close"); SaveTacticInstance(); }, Cancel: function () { $(this).dialog("close"); } } }); $.get(addEditTacticInstance, { id: $(this).parent().parent().find('.tacticInstanceIdField').val() }, function (data) { $('#addEditTacticsInstanceContent').html(data); }); }); </code></pre> <p>Action to load the partial view:</p> <pre><code>public ActionResult Edit(int id = 0) { try { TacticInstance ti = null; if (id != 0) { ti = tacticInstanceRepository.GetSingle(x =&gt; x.TacticInstanceId == id); ti.Tactic = tacticRepository.GetSingle(t =&gt; t.TacticId == ti.TacticId); } else { ti = new TacticInstance(); ti.TacticInstanceId = 0; } TacticInstanceViewModel tacticInstance = new TacticInstanceViewModel { TacticId = ti.TacticId, TacticInstanceId = ti.TacticInstanceId, StartDate = ti.StartDate, EndDate = ti.EndDate, CompletedDate = ti.CompletedDate, PropertyEnrollmentId = ti.PropertyEnrollmentId, TacticName = ti.Tactic.Name //TODO: Implement Assets }; return PartialView("_AddEdit", tacticInstance); } catch (EntityException e) { ErrorSignal.FromCurrentContext().Raise(e); return View("Error"); } catch (Exception ex) { ErrorSignal.FromCurrentContext().Raise(ex); return View("Error"); } } </code></pre> <p>Partial View:</p> <pre><code>@using (Html.BeginForm()) { @Html.ValidationSummary(true) @Html.Hidden("TacticInstance_TacticId", @Model.TacticId) @Html.Hidden("TacticInstance_InstanceId", @Model.TacticInstanceId) @Html.Hidden("TacticInstance_PropertyEnrollmentId", @Model.PropertyEnrollmentId) &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.TacticName, new { @style= "font-weight:bold" } ) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.Label("TacticInstance_Name", Model.TacticName.ToString(), new { id = "TacticInstance_Name" }) &lt;/div&gt; &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.StartDate, new { @style= "font-weight:bold" } ) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.Label("TacticInstance_StartDate", String.Format("{0:MM/dd/yyyy}", Model.StartDate), new { id = "TacticInstance_StartDate" }) &lt;/div&gt; &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.EndDate, new { @style= "font-weight:bold" } ) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.Label("TacticInstance_EndDate", String.Format("{0:MM/dd/yyyy}", Model.EndDate), new { id = "TacticInstance_EndDate" }) &lt;/div&gt; &lt;div class="editor-label"&gt; @Html.LabelFor(model =&gt; model.CompletedDate, new { @style= "font-weight:bold" } ) &lt;/div&gt; &lt;div class="editor-field"&gt; @Html.TextBoxFor(model =&gt; model.CompletedDate, new { id = "TacticInstance_CompletedDate" }) @Html.ValidationMessageFor(model =&gt; model.CompletedDate) &lt;/div&gt; Html.EndForm(); } </code></pre> <p>The strangest thing about this, is that if I comment out the ajax .get in the javascript but copy/paste the generated partial-view HTML into the div on the view, it works just fine. This leads me to believe that the issue is somewhere in the get but I've tried multiple techniques of injecting the html to no avail.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. UStereško
    1. USDave4988
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PO.NET MVC & jQuery-UI form inside a model dialog
      1. This table or related slice is empty.
      1. VTUpMod
    1. COtry `$('#TacticInstanceModal').dialog("close");` instead of `$(this).dialog("close");`
      singulars
      1. PO.NET MVC & jQuery-UI form inside a model dialog
      1. USPete
    2. COThanks for the quick response. Tried that and got the same error: TypeError: Object [object Object] has no method 'dialog'. I think somehow jQuery loses the handle on the dialog for some reason. I've doubled checked that I only reference jquery-ui once, and that seems fine.
      singulars
      1. PO.NET MVC & jQuery-UI form inside a model dialog
      1. USDave4988
    3. COStill looking at the rest but a heads up. .live() has been depricated. You need to replace this line: $('#updateTacticInstanceButton').live("click", function () { with: $(document).on('click','#updateTacticInstanceButton',function(){
      singulars
      1. PO.NET MVC & jQuery-UI form inside a model dialog
      1. USMatthew Davis
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload