Load js and css file after Button click using jQuery

Last Reply one day ago By dharmendr

Posted 22 days ago

hi

When users click on menu, mega menu will appear I want when users click to see mega menu when they click on menu it loads script and css of mega menu.

I mean I don't want loads megamenu when page is loading I want load it just when users click on menubar

I use below code for megamenu in page:

                                    <script src='<%=ResolveUrl("~/scripts/jquery.dcmegamenu.1.3.3.js" ) %>'></script>
                                    <link href="Css/dcmegamenu.css" rel="stylesheet" />

                                    <div class="demo-container1">
                                        <div class="red">
                                            <ul id="mega-menu-2" class="mega-menu1">
                                                <li><a href="#" id="mainsoft">&nbsp</a>
                                                    <ul>
                                                        <li><a href="#">آموزهای کاربردی</a>
                                                            <div id="mega1A">
                                                            </div>
                                                            <ul>
                                                                <asp:Repeater ID="RptkarbordA" runat="server">
                                                                    <ItemTemplate>
                                                                        <li><a target="_blank">
                                                                            <asp:LinkButton ID="Linkbtnclass" runat="server" CommandArgument='<%# Eval("Secondclass") %>'
                                                                                OnClick="LinkbtnclassA_Click"><%# Eval("Secondclass") %></asp:LinkButton></a></li>
                                                                    </ItemTemplate>
                                                                </asp:Repeater>
                                                            </ul>
                                                        </li>

How I can do it?

best regards

neda

You are viewing reply posted by: nedash 5 days ago.
Posted 5 days ago
dharmendr says:
Instead of calling on document ready you need to call only when required.

 

hi deharmendr

I change code like:

<script type="text/javascript">
        $(function () {
            $('#mega-menu').click(function () {
                LoadCss('http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css');
                LoadCss('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.css');
                LoadScript('http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js');
                LoadCss('Css/dcmegamenu.css');
                LoadScript('scripts/jquery.dcmegamenu.1.3.3.js');
                LoadScript('http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js');
                $.getScript('https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.js', function (data, status, jqxhr) {

                });
            });
        });
        $(document).ready(function ($) {

            $('#mega-menu-10').dcMegaMenu({
                rowItems: '7',
                speed: 'fast',
                effect: 'fade',
                event: 'click'
            });
        });


        function LoadCss(url) {
            var link = document.createElement("link");
            link.type = "text/css";
            link.rel = "stylesheet";
            link.href = url;
            document.getElementsByTagName("head")[0].appendChild(link);
        }
        function LoadScript(url) {
            var script = document.createElement('script');
            script.setAttribute('src', url);
            script.setAttribute('async', false);
            document.head.appendChild(script);
        }
    </script>

but you told me:

Remove this code. As on document ready dcMegamenu is applied so it is displayed.

 

 

 

 

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html