locked
MVC Render partial view trough ajax call RRS feed

  • Question

  • User871348585 posted

    I'm new to asp.net mvc and I'm trying to add a partial view in to a div trough ajax call. The problem is that the scripts that I load in the Layout page wont trigger in the partial view. So I'm guessing I have to render that partial view. If I place the script in the partial view the controls will be displayed correctly in the partial view but I will end up having the scrips in page as many as the partial views. Can someone point me in the right direction?

    This is the div where I'm trying to add the html result 

            <!-- Tab content 1: End -->
            <div id="caseReference_tab_content" class="tab-content" data-tabid="4">
              
            </div>

    Ajax call 

    $.ajax({
            url: '/Home/LoadTabContent',
            type: 'POST',
            data: { id: buttonValue },
            success: function (result) {
                $("#caseReference_tab_content").html(result);
            }
        });

    This is the ActionResult from Home controler

     [HttpPost]
            public ActionResult LoadTabContent(string id)
            {
                //Get tab details
                CaseTabDetails caseTabDetails = CaseTabData.GetUserRelatedCasesData(id);
    
                // Get attachments
                List<Attachment> attachments = AttachmentsData.GetAttachmentsData(id);
    
                // Get events
                List<Event> events = EventsData.GetEventsData(id);
    
                // Create object with case details for the new tab.
                CaseDetails caseDetails = new CaseDetails()
                {
                    Title = caseTabDetails.Title,
                    OfficialNumber = caseTabDetails.OfficialNumber,
                    CountryCode = caseTabDetails.CountryCode,
                    CaseType = caseTabDetails.CaseType,
                    Status = caseTabDetails.Status,
                    ImageData = caseTabDetails.ImageData, 
                    ImageDataThumb = caseTabDetails.ImageDataThumb,
                    Attachments = attachments,
                    Events = events
                };
    
                return PartialView("_TabContent", caseDetails);
            }
    Tuesday, July 21, 2020 5:49 AM

