ASP.NET

javascript from user control RSS

4 replies

Last post Feb 03, 2013 05:23 PM by raju dasa

‹ Previous Thread|Next Thread ›

troika

Member

22 Points

230 Posts

javascript from user control

Feb 02, 2013 09:11 PM|LINK

i have jquery loading from masterpage and then i have a usercontrol that loads some js files and scripts but i get an error saying jquery not defined here it is:

code on masterpage

<asp:ScriptManager ID="ScriptManager1" runat="server" LoadScriptsBeforeUI="false">

        <Scripts>

            <asp:ScriptReference Path="~/Responsive_Tile_Gallery-1.3/files/js/jquery-1.7.1.min.js" />
           
        </Scripts>
    </asp:ScriptManager>
     <!-- Hook up the FlexSlider -->
            <script type="text/javascript">
                $(window).load(function () {
                    $('.flexslider').flexslider();
                });

                $(document).ready(function () {
                    $('#elastic-carousel').elastislide({
                        imageW: 180,
                        minItems: 3,
                        margin: 2,
                        border: 0,
                        current: 12
                    });
                });

            </script>




<!-- JS -->
<script src="js/jquery.ui-custom.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.preloader.js"></script>
<script src="js/jquery.tipTip.js"></script>
<script src="js/jquery.uitotop.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/jquery.tweetable.js"></script>
<script src="js/jquery.jflickrfeed.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script src="js/jquery.elastislide.js"></script>
<script src="js/scripts.js"></script>

<!-- Styleswitcher -->
<script type="text/javascript" src="styleswitcher/jquery.slidePanel.js"></script>
<script type="text/javascript" src="styleswitcher/styleswitch.js"></script>





on webuser control

 <!--Initialize the gallery-->
        <script>
            $(document).ready(function () {
                $('#myGallery').rtg({
                    imageWidth: 250,
                    spacing: 10,
                    categories: true,
                    categoryOptions: {
                        defaultCategory: 'First',
                        includeAll: false
                    },
                    captionOptions: {
                        enableCaptions: true
                    },
                    lightbox: true,
                    center: true,
                    initialHeight: 500
                });
            });
        </script>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder4" runat="server">
    <p>
    teste</p>

    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" >
        

        <Scripts>
            <asp:ScriptReference Path="~/Responsive_Tile_Gallery-1.3/rtg-demo/javascript/rtg.min.js" />
            <asp:ScriptReference Path="~/Responsive_Tile_Gallery-1.3/rtg-demo/javascript/lightbox.js" />

        </Scripts>

    </asp:ScriptManagerProxy>

    <!--All gallery markup is contained within .rtg-gallery-->
<div id='myGallery' class='rtg-gallery'>
    <div class='rtg-images'>
        <div data-category="Multiple Categories,First">
            <a href="images/lookbook/1.jpg" rel="lightbox[on]" title="Caption with <a target='_blank' href='http://www.andrewjmead.com'>link</a>"><img src='images/lookbook/1.jpg'/></a>
        </div>
        <div data-category="Second">
            <a href="images/lookbook/2.JPG" rel="lightbox[on]" title=""><img src='images/lookbook/2.JPG'/></a>
        </div>
        <div data-category="Multiple Categories,First">
            <a href="images/lookbook/3.JPG" rel="lightbox[on]" title="Caption with no link"><img src='images/lookbook/3.JPG'/></a>
        </div>
        <div data-category="Second,Multiple Categories">
            <a href="images/lookbook/4.jpg" rel="lightbox[on]" title=""><img src='images/lookbook/4.jpg'/></a>
        </div>
        <div data-category="First">
            <a href="images/lookbook/5.JPG" rel="lightbox[on]" title=""><img src='images/lookbook/5.JPG'/></a>
        </div>
        <div data-category="Second">
            <a href="images/lookbook/6.jpg" rel="lightbox[on]" title=""><img src='images/lookbook/6.jpg'/></a>
        </div>
        <div data-category="Multiple Categories,First">
            <a href="images/lookbook/7.JPG" rel="lightbox[on]" title=""><img src='images/lookbook/7.JPG'/></a>
        </div>
        <div data-category="Second">
            <a href="images/lookbook/8.JPG" rel="lightbox[on]" title=""><img src='images/lookbook/8.JPG'/></a>
        </div>
        <div data-category="Multiple Categories,First">
            <a href="images/lookbook/9.jpg" rel="lightbox[on]" title=""><img src='images/lookbook/9.jpg'/></a>
        </div>
        <div data-category="Multiple Categories,Second">
            <a href="images/lookbook/10.JPG" rel="lightbox[on]" title=""><img src='images/lookbook/10.JPG'/></a>
        </div>
        <div data-category="First">
            <a href="images/lookbook/11.JPG" rel="lightbox[on]" title=""><img src='images/lookbook/11.JPG'/></a>
        </div>
        <div data-category="Second">
            <a href="images/lookbook/12.jpg" rel="lightbox[on]" title=""><img src='images/lookbook/12.jpg'/></a>
        </div>
        <div data-category="First">
            <a href="images/lookbook/13.JPG" rel="lightbox[on]" title=""><img src='images/lookbook/13.JPG'/></a>
        </div>
        <div data-category="Second">
            <a href="images/lookbook/14.JPG" rel="lightbox[on]" title=""><img src='images/lookbook/14.JPG'/></a>
        </div>
    </div>
