Laden...

Jquery Widget via AJAX geladen verusacht Dauer Errors(MVC3)

Erstellt von b0b0nr1 vor 11 Jahren Letzter Beitrag vor 11 Jahren 1.259 Views
B
b0b0nr1 Themenstarter:in
92 Beiträge seit 2011
vor 11 Jahren
Jquery Widget via AJAX geladen verusacht Dauer Errors(MVC3)

Hallo Leute,

in meinem Backend lade ich die einzelnen Controlls via AJAX (jquery widgets) und render im Controller in MVC3 damit eine View.

Dies klappt auch wunderbar ich kann wie in Windows Fenster öffnen und schließen, sie verschieben etc...

Nun kam ich zum Widget für die Inhaltserstellung. Der Haupttext soll HTML beinhalten daher brauchte ich einen WYSIWYG Editor und habe mich für TinyMCE entschieden.

Hierfür habe ich via NUGET das Package TinyMCE.MVC.Jquery installiert.

Schön und gut der TinyMCE Editor wird auch angezeigt und funktioniert schleudert aber nach Kurzer Zeit wirft er folgende Javascript Fehler aus:


Uncaught TypeError: Object [object Object] has no method 'split' backend-gui.js:880
$.droppable.drop backend-gui.js:880
e.Widget._trigger jquery-ui-1.9.2.custom.min.js:6
e.widget._drop jquery-ui-1.9.2.custom.min.js:6
(anonymous function) jquery-ui-1.9.2.custom.min.js:6
(anonymous function) jquery-ui-1.9.2.custom.min.js:6
jQuery.extend.each jquery-1.8.3.js:611
e.ui.ddmanager.drop jquery-ui-1.9.2.custom.min.js:6
e.widget._mouseStop jquery-ui-1.9.2.custom.min.js:6
(anonymous function) jquery-ui-1.9.2.custom.min.js:6
e.widget._mouseUp jquery-ui-1.9.2.custom.min.js:6
(anonymous function) jquery-ui-1.9.2.custom.min.js:6
e.widget._mouseUp jquery-ui-1.9.2.custom.min.js:6
(anonymous function) jquery-ui-1.9.2.custom.min.js:6
_mouseUpDelegate jquery-ui-1.9.2.custom.min.js:6
jQuery.event.dispatch jquery-1.8.3.js:3058
elemData.handle.eventHandle



-----------------------------------------------------------------

GET http://localhost:10118/Backend/[object%20Object] 404 (Not Found) jquery-1.8.3.js:6325
jQuery.extend.clean jquery-1.8.3.js:6325
jQuery.buildFragment jquery-1.8.3.js:6164
jQuery.fn.extend.domManip jquery-1.8.3.js:5974
jQuery.fn.extend.append jquery-1.8.3.js:5777
b.fn.(anonymous function)
widgetAction backend-widgets.js:105
(anonymous function) backend-gui.js:324
jQuery.event.dispatch jquery-1.8.3.js:3058
elemData.handle.eventHandle

------------------------------------------------------------------

Uncaught TypeError: Cannot read property 'body' of null
m.create.getBody
m.create.getContent
m.create.isDirty
e.create.storeDraft editor_plugin.js:1
(anonymous function)



Ich benutze die Standart View für den TinyMCE, welche mitinstalliert wurde:



@*
Don't forget to reference the JQuery Library here, inside your view or layout.
<script src="@Url.Content("~/Scripts/jquery-x.x.x.min.js")" type="text/javascript"></script>
\*@

<script src="@Url.Content("~/Scripts/tinymce/jquery.tinymce.js")" type="text/javascript"></script>

<script type="text/javascript">

    (function(){ 

      $(function() { 
      
          $('#@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)').tinymce({

            // Location of TinyMCE script
            script_url: '@Url.Content("~/Scripts/tinymce/tiny_mce.js")',
            theme: "advanced",
            
            height: "300",
            width: "auto",
            verify_html : false,
            plugins : "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,wordcount,advlist,autosave",
            
            // 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,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,codehighlighting,netadvimage",
            theme_advanced_toolbar_location : "top",
            theme_advanced_toolbar_align : "left",
            theme_advanced_statusbar_location : "bottom",
            theme_advanced_resizing : false,
            
            // Example content CSS (should be your site CSS)
            content_css : "@Url.Content("~/Scripts/tinymce/css/content.css")",
            convert_urls : false,
            
            // Drop lists for link/image/media/template dialogs
            template_external_list_url : "lists/template_list.js",
            external_link_list_url : "lists/link_list.js",
            external_image_list_url : "lists/image_list.js",
            media_external_list_url : "lists/media_list.js"

        });

      });

    })();