Answers

  • User1686398519 posted

    Hi Bogdan Sorin,

    • If you put the js code in the _Layout page, you can see that the index page is loaded first, and the mainbottom.min.js file showing the partial view has not been loaded yet, then the js code on your index page cannot find a tag called attachmentsTable,so the js code you add to the _Layout page will not be executed. When the mainbottom.min.js file is finished loading, no event is triggered to execute the js code on the _Layout page. That's why the problem you mentioned appears.

     

    • Do you mean that you do not want to write js code in partial view?If this is the case, I have a solution here for you to refer to. 
      • You can write the js code in success function of ajax in mainbottom.min.js.
      • $.ajax({
                url: '/Test23/LoadTabContent',
                type: 'POST',
                data: { id: buttonValue },
                success: function (result) {
                    $("#caseReference_tab_content").html(result);
                    var table = $('#attachmentsTable').DataTable({
                        dom: '<"top">t<"bottom"p><"clear">',
                        "pageLength": 5,
                        "pagingType": "numbers"
                    });
                    $('#filterCategory').on('change', function () {
                        var selectedOption = $('#filterCategory option:selected').text();
                        if (selectedOption == "Alle")
                            table.column(2).search('').draw();
                        else
                            table.column(2).search(selectedOption).draw();
                    });
                    $('#eventsTable').DataTable({
                        dom: '<"top">t<"bottom"p><"clear">',
                        "pageLength": 5,
                        "pagingType": "numbers"
                    });
                    function debugBase64(base64URL) {
                        if (base64URL) {
                            var win = window.open();
                            win.document.write('<iframe src="' + base64URL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
                            win.document.close();
                        }
                    }
                }
        });

    Here is the result.

    Best regards,

    Yihui Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 22, 2020 9:06 AM

All replies

  • User1686398519 posted

    Hi Bogdan Sorin,

    Do you mean that  the partial view can not trigger scripts which definded in layout page? Under normal circumstances, the partial view can trigger the script in the layout.I tested it based on the code you provided and did not reproduce your problem.

    Could you provide more code, especially the script code in layout page and the partial view so that I can find your problem?Or you can post a picture of your problem, which can better help you solve the problem.

     Best regards,

    Yihui Sun

    Tuesday, July 21, 2020 8:56 AM
  • User871348585 posted

    Hi and thank you for your time,

    As I said I'm pretty new to the MVC with almost 0 experience in front end, I mostly worked for desktop apps.

    Here is the code from Layout

    <!DOCTYPE html>
    
    <html lang="de">
    <head>
        <meta charset="utf-8">
        <title>myMEISSNERBOLTE</title>
        <meta content="IE=edge" http-equiv="X-UA-Compatible">
        <meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
        <meta name="format-detection" content="telephone=no">
    
        @* CSS *@
        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
        <link rel="stylesheet" type="text/css" href="~/Content/main.css" media="all">
        <style>
            .dataTables_paginate {
                float: left;
                text-align: left;
                padding-top: 1em;
                line-height: 4px;
            }
    
            .paginate_button.current {
                padding: 3px 13px;
                background-color: #590776
            }
    
            .paginate_button {
                margin-left: 3px;
                display: inline;
                border: 0px;
            }
    
            div.dt-buttons {
                ;
                float: left;
                background: transparent;
                border: none !important;
                font-size: 0;
            }
        </style>
    </head>
    <body>
    
        <!-- Header inner: Start -->
        <div class="header-inner">
            <div class="header-inner-wrapper">
                <div class="header-inner-position">
                    <div class="back-link"><a class="back-link-link" href="@Url.Action("LogOut", "Account")">Abmelden</a></div>
                    <div class="header-inner-box box-purple">
                        <div class="header-inner-box-content">
                            <h2 class="header-inner-box-title">
                                Willkommen bei myMEISSNERBOLTE
                            </h2>
                            <p class="header-inner-box-text">
                                Ihr Onlineportal für unseren gemeinsamen Austausch
                            </p>
                            <div class="header-inner-box-line"></div>
                        </div>
                        <div class="breadcrumb-holder">
                            <ul class="breadcrumb">
                                @if (System.Web.HttpContext.Current.Session["userName"] != null)
                                {
                                    <li class="active">Willkommen @System.Web.HttpContext.Current.Session["userName"].ToString()</li>
                                }
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="header-inner-inner"></div>
            </div>
        </div>
        <!-- Header inner: End -->
    
        <div>@RenderBody()</div>
    
        <footer class="footer">
    
            <div class="footer-wrapper">
    
                <div class="footer-inner">
    
                    <div class="footer-nav">
                        <nav>
                            <ul>
                                <li>©&nbsp;2019</li>
                                <li><a href="#">Impressum</a></li>
                                <li><a href="#">Datenschutzerklärung</a></li>
                                <li><a href="#">Newsletter</a></li>
                                <li><a href="#">Link</a></li>
                            </ul>
                        </nav>
                    </div>
    
                    <div class="footer-social">
                        <div>
                            <a href="#">
                                <svg class="SocialNetworksXingRegular">
                                    <use xlink:href="~/Icons/SVG.svg#SocialNetworksXingRegular"></use>
                                </svg>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <svg class="SocialNetworksLinkedinRegular">
                                    <use xlink:href="~/Icons/SVG.svg#SocialNetworksLinkedinRegular"></use>
                                </svg>
                            </a>
                        </div>
                        <div>
                            <a href="#">
                                <svg class="SocialNetworksTwitterRegular">
                                    <use xlink:href="~/Icons/SVG.svg#SocialNetworksTwitterRegular"></use>
                                </svg>
                            </a>
                        </div>
    
                    </div>
    
                </div>
    
            </div>
    
        </footer>
    
        @* Java scripts *@
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.3.1/js/buttons.html5.min.js"></script>
        <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
        <script src="~/Scripts/mainbottom.min.js"></script>
    
        <script>
            // Use datatable for search fields
            $(document).ready(function () {
                var table = $('#data').DataTable({
                    "columnDefs": [
                        { "targets": [1, 2, 3], "searchable": false }],
                    dom: '<"top"B>t<"bottom"p>',
                    "pageLength": 20,
                    "pagingType": "numbers",
                    "drawCallback": function () {
                        $('.dataTables_paginate > .pagination').addClass('table-paging');
                    },
                    buttons: [
                        'excelHtml5',
                    ]
                });
    
                // Display only live cases when table is loaded.
                table.column(6).search('1').draw();
    
                // Search case in table
                $('#myInput').on('keyup', function () {
                    table.search(this.value).draw();
                });
    
                $('#exportReportToExcel').on('click', function () {
                    $('.buttons-excel').click()
                });
    
                // Filter cases by country code dropdown list selected option
                $('#filterByLand').on('change', function () {
                    var selectedOption = $('#filterByLand option:selected').text();
    
                    if (selectedOption == "Land")
                        table.column(4).search('').draw();
                    else
                        table.column(4).search(selectedOption).draw();
                });
    
                // Filter cases by case type orpdown list selected option
                $('#filterByCaseType').on('change', function () {
                    var selectedOption = $('#filterByCaseType option:selected').text();
    
                    if (selectedOption == "Aktenart")
                        table.column(5).search('').draw();
                    else
                        table.column(5).search(selectedOption).draw();
                });
    
                // Filter cases byt check state of Show finished cases checkbox
                $("#checkboxShowLive").on('change', function () {
                    if (this.checked) {
                        table.column(6).search('1').draw();
                    }
                    else {
                        table.column(6).search('').draw();
    
                    }
                });
            });
        </script>
    </body>
    </html>

    Here is the code from Index 

    @model ExtranetWeb.ViewModels.CaseDetailsVewModel
    
    @{
        ViewBag.Title = "Home Page";
        Layout = "~/Views/Shared/_Layout.cshtml";
        if (Session["isValidUserName"] == null)
        {
            Response.Redirect("~/Account/LogIn");
        }
    }
    
        <div class="mymeissner-wrapper">
    
            <!-- Tab buttons: Start -->
            <div id="casereference_tabs" class="tab-buttons">
                <button class="tab-links active" data-buttonid="1">Cases List</button>
    
                @{
                    var displayExtranetTabsValue = System.Web.HttpContext.Current.Session["extranetDisplayTabs"].ToString();
    
                    if (string.Equals(displayExtranetTabsValue, "3") || string.Equals(displayExtranetTabsValue, "7"))
                    {
                        <button class="tab-links">JGB Renewal</button>
                    }
    
                    if (string.Equals(displayExtranetTabsValue, "5") || string.Equals(displayExtranetTabsValue, "7"))
                    {
                        <button class="tab-links" data-buttonid="2">External Webpage</button>
                    }
                }
    
            </div>
            <!-- Tab buttons: End -->
            <!-- Tab content 1: Start -->
            <div class="tab-content" data-tabid="1">
                <!-- Filter: Start -->
                <div class="filter-tab-header">
                    <div class="filter-tab-holder">
                        <div class="filter-tab-content">
                            <span class="tab-content-label">Aktenzeichen</span>
    
                            <!-- Searchbox: Begin -->
                            <div class="header-search">
                                <div class="header-search-form">
                                    <input class="header-search-form-input autocomplete" id="myInput" type="text" placeholder="Suchen" />
                                    <button class="btn-search" type="submit">
                                        <svg class="SearchGrey">
                                            <use xlink:href="~/Icons/SVG.svg#SearchGrey"></use>
                                        </svg>
                                    </button>
                                    <div class="search-autocomplete-box"></div>
                                </div>
                            </div>
                            <!-- Searchbox: End -->
                        </div>
                        <div class="filter-tab-content" id="filterByLand">
                            <select>
                                @{ List<string> countryCodes = new List<string>();}
                                <option value="Land">Land</option>
                                @foreach (var item in Model.UserRelatedCases)
                                {
                                    if (countryCodes.Contains(item.CountryCode) == false)
                                    {
                                        <option value="@item.CountryCode">@item.CountryCode</option>
                                        countryCodes.Add(item.CountryCode);
                                    }
                                }
                            </select>
                        </div>
                        <div class="filter-tab-content" id="filterByCaseType">
                            <select>
                                @{List<string> caseType = new List<string>(); }
                                <option>Aktenart</option>
    
                                @foreach (var item in Model.UserRelatedCases)
                                {
                                    if (caseType.Contains(item.CaseType) == false)
                                    {
                                        <option>@item.CaseType</option>
                                        caseType.Add(item.CaseType);
                                    }
                                }
    
                            </select>
                        </div>
                        <div class="filter-tab-content"  id="filterByLive" style="width: 238px;">
                            <span class="tab-content-label">Zeige nur lebende Akten</span>
                            <label class="checkbox-container">
                                <input type="checkbox" id="checkboxShowLive" checked="checked">
                                <span class="checkmark-checkbox"></span>
                            </label>
                        </div>
                    </div>
                    <div class="filter-tab-export">
                        <img src="~/Images/export-spreadsheet.png"
                             title="Export as spreadsheet"
                             class="filter-tab-export-icon" id="exportReportToExcel">
                    </div>
                </div>
                <!-- Filter: End -->
                <div class="tab-content-inner">
                    <div class="tab-content-info">
                        <!-- Table-v1: Start -->
                        <table class="table-v1" id="data">
                            <thead>
                                <tr>
                                    <th align="left" scope="col">Ihr Zeichen / Unser Zeichen</th>
                                    <th align="left" scope="col">Amtl. Aktenzeichen</th>
                                    <th align="left" scope="col">Titel</th>
                                    <th align="left" scope="col">Status</th>
                                    <th align="left" scope="col">Land</th>
                                    <th align="left" scope="col">Aktenart</th>
                                    <th align="left" scope="col">Aktiv</th>
                                </tr>
                            </thead>
    
                            <tbody>
                                @foreach (var item in Model.UserRelatedCases)
                                {
                                    <tr>
                                        <td class="nobr" data-label="Ihr Zeichen / Unser Zeichen"><a onclick="createTab('@item.CaseReference');" href="javascript:void(0);">@item.CaseReference</a></td>
                                        <td class="nobr" data-label="Amtl. Aktenzeichen">@item.OfficialNumber</td>
                                        <td data-label="Titel">@item.Title</td>
                                        <td class="nobr" data-label="Status">@item.Status</td>
                                        <td data-label="Land">@item.CountryCode</td>
                                        <td data-label="Aktenart">@item.CaseType</td>
                                        <td data-label="Aktiv">@item.Active</td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                        <!-- Table-v1: End -->
                    </div>
                </div>
            </div>
            <!-- Tab content 1: End -->
            <div id="caseReference_tab_content" class="tab-content" data-tabid="4">
               
            </div>
    
            <!-- Tab content 2: Start -->
            <div class="tab-content" data-tabid="2">
               
            </div>
            <!-- Tab content 2: End -->
    
            <!-- Tab content 3: Start -->
            <div class="tab-content" data-tabid="2">
                @{ string externalWebsitePage = HttpUtility.HtmlDecode(System.Configuration.ConfigurationManager.AppSettings["externalWebsitePage"]);
                    string finalExternalWebsitePagePath = string.Format("{0}{1}", externalWebsitePage, System.Web.HttpContext.Current.Session["userName"].ToString());
                }
                <iframe id="frame1" width="1050px" height="900px" scrolling="auto" src=@finalExternalWebsitePagePath>
                </iframe>
            </div>
            <!-- Tab content 3: End -->
    
            <div class="mb-info">MB External Version 25</div>
        </div>
    

    Partial view

    @model ExtranetWeb.Models.CaseDetails
    
    <!-- Tab content 4: Start -->
    <div class="tab-content-inner">
        <!-- Table header 1: Start -->
        <div class="tab-close" onclick="removeTab();"></div>
        <h2 style="margin-right: 30px;">@Model.Title</h2>
        <div class="tab-content-wrapper">
            <div class="tab-content-header" id="tab_content_header">
                <div class="tab-content-header-data">
                    <div class="tab-content-header-label">Amtl. Aktenzeichen:</div>
                    <div class="tab-content-header-text">@Model.OfficialNumber</div>
                </div>
                <div class="tab-content-header-data">
                    <div class="tab-content-header-label">Status:</div>
                    <div class="tab-content-header-text">@Model.Status</div>
                </div>
                <div class="tab-content-header-data">
                    <div class="tab-content-header-label">Land:</div>
                    <div class="tab-content-header-text">@Model.CountryCode</div>
                </div>
                <div class="tab-content-header-data">
                    <div class="tab-content-header-label">Aktenart:</div>
                    <div class="tab-content-header-text">@Model.CaseType</div>
                </div>
            </div>
    
            @{
                string thumbImage = string.Empty;
                if (Model.ImageDataThumb != null)
                {
                    var base64 = Convert.ToBase64String(Model.ImageDataThumb);
                    thumbImage = String.Format("data:image/gif;base64,{0}", base64);
                }
    
                string imageData = string.Empty;
                if (Model.ImageData != null)
                {
                    var base64 = Convert.ToBase64String(Model.ImageData);
                    imageData = String.Format("data:image/gif;base64,{0}", base64);
                }
    
                <div class="tab-content-img">
                    <a onclick="debugBase64('@imageData')"><img src=@thumbImage></a>
                </div>
            }
    
        </div>
        <!-- Table header 1: End -->
        <!-- Tab content info: Start -->
        <div class="tab-content-info">
            <!-- Tab sub buttons: Start -->
            <div class="tab-sub-buttons">
                <button class="tab-sub-links active"
                        data-buttonid="1"
                        data-parrent-tab="4">
                    Attachments
                </button>
                <button class="tab-sub-links"
                        data-buttonid="2"
                        data-parrent-tab="4">
                    Events
                </button>
            </div>
            <!-- Tab sub buttons: End -->
            <!-- Tab sub content: Start -->
            <div class="tab-sub-content active" data-tabid="1">
                <div class="category-filter" id="filterCategory">
                    <span class="category-filter-label">Kategorie</span>
                    <select>
                        <option>Alle</option>
                        <option>Amt</option>
                        <option>Intern</option>
                        <option>Mandant</option>
                    </select>
                </div>
                <table class="table-v2" id="attachmentsTable">
                    <thead>
                        <tr>
                            <th align="left" class="table-data-icon" scope="col"></th>
                            <th align="left" class="table-data-text" scope="col">Name</th>
                            <th align="left" class="table-data-text" scope="col">Kategorie</th>
                            <th align="left" class="table-data-date" scope="col">Datum</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var attachment in Model.Attachments)
                        {
                            var imageSource = string.Empty;
                            var attachmentExtension = Path.GetExtension(attachment.FilePath);
                            switch (attachmentExtension)
                            {
                                case ".docx":
                                    imageSource = "/Images/docx.png";
                                    break;
                                case ".doc":
                                    imageSource = "/Images/docx.png";
                                    break;
                                case ".pdf":
                                    imageSource = "/Images/pdf.png";
                                    break;
                                case ".pptx":
                                    imageSource = "/Images/pptx.png";
                                    break;
                                case ".rar":
                                    imageSource = "/Images/rar.png";
                                    break;
                                case ".xls":
                                    imageSource = "/Images/xls.png";
                                    break;
                                case ".msg":
                                    imageSource = "/Images/outlook.png";
                                    break;
                                case "":
                                    imageSource = "/Images/internet.png";
                                    break;
                            }
                            <tr>
                                @if (attachment.FilePath.Contains("http"))
                                {
                                    <td data-label="&nbsp;"><a href="@attachment.FilePath" target="_blank"><img src=@imageSource class="tab-content-icon"></a></td>
                                }
                                else
                                {
                                    <td data-label="&nbsp;"><a href="@Url.Action("Download", "Home", new {attachment.FilePath})"><img src=@imageSource class="tab-content-icon"></a></td>
                                }
    
                                <td data-label="Name">@attachment.AttachmentName</td>
                                <td data-label="Kategorie">@attachment.ActivityCategory</td>
                                <td data-label="Datum">@attachment.AttachmentDate</td>
                            </tr>
                        }
                    </tbody>
                </table>
    
            </div>
            <!-- Tab sub content: End -->
            <!-- Tab sub content: Start -->
            <div class="tab-sub-content" data-tabid="2">
                <table class="table-v3" id="eventsTable">
                    <thead>
                        <tr>
                            <th align="left" class="table-data-text" scope="col">Datum</th>
                            <th align="left" scope="col">Beschreibung</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var caseEvent in Model.Events)
                        {
                            <tr>
                                <td width="40px" data-label="Datum">@caseEvent.EventDate</td>
                                <td data-label="Beschtribung">@caseEvent.EventDescription</td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
            <!-- Tab sub content: End -->
        </div>
        <!-- Tab content info: End -->
    </div>
    <!-- Tab content 4: End -->
    @*<script src="~/Scripts/mainbottom.min.js"></script>*@
    
    <script>
        var table = $('#attachmentsTable').DataTable({
            dom: '<"top">t<"bottom"p><"clear">',
            "pageLength": 5,
            "pagingType": "numbers"
        });
    
        $('#filterCategory').on('change', function () {
            var selectedOption = $('#filterCategory option:selected').text();
    
            if (selectedOption == "Alle")
                table.column(2).search('').draw();
            else
                table.column(2).search(selectedOption).draw();
        });
    
        $('#eventsTable').DataTable({
            dom: '<"top">t<"bottom"p><"clear">',
            "pageLength": 5,
            "pagingType": "numbers"
    
        });
    
        function debugBase64(base64URL) {
            if (base64URL) {
                var win = window.open();
                win.document.write('<iframe src="' + base64URL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
                win.document.close();
            }
        }
    </script>
    
    
    

    Also the ajax call is in the external js file called mainbottom.min.js . 

    Tuesday, July 21, 2020 9:06 AM
  • User-474980206 posted

    If you partial need to run init code that is typically done in $.ready, you will need to supply a new trigger. You want to be able call this, but they should only effect the partial, not the total document. You should move the partial init code to own function and call from $.ready and after the Ajax call. 

    actually before the html() call, you may need clean up handlers attached to the partial or you may get memory leaks.

    Tuesday, July 21, 2020 2:35 PM
  • User1686398519 posted

    Hi Bogdan Sorin,

    • If you put the js code in the _Layout page, you can see that the index page is loaded first, and the mainbottom.min.js file showing the partial view has not been loaded yet, then the js code on your index page cannot find a tag called attachmentsTable,so the js code you add to the _Layout page will not be executed. When the mainbottom.min.js file is finished loading, no event is triggered to execute the js code on the _Layout page. That's why the problem you mentioned appears.

     

    • Do you mean that you do not want to write js code in partial view?If this is the case, I have a solution here for you to refer to. 
      • You can write the js code in success function of ajax in mainbottom.min.js.
      • $.ajax({
                url: '/Test23/LoadTabContent',
                type: 'POST',
                data: { id: buttonValue },
                success: function (result) {
                    $("#caseReference_tab_content").html(result);
                    var table = $('#attachmentsTable').DataTable({
                        dom: '<"top">t<"bottom"p><"clear">',
                        "pageLength": 5,
                        "pagingType": "numbers"
                    });
                    $('#filterCategory').on('change', function () {
                        var selectedOption = $('#filterCategory option:selected').text();
                        if (selectedOption == "Alle")
                            table.column(2).search('').draw();
                        else
                            table.column(2).search(selectedOption).draw();
                    });
                    $('#eventsTable').DataTable({
                        dom: '<"top">t<"bottom"p><"clear">',
                        "pageLength": 5,
                        "pagingType": "numbers"
                    });
                    function debugBase64(base64URL) {
                        if (base64URL) {
                            var win = window.open();
                            win.document.write('<iframe src="' + base64URL + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');
                            win.document.close();
                        }
                    }
                }
        });

    Here is the result.

    Best regards,

    Yihui Sun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 22, 2020 9:06 AM
  • User871348585 posted

    Hi YihuiSun,

    Regarding this: "If you put the js code in the _Layout page, you can see that the index page is loaded first, and the mainbottom.min.js file showing the partial view has not been loaded yet, then the js code on your index page cannot find a tag called attachmentsTable,so the js code you add to the _Layout page will not be executed. When the mainbottom.min.js file is finished loading, no event is triggered to execute the js code on the _Layout page. That's why the problem you mentioned appears."

    The partial view is added when I click a link after the page was fully loaded. I have function that creates the tab with the new partial view. The ajax call is triggered when I toggle the tabs. Or maybe I don't fully understand what you are trying to explain me? Can you tell me how should I fix it? Maybe should I render the boddy after I load the scripts?

    Kind regards,

    Bogdan

    Thursday, July 23, 2020 10:37 AM
  • User475983607 posted

    Fixing the code is easier once you understand the problem.  Consider JavaScript as an application within a web page that loads when the page first renders in the browser.  Typically, there are event handlers assigned to HTML elements.  If any of the elements with event handlers are overwritten at a later time, then the original event handler is broken.  The event handler and will not longer function as expected because the original source element is gone.  To get around this you can execute code to rewire the events handlers.  However, if you leave the old event handler then you've just created a memory leak.

    Thursday, July 23, 2020 1:30 PM