Question

I have an weird problem then i try to open an Jquery UI Dialog, an second dialog is put on top, without i can see why. This is how it looks

The script:

  $.ajaxSetup({ cache: false });
  $(document).ready(function () {

    $(".EditorDialog").live("click", function (e) {
      e.preventDefault();
      var d = '@MvcHtmlString.Create(Json.Encode(Model))';
        $.post(this.href, d, function (data) {
          $(data)
              .dialog({
                title: $(this).attr("data-dialog-title"),
                close: function () { $(this).remove() },
                modal: true,
                position: ['center', 40],
                minWidth: 690,
                resizable: false
              })
        }); 
      });      
  });

The dialog View:

<div id="emailDialog" class="dialog2">
  <div>
    <textarea name="content" cols="40" rows="25" id="tinymce"> 
    @Model.Content
        </textarea>
    <input class="Editorclose" name="submit" type="submit" value="Tilføj" style="float: right" onclick="get_editor_content()" />
  </div>
  @*<input class="close" name="submit" type="submit" value="Kontakt Oline" style="float: right" onclick="get_editor_content()"/>*@
  <script type="text/javascript">
    tinyMCE.init({
      // General options
      mode: "exact",
      elements: 'tinymce',
      theme: "advanced",
      plugins: "autolink,lists,spellchecker,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
      height: "480",
      width: "660",
      // Theme options
      theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
      theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
      theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
      theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,spellchecker,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,blockquote,pagebreak,|,insertfile,insertimage",
      theme_advanced_toolbar_location: "top",
      theme_advanced_toolbar_align: "left",
      theme_advanced_statusbar_location: "bottom",
      theme_advanced_resizing: false,

      // Skin options
      skin: "o2k7",
      skin_variant: "silver",

      // Example content CSS (should be your site CSS)

      // Drop lists for link/image/media/template dialogs
      template_external_list_url: "js/template_list.js",
      external_link_list_url: "js/link_list.js",
      external_image_list_url: "js/image_list.js",
      media_external_list_url: "js/media_list.js",

      // Replace values for the template plugin

    });

  </script>
</div>

Then i debug in Chrome, i can see both tags. But in the code i can’t see why the second is added?

Answer 1

I found the problem. The reason is that in the partialView are there an Javascript as well, by moving it to the view that calls the partial view solved the problem.