</script>

@Html.TextArea(string.Empty, /* Name suffix */
    ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)


Geladen in der WidgetView wird es so:

View:


@model Models.Core.nContentPostModel
@{
    Models.Backend.Content.CategoryModel CM = new Models.Backend.Content.CategoryModel();
 
    }
<style type="text/css">

    table.tblCreateContent {
    
    width:100%;

    
    
    }

        table.tblCreateContent td:first-child {
            width:50%;
            min-height: 30px;
            padding:1px;
            margin:1px;
            vertical-align:top;
            text-align:left;
        }
             table.tblCreateContent tr {
        
        background-color:transparent;

        
        
        }
        table.tblCreateContent tr:hover {
        
        background-color:#e6dede;

        
        
        }
   table.tblCreateContent td:last-child {
            width:50%;
            padding:1px;
             min-height: 30px;
            margin:1px;
            vertical-align:top;
            text-align:right;
        }

        table.tblCreateContent td input[type] {
        
        height:20px;
        
        }
        table.tblCreateContent td input, table.tblCreateContent td select, table.tblCreateContent td textarea{
            width:800px;
        }
        table.tblCreateContent td textarea {
        
        height:150px;

        }
    a.create-content-help {
    
   cursor:help;
    text-decoration:dotted;
    
    }

</style> 


<script>


    $(function () {


        $('.create-content-help').each(function () {
            try {
                $(this).click(function () {



                    var x = $(this).closest("tr");
                    var t = (x[0].title);
                    $('#help-dialog-create-content').html(t);

                    $('#help-dialog-create-content').dialog({

                        width: 600,
                        height: 'auto',
                        resizable: false,
                        title: "Inhalte erstellen - Hilfe",
                        modal: true

                    });

                    $('#help-dialog-create-content').dialog('open');

                });
            }
 catch(e){}


        });


    });

</script>
<div id="help-dialog-create-content" style="font-size:10px !important;"></div>
 <table class="tblCreateContent">

    <tr title="Vergeben Sie hier einen Aussagekräftigen Titel. Achten Sie darauf, dass dieser für Suchmaschienen interessant wird wenn der Titel auch im Haupttext, den Suchstichworten, dem Vorschautext und der Meta-Beschreibung vorkommt.">
        <td>
            <b>Titel:</b><br />
            <a href="javascript:void(0)" class="create-content-help">Hilfe?</a>
        </td>
        <td>

            @Html.TextBoxFor(m => m.Title)

        </td>

    </tr>
        <tr title="Geben Sie hier den Vorschautext an. Dieser bietet Besuchern einen groben Vorgeschmack auf den Hauptinhalt.">
        <td>
            <b>Vorschau Text:</b><br />
            <a href="javascript:void(0)" class="create-content-help">Hilfe?</a>
        </td>
        <td>
            @Html.TextAreaFor(m=>m.PreviewText)

        </td>



    </tr>
    <tr title="Geben Sie hier den Inhalt ein. Dieser wird bei der Detailansicht angezeigt.">

        <td>
            <b>Text:</b><br />
            <a href="javascript:void(0)" class="create-content-help">Hilfe?</a>
        </td>

        <td>

            @Html.EditorFor(m => m.LongText)

        </td>
    </tr>
    <tr title="Wählen Sie hier die Kategorie für den Inhalt oder legen Sie eine an."><td>

        <b>

            Kategorie:
            
        </b><br />
        <a href="javascript: new widgetAction('widget:NEW_CATEGORY:open')">Neue Kategorie anlegen</a>
        <br />
            <a href="javascript:void(0)" class="create-content-help">Hilfe?</a>
        </td>

        <td>

         @Html.DropDownListFor(m => m.CategoryID, new SelectList(CM.CategoryList(),"id","shortName"))

        </td>


    </tr>

    <tr title="Geben Sie hier die Suchmaschienen Beschreibung ein.">
        <td>

            <b>Meta Beschreibung (Für Suchmaschienen):</b>
            <br />
            <a href="javascript:void(0)" class="create-content-help">Hilfe?</a>
        </td>
        <td>
            @Html.TextAreaFor(m=>m.MetaDescription)

        </td>
    </tr>

    <tr title="Geben Sie hier Stichworte für die Suchmaschienen ein. Trennen Sie diese mit einem Komma.">

        <td><b>Meta Stichworte (Suchstichworte)</b><br />
            <a href="javascript:void(0)" class="create-content-help">Hilfe?</a></td>
        <td>@Html.TextAreaFor(m => m.MetaKeyWords)</td>
    </tr>

    <tr title="Wenn diese Box markiert ist, wird der Beitrag im Frontend sofort nach dem Speichern sichtbar">
        <td><b>Beitrag direkt freigeben?</b><br />
            <a href="javascript:void(0)" class="create-content-help">Hilfe?</a></td>
        <td>

            @Html.CheckBoxFor(m => m.Locked)


        </td>

    </tr>

    <tr>
        <td title="Datei Anhänge sind Bilder, Videos oder Downloads. Sie können den Anhängen auch Rollen geben, wie etwa in Newsbeiträgen INDEX BILD  als Anzeige-Bild für den Newsbeitrag."><b>Dateianhänge:</b></td>
        <td>

            <div class="ui-widget">
	<div class="ui-state-highlight ui-corner-all" style="padding: 10px;">
		<p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
		<strong>Noch nicht möglich:</strong> Sie müssen den Inhalt erst speichern, ehe Sie Anhänge registrieren können.</p>
	</div>