</div>


</asp:Content>

here is the error?

troika

Member

22 Points

230 Posts

Re: javascript from user control

Feb 02, 2013 10:33 PM|LINK

masterpage code (all scripts that ends with start is the initialization)

<form id="form1" runat="server">

        <asp:ScriptManager ID="ScriptManager1" runat="server" LoadScriptsBeforeUI="true" CompositeScript-NotifyScriptLoaded="true"  >

            <Scripts>

                <asp:ScriptReference Path="~/Responsive_Tile_Gallery-1.3/files/js/jquery-1.7.1.min.js" />
                <asp:ScriptReference Path="~/js/flexisliderstart.js" />

            </Scripts>
        </asp:ScriptManager>



aspx page:


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">


    <link href="Responsive_Tile_Gallery-1.3/files/css/rtg.css" rel="stylesheet" />
    <link href="Responsive_Tile_Gallery-1.3/files/css/lightbox.css" rel="stylesheet" />


   

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder4" runat="server">
   

    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" CompositeScript-NotifyScriptLoaded="true" >


        <Scripts>
            <asp:ScriptReference Path="~/Responsive_Tile_Gallery-1.3/rtg-demo/javascript/rtg.min.js" />
            <asp:ScriptReference Path="~/Responsive_Tile_Gallery-1.3/rtg-demo/javascript/lightbox.js" />
            <asp:ScriptReference Path="~/Responsive_Tile_Gallery-1.3/rtg-demo/javascript/rtgstart.js" />
        </Scripts>

    </asp:ScriptManagerProxy>

    <!--All gallery markup is contained within .rtg-gallery-->
    <div id='myGallery' class='rtg-gallery'>
        <div class='images'>
            <div data-category="Multiple Categories,First">
                <a href="Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/1.jpg" rel="lightbox[on]" title="Caption with <a target='_blank' href='http://www.andrewjmead.com'>link</a>">
                    <img src='Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/1.jpg' /></a>
            </div>
            <div data-category="Second">
                <a href="Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/2.JPG" rel="lightbox[on]" title="">
                    <img src='Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/2.JPG' /></a>
            </div>
            <div data-category="Multiple Categories,First">
                <a href="Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/3.JPG" rel="lightbox[on]" title="Caption with no link">
                    <img src='Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/3.JPG' /></a>
            </div>
            <div data-category="Second,Multiple Categories">
                <a href="Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/4.jpg" rel="lightbox[on]" title="">
                    <img src='Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/4.jpg' /></a>
            </div>
            <div data-category="First">
                <a href="Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/5.JPG" rel="lightbox[on]" title="">
                    <img src='Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/5.JPG' /></a>
            </div>
            <div data-category="Second">
                <a href="Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/6.jpg" rel="lightbox[on]" title="">
                    <img src='Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/6.jpg' /></a>
            </div>
            <div data-category="Multiple Categories,First">
                <a href="Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/7.JPG" rel="lightbox[on]" title="">
                    <img src='Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/7.JPG' /></a>
            </div>
            <div data-category="Second">
                <a href="Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/8.JPG" rel="lightbox[on]" title="">
                    <img src='Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/8.JPG' /></a>
            </div>
            <div data-category="Multiple Categories,First">
                <a href="Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/9.jpg" rel="lightbox[on]" title="">
                    <img src='Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/9.jpg' /></a>
            </div>
            <div data-category="Multiple Categories,Second">
                <a href="Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/10.JPG" rel="lightbox[on]" title="">
                    <img src='Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/10.JPG' /></a>
            </div>
            <div data-category="First">
                <a href="Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/11.JPG" rel="lightbox[on]" title="">
                    <img src='Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/11.JPG' /></a>
            </div>
            <div data-category="Second">
                <a href="Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/12.jpg" rel="lightbox[on]" title="">
                    <img src='Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/12.jpg' /></a>
            </div>
            <div data-category="First">
                <a href="Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/13.JPG" rel="lightbox[on]" title="">
                    <img src='Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/13.JPG' /></a>
            </div>
            <div data-category="Second">
                <a href="Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/14.JPG" rel="lightbox[on]" title="">
                    <img src='Responsive_Tile_Gallery-1.3/rtg-demo/images/lookbook/14.JPG' /></a>
            </div>
        </div>
    </div>


</asp:Content>



