locked
Fish Eye and Datatables in the same page? RRS feed

  • Question

  • User1224379429 posted

    Hi 

    I have a master page with fish eye effect menu and in the content page I have a repeater with  jquery.dataTables.min.js. There is a jquey conflict. How to solve this?

    http://interface.eyecon.ro/demos/fisheye.html

    Master Page code
    -----------------
     <script type="text/javascript" src="/Scripts/jquery.js"></script>
        <script type="text/javascript" src="/Scripts/interface.js"></script>
        <script type="text/javascript">
            $(document).ready(
    		function () {
    		    $('#dock').Fisheye(
    		        {
    		            maxWidth: 50,
    		            items: 'a',
    		            itemsText: 'span',
    		            container: '.dock-container',
    		            itemWidth: 40,
    		            proximity: 90,
    		            halign: 'center'
    		        }
    		    );
    		}
    	);
        </script>
    Content Page Code
    -----------------
     <script type="text/javascript" src="../Scripts/jquery-1.12.0.min.js"></script>
        <script type="text/javascript" src="../Scripts/jquery.dataTables.min.js"></script>
        <script type="text/javascript" src="../Scripts/modernizr-2.0.6.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#dyntable').dataTable();
            });
        </script>
    
     <script type="text/javascript" src="../Scripts/jquery.min.js"></script>
        <script type="text/javascript" src="../FXAssets/CurrencyDefinition/js/JqueryDefer.js"></script>
    </asp:Content>
    
    



    Thanks

    Tuesday, November 29, 2016 8:55 AM

All replies

  • User283571144 posted

    Hi Athar Ali Khan,

    I have a master page with fish eye effect menu and in the content page I have a repeater with  jquery.dataTables.min.js. There is a jquey conflict. How to solve this?

    According to your description and codes, I found fish eye use jQuery 1.1.2, but the dataTables need use jQuery 1.7.0 or later.

    So I think this is the reason why you face this error.

    As far as I know, jQuery has noconflict mode.

    You could use multiple jQuery in same page.

    More details, you could refer to follow codes:

    <!-- load jQuery 1.1.3 -->
    <script type="text/javascript" src="http://example.com/jquery-1.1.3.js"></script>
    <script type="text/javascript">
    var jQuery_1_1_3 = $.noConflict(true);
    </script>
    
    <!-- load jQuery 1.3.2 -->
    <script type="text/javascript" src="http://example.com/jquery-1.3.2.js"></script>
    <script type="text/javascript">
    var jQuery_1_3_2 = $.noConflict(true);
    </script>

    Then you could use different jQuery by different calling, like below:

      jQuery_1_1_3(document).ready(
    		function () {
    		    $('#dock').Fisheye(
    		        {
    		            maxWidth: 50,
    		            items: 'a',
    		            itemsText: 'span',
    		            container: '.dock-container',
    		            itemWidth: 40,
    		            proximity: 90,
    		            halign: 'center'
    		        }
    		    );
    		}
    	);
    
    
     jQuery_1_3_2(document).ready(function () {
                $('#dyntable').dataTable();
            });
    

    Link:http://blog.nemikor.com/2009/10/03/using-multiple-versions-of-jquery/

    Best Regards,

    Brando

    Wednesday, November 30, 2016 7:27 AM
  • User1224379429 posted

    Hi

    Thanks for your reply. I tried your code, FishEye is working but datatables plugin is not being applied on my repeater. Please see my below code

    // Master Page
    <script type="text/javascript" src="/Scripts/jquery.js"></script>
        <script type="text/javascript">
            var jQuery_1_1_3 = $.noConflict(true);
        </script>
    
        <script type="text/javascript" src="/Scripts/interface.js"></script>
        <script type="text/javascript">
            jQuery_1_1_3(document).ready(
    		function () {
    		    $('#dock').Fisheye(
    		        {
    		            maxWidth: 50,
    		            items: 'a',
    		            itemsText: 'span',
    		            container: '.dock-container',
    		            itemWidth: 40,
    		            proximity: 90,
    		            halign: 'center'
    		        }
    		    );
    		}
    	);
        </script>
    //ASp.Net content page
    
     <script type="text/javascript" src="../Scripts/jquery-1.12.0.min.js"></script>
         
        <script type="text/javascript">
              var jQuery_1_12_0 = $.noConflict(true);
        </script>
    
        <script type="text/javascript" src="../Scripts/jquery.dataTables.min.js"></script>
    
        <script type="text/javascript" src="../Scripts/modernizr-2.0.6.min.js"></script>
    
        <script type="text/javascript">
            jQuery_1_12_0(document).ready(
                function () {
                $('#dyntable').dataTable();
            });
        </script>

    Am getting errors as below

    JavaScript runtime error: Object doesn't support property or method 'isArray'

    JavaScript runtime error: Object doesn't support property or method 'dataTable'

    How to solve this?

    Wednesday, November 30, 2016 1:54 PM
  • User283571144 posted

    Hi Athar Ali Khan,

    Thanks for your reply. I tried your code, FishEye is working but datatables plugin is not being applied on my repeater

    According to your description, I suggest you could firstly check your datatable plugin import path is correct.

    Could you please post the download link of Fish Eye plugin?

    I will download it and write a demo to reproduce your issue and test it.

    Best Regards,

    Brando 

    Saturday, December 3, 2016 12:00 PM