</div>
        </td>


    </tr>

</table>


Model:



public class nContentPostModel
    {
    
        public int ReferenceID {
            get;
            set;
        
        
        }
        
        //Eigenschaften
        /// <summary>
        /// Returns the ID of the Content
        /// </summary>
        /// 
        public int ID
        {
            get;
            set;
        }



        /// <summary>
        /// Returns the Title of the Content
        /// </summary>
        /// 
        [Required]
        public string Title
        {

            get;
            set;

        }
        /// <summary>
        /// Returns the Content Type of the Content
        /// </summary>
        /// 
        [Required]
        public string ContentType
        {

            get;
            set;

        }
        /// <summary>
        /// Returns the Category object
        /// </summary>
        /// 
        [Required]
        public object CategoryID
        {
            get;
            set;

        }

      
    
        /// <summary>
        /// Returns the Creators PK ID
        /// </summary>
        public object CreatorPKID
        {


            get;
            set;


        }

        /// <summary>
        /// Returns the Username of the Creator
        /// </summary>
        public string CreatorName
        {

            get;
            set;


        }

        /// <summary>
        /// Returns Boolean of the Locked Status of the Content
        /// </summary>
        /// 
        [Required]
        
        public bool Locked
        {

            get;
            set;

        }
        /// <summary>
        /// Returns the COMMA SEPERATED Meta-Keywords
        /// </summary>
        /// 
         [DataType(DataType.Text)]
        public string MetaKeyWords
        {

            get;
            set;


        }
        /// <summary>
        /// Returns the MetaDescription
        /// </summary>
        /// 
        [MaxLength(250)]
        [DataType(DataType.Text)]
        public string MetaDescription
        {

            get;
            set;


        }
        /// <summary>
        /// Returns the PreviewText
        /// </summary>
        /// 
        [Required]
        [DataType(DataType.Text)]
        [MaxLength(400)]
        public string PreviewText
        {

            get;
            set;


        }
        /// <summary>
        /// Returns the Content Long Text
        /// </summary>
        ///
        [Required]
        [UIHint("tinymce_jquery_full"), AllowHtml]
        public string LongText
        {

            get;
            set;


        }
    
    }

Ich weiß langsam keinen Rat mehr woran das liegen kann. Nach dem Der Fehler aufgetreten ist muss ich die Seite neuladen, da die Grids(Benutze dafür Flexigrid) nicht mehr geladen werden und auch jqueryUI Tabs nicht mehr funktionieren. Komischer Weise funktioniert das Öffnen und das Schließen noch der "Fenster".

Hat wer einen Tip für mich? Es passiert nur wenn ich ein Widget lade wo der Editor eingebunden ist.

Viele Grüße,

b0b0