0

How made JavaScript cohesion work? Lets me explain better: I have my index page that call models forms with jquery dialogs, but I don't want put all javascript in index page, instead I want the jquery separate for page.

Model form

enter image description here

This work

    INDEX PAGE
        @section Scripts
        {
        <link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready
            (
                function () //<--I dont want this function here
                {
                    Alert1();
                }
           $(".Create").live
            (
                "click", function (e) {
                    var url = $(this).attr('href');

                    $("#dialog-view").dialog
                (
                    {
                        title: 'Create new User',
                        autoOpen: false,
                        resizable: false,
                        height: 600,
                        width: 600,
                        show: { effect: 'drop', direction: "up" },
                        modal: true,
                        draggable: true,
                        open: function (event, ui) {
                            $(this).load(url);
                        },
                        buttons:
                        {
                            "Cancel": function () 
                            {
                                $(this).dialog("close");
                            },
                            "Save": function () 
                            {
                                $(this).dialog('close');
                            }
                        },
                        close: function (event, ui) {
                            $(this).dialog('close');
                        }
                    }
                );
            );
            function Alert1() //<--I dont want this function here
            {
                alert("Star!");
            }     

        </script>
        }

How should work

INDEX PAGE
    @section Scripts
    {
    <link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready
        (
       $(".Create").live
        (
            "click", function (e) {
                var url = $(this).attr('href');

                $("#dialog-view").dialog//<--Only opening dialogs
                (
                    {   ....
        );    

    </script>
    }

And model forms with you specifics javascripts

 @section Scripts
    {
    <link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready
        (
            function () 
            {
                Alert1();
            }
        );
        function Alert1() 
        {
            alert("Star!");
        }        
    </script>
    }

Actually, when I made it the model javascript don't work.

I'm using Entity-framework, thanks for everything.

SOLUTION

    <script type="text/javascript">
        $(document).ready
        (
            function () 
            {
                Alert1();
            }
        );
        function Alert1() 
        {
            alert("Star!");
        }        
    </script>
Eduardoxvii
  • 99
  • 1
  • 8
  • Remove the Jquery reference in your model files, as they would have been loaded by the Index page. – DJ. Nov 07 '13 at 13:34
  • @section Scripts { } This don't work. :( – Eduardoxvii Nov 07 '13 at 13:37
  • How are you loading the Models templates in the Dialog Box? Via Ajax? – DJ. Nov 07 '13 at 13:39
  • Yes. I'm using jquery Dialogs: http://jqueryui.com/dialog/#modal-form – Eduardoxvii Nov 07 '13 at 13:43
  • jquery Dialogs is use to display modal forms with prerendered html code in it. My question is, how are you loading the Models html in the dialog box? what is in the '....' ( { .... ); – DJ. Nov 07 '13 at 13:52
  • var url = $(this).attr('href'); open: function (event, ui) { $(this).load(url); },$("#dialog-view").dialog('open'); return false; e.preventDefault(); – Eduardoxvii Nov 07 '13 at 13:59
  • Djavier89, ask update. :) – Eduardoxvii Nov 07 '13 at 14:09
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/40744/discussion-between-djavier89-and-eduardoxvii) – DJ. Nov 07 '13 at 14:09

1 Answers1

1

Just remove the section "Scripts" {} from the Model file. You must have the renderSection("scripts") method only called within the Index page, which will only render the scripts files when the Index page loads and ignore any new script loaded.

<script type="text/javascript"> 
    $(document).ready 
    ( 
      function () 
      { 
         Alert1(); 
      } 
   ); 
   function Alert1() 
   { 
      alert("Star!"); 
   } 
</script>
DJ.
  • 528
  • 7
  • 16