rtgstart.js:

       $(document).ready(function () {
            $('#myGallery').rtg({
                imageWidth: 250,
                spacing: 10,
                categories: true,
                categoryOptions: {
                    defaultCategory: 'All',
                    includeAll: true
                },
                captionOptions: {
                    enableCaptions: true
                },
                lightbox: true,
                center: true,
                initialHeight: 500
            });
        });


flexisliderstart.js:



$(window).load(function () {
                    $('.flexslider').flexslider();
                });

                $(document).ready(function () {
                    $('#elastic-carousel').elastislide({
                        imageW: 180,
                        minItems: 3,
                        margin: 2,
                        border: 0,
                        current: 12
                    });
                });

now the fotos of the gally shows loading image always.... so rtgstart.js is falling here but why?

ok i have made some changes now it loads the page but i think the gallery plugin is not loading

i have put all the initializations scripts in a separate js file also

roopeshreddy

All-Star

20277 Points

3349 Posts

Re: javascript from user control

Feb 03, 2013 09:15 AM|LINK

Hi,

Is the jQuery file exists in this path?

~/Responsive_Tile_Gallery-1.3/files/js/jquery-1.7.1.min.js

Moreover, try declaring the jQuery file outside of the ScriptManager tag! The error which you have mentioned refers to failing to locate the jQuery file!

Did you check the error console of the browser for any other errors?

In IE,Chrome press F12. Firefox use Firebug plugin!

Hope it helps u...

Thanks & Regards
Roopesh Reddy C
Roopesh's Space

troika

Member

22 Points

230 Posts

Re: javascript from user control

Feb 03, 2013 10:28 AM|LINK

yes path exits and seems to load everyting all the scripts i checked with f12 but i doesnt show....

code generated:

<script src="/WebResource.axd?d=pynGkmcFUV13He1Qd6_TZJM8Skq7OfsBoY5DH54Dlu6gzunK4xK9gqeEZ8KZOUNvRGH_PZoMbIJHGZ5o0LCWWg2&amp;t=634896662120000000" type="text/javascript"></script>


<script src="/ScriptResource.axd?d=YapMghySOIX7rNYZMzjcqr_pl0v_VVRH7G2m79gzw7jpfsphpoaVoK0JX1x0vOBMhuU5j4L-Tc7wy9Ja2ex-BSIxnON0zCBiYa0uJ2golEM6NiRSHw_jaVC2gQpw5ncsRvyhWq16fPK2uXfonJWXhjHz1nFbcmiA4tX-IGSiTbQ1&amp;t=6119e399" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('Falha ao carregar estrutura ASP.NET Ajax do lado do cliente.');
//]]>
</script>

<script src="/ScriptResource.axd?d=k8HY2azth2-F7GRRQi3IMa3fY-cYYDK0oNxjmyKThmr_pO0dMgcU6Hfzj7hlVaLjnNZH_G23r8H-PxO8WrW_I1B4xNCYeO3yUBRmUO6DTRwkRL7w_OCLFw5683dX6OaadnVZg0iJWJlobKJTYGM04aiVDbhRCBLlWVbV5RtSYitWS1o5A_1UiE8SSn_zNV0d0&amp;t=6119e399" type="text/javascript"></script>
<script src="Responsive_Tile_Gallery-1.3/files/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/flexisliderstart.js" type="text/javascript"></script>
<script src="Responsive_Tile_Gallery-1.3/rtg-demo/javascript/rtg.min.js" type="text/javascript"></script>
<script src="Responsive_Tile_Gallery-1.3/rtg-demo/javascript/lightbox.js" type="text/javascript"></script>
<script src="Responsive_Tile_Gallery-1.3/rtg-demo/javascript/rtgstart.js" type="text/javascript"></script>

       <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ScriptManager1', 'form1', [], [], [], 90, 'ctl00');
//]]>
</script>

here is a sampla it should look like index-caption-demo.html

https://cloudpt.pt/link/c0228c71-a79f-48af-84f9-9c54822f3346/rtg.rar

Edited by troika on Feb 03, 2013 11:05 AM

- Reply
raju dasa

Star

14746 Points

2499 Posts

Re: javascript from user control

Feb 03, 2013 05:23 PM|LINK

Hi,

seems ur jquery file is loading(from body section of master) after its call (from content page through head section).

instead of declaring jquery from scriptmanager, write it in <head> section of master page followed by headerContentPlaceHolder

be ordered. That way we get assure of jquery load first then its dependent call.

Happy Coding ! Mark as Answer if it helps.
rajudasa.blogspot.com || blog@opera
- Marked as answer by Song-Tian - MSFT on Feb 08, 2013 11:29 AM

‹ Previous Thread|Next Thread ›

javascript from user control RSS

4 replies

troika

javascript from user control

troika

Re: javascript from user control

roopeshreddy

Re: javascript from user control

troika

Re: javascript from user control

raju dasa

Re: javascript from user control

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft