jquery - 0x800a139e - JavaScript runtime error: cannot call methods on dialog prior to initialization; attempted to call method 'close' -

-

i have cancel button not working on jquery modal dialog , appreciate help. exception i'm getting when click on cancel button of modal:

0x800a139e - javascript runtime error: cannot call methods on dialog prior initialization; attempted call method 'close'

this partial view i'm displaying on modal: 

@model models.office @{       layout = null; }  @scripts.render("~/bundles/jquery")     @scripts.render("~/bundles/jqueryui")     @styles.render("~/content/bootstrap")     @scripts.render("~/bundles/bootstrap")     @styles.render("~/content/css")     @styles.render("~/content/themes/base/css")     @scripts.render("~/bundles/modernizr") <script src="~/scripts/jquery.validate.min.js"></script> <script src="~/scripts/jquery.validate.unobtrusive.min.js"></script> <script src="~/scripts/jquery.unobtrusive-ajax.min.js"></script>  <script type="text/javascript">     function closemodal() {         $(this).dialog("close");         } </script>   @*@using (ajax.beginform("editoffice", "admin", new ajaxoptions { httpmethod = "post", updatetargetid = "edit-dialog" }))*@ @using (html.beginform("createeditoffice", "admin", "post")) {      <fieldset>         <legend>office</legend>         @if (viewbag.isupdate == true)         {              @html.hiddenfor(model => model.officeid)         }          <div class="display-label">             @html.displaynamefor(model => model.officename)         </div>         <div class="input-medium">             @html.editorfor(model => model.officename)             @html.validationmessagefor(model => model.officename)         </div>          <div class="display-label">             @html.displaynamefor(model => model.supportno)         </div>         <div class="input-medium">             @html.editorfor(model => model.supportno)             @html.validationmessagefor(model => model.supportno)         </div>          <div class="display-label">             @html.displaynamefor(model => model.supportemail)         </div>         <div class="input-medium">             @html.editorfor(model => model.supportemail)             @html.validationmessagefor(model => model.supportemail)         </div>         <div class="display-label">             @html.displaynamefor(model => model.supportfax)         </div>         <div class="input-medium">             @html.editorfor(model => model.supportfax)             @html.validationmessagefor(model => model.supportfax)         </div>          <div class="display-label">             @html.displaynamefor(model => model.supportftp)         </div>         <div class="input-medium">             @html.editorfor(model => model.supportftp)             @html.validationmessagefor(model => model.supportftp)         </div>     </fieldset>     <br />     <div class="pull-right">         @if (viewbag.isupdate == true)         {              <button class="btn btn-primary" type="submit" id="btnupdate" name="command" value ="update">update</button>         }         else         {              <button class="btn btn-primary" type="submit" id="btnsave" name="command" value="save">save</button>         }             <button type="button" id="cancel" class="btn btn-primary" onclick="closemodal()">cancel</button>     </div> }

then scrip on parent view:

<script type="text/javascript">     $(document).ready(function () {         $(".editdialog").on("click", function (e) {             // e.preventdefault(); use or return false             var url = $(this).attr('href');             $("#dialog-edit").dialog({                 title: 'edit office',                 autoopen: false,                 resizable: false,                 height: 450,                 width: 380,                 show: { effect: 'drop', direction: "up" },                 modal: true,                 draggable: true,                 open: function (event, ui) {                     $(this).load(url);                 },                 close: function (event, ui) {                     $("#dialog-edit").dialog().dialog('close');                 }             });              $("#dialog-edit").dialog('open');             return false;         });     });    </script>

what i'm doing wrong ????

inline handlers such onclick="closemodal()" not set this inside function being called. have pass this reference inline:

onclick="closemodal(this)"  function closemodal(el) {     $(el).dialog("close"); }

or attach handler jquery , set this reference inside of event handler:

//instead of onclick="", attach handler inside dom ready: $(function() {     $('#cancel').click(closemodal); }); function closemodal() {     $(this).dialog("close"); }

this assumes #cancel present when page structure finished rendering , markup valid (no duplicated ids).


Comments

Post a Comment

Popular posts from this blog

Perl - how to grep a block of text from a file -

-
it can in xml or text format. how in general grep block of text in perl? <track type="ws"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>0</locationindex> <propertyindex>0</propertyindex> </range> </track> <track type="ps" id="1"> <range> <rangestart>0</rangestart> <rangeend>146.912</rangeend> <locationindex>1</locationindex> <propertyindex>1</propertyindex> </range> </track> i want grep type="ps" , till </range> . one solution open file, read line line , match block. open(fh, "file.txt"); foreach $line (<fh>) { if ($line =~ m/type="cc"(.*?)<\/range>/) { print $1; } } but there more optimal solution without reading file line l
Read more

delphi - How to remove all the grips on a coolbar if I have several coolbands? -

-
Image
if set mycoolbar.fixedorder true,only grip on first band hidden. well,if use delphi 7 create vcl forms application,then put coolbar on , create 3 coolbans hold other controls,only grip , top coolbands can hidden setting mycoolbar.fixedorder:=true. i've uploaded picture make things clear. you got fixedorder property wrong. fixed property not allow bands rearranged if set true . setting property of coolbar true keep user changing bands order @ runtime, user can still move , resize bands. can give advice can do, actual solution problem, well, have wait answer. my advice use 3 coolbars in row , setting "fixedorder" property true , bandborderstyle bsnone . way grip hidden on of them. about property, it's not bug of ide, actual preference of property.
Read more

javascript - Animating array of divs; only the final element is modified -

-
this baffling me @ moment. i'm experienced programmer looking throw bit of surprise fiancee on countdown page our wedding. desired effect simulated confetti falling behind main page. setup follows: i have array of divs in javascript. each div absolutely positioned on page. have interval set updates every 50 or milliseconds. on each tick, run loop on array of divs, , calculations , update positions. problem problem having, however, though can see divs created, stored array, , modified (in case, each has slight randomized rotation) during initialization phase, once tick update position starts, div stored in whatever last slot of array gets position updated. tried hard-coding each div index testing purposes, strictly last element update position. upon printing current "left" , "top" style values each div before , after calculations shows value has been changed, no visible change noticeable. here's basic code: javascript var container;
Read more