stackoom
  简体   繁体   中英

Multiple jQuery - Plupload doesn't work when second jQuery library added

 原文  2015-09-15 07:04:14  3   2    javascript/ jquery/ plugins

Question

im trying to implement plupload into an existing template but am running into issues when adding the plupload JQuery file the existing template stops working like drop down menus and other features

this is the current head tags without the plupload files 

<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<title>$capital_name</title>
<link href='bootstrap/css/bootstrap.min.css' rel='stylesheet' type='text/css' />

<!-- jQuery UI -->
<!--<link href='plugins/jquery-ui/jquery-ui-1.10.2.custom.css' rel='stylesheet' type='text/css' />-->
<!--[if lt IE 9]>
    <link rel='stylesheet' type='text/css' href='plugins/jquery-ui/jquery.ui.1.10.2.ie.css'/>
<![endif]-->
<link href='assets/css/main.css' rel='stylesheet' type='text/css' />
<link href='assets/css/plugins.css' rel='stylesheet' type='text/css' />
<link href='assets/css/responsive.css' rel='stylesheet' type='text/css' />
<link href='assets/css/icons.css' rel='stylesheet' type='text/css' />
<link rel='stylesheet' href='assets/css/fontawesome/font-awesome.min.css'>
<!--[if IE 7]>
    <link rel='stylesheet' href='assets/css/fontawesome/font-awesome-ie7.min.css'>
<![endif]-->
<!--[if IE 8]>
    <link href='assets/css/ie8.css' rel='stylesheet' type='text/css' />
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700' rel='stylesheet' type='text/css'>

<script type='text/javascript' src='assets/js/libs/jquery-1.10.2.min.js'></script>
<script type='text/javascript' src='plugins/jquery-ui/jquery-ui-1.10.2.custom.min.js'></script> 
<script type='text/javascript' src='bootstrap/js/bootstrap.min.js'></script>
<script type='text/javascript' src='assets/js/libs/lodash.compat.min.js'></script>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
    <script src='assets/js/libs/html5shiv.js'></script>
<![endif]-->
<script type='text/javascript' src='plugins/touchpunch/jquery.ui.touch-punch.min.js'></script>
<script type='text/javascript' src='plugins/event.swipe/jquery.event.move.js'></script>
<script type='text/javascript' src='plugins/event.swipe/jquery.event.swipe.js'></script>
<script type='text/javascript' src='assets/js/libs/breakpoints.js'></script>
<script type='text/javascript' src='plugins/respond/respond.min.js'></script> <!-- Polyfill for min/max-width CSS3 Media Queries (only for IE8) -->
<script type='text/javascript' src='plugins/cookie/jquery.cookie.min.js'></script>
<script type='text/javascript' src='plugins/slimscroll/jquery.slimscroll.min.js'></script>
<script type='text/javascript' src='plugins/slimscroll/jquery.slimscroll.horizontal.min.js'></script>
<!--[if lt IE 9]>
    <script type='text/javascript' src='plugins/flot/excanvas.min.js'></script>
<![endif]-->
<script type='text/javascript' src='plugins/sparkline/jquery.sparkline.min.js'></script>
<script type='text/javascript' src='plugins/flot/jquery.flot.min.js'></script>
<script type='text/javascript' src='plugins/flot/jquery.flot.tooltip.min.js'></script>
<script type='text/javascript' src='plugins/flot/jquery.flot.resize.min.js'></script>
<script type='text/javascript' src='plugins/flot/jquery.flot.time.min.js'></script>
<script type='text/javascript' src='plugins/flot/jquery.flot.growraf.min.js'></script>
<script type='text/javascript' src='plugins/easy-pie-chart/jquery.easy-pie-chart.min.js'></script>
<script type='text/javascript' src='plugins/daterangepicker/moment.min.js'></script>
<script type='text/javascript' src='plugins/daterangepicker/daterangepicker.js'></script>
<script type='text/javascript' src='plugins/blockui/jquery.blockUI.min.js'></script>
<script type='text/javascript' src='plugins/fullcalendar/fullcalendar.min.js'></script>
<script type='text/javascript' src='plugins/noty/jquery.noty.js'></script>
<script type='text/javascript' src='plugins/noty/layouts/top.js'></script>
<script type='text/javascript' src='plugins/noty/themes/default.js'></script>
<script type='text/javascript' src='plugins/uniform/jquery.uniform.min.js'></script>
<script type='text/javascript' src='plugins/select2/select2.min.js'></script>
<script type='text/javascript' src='assets/js/app.js'></script>
<script type='text/javascript' src='assets/js/plugins.js'></script>
<script type='text/javascript' src='assets/js/plugins.form-components.js'></script>
<script>
$(document).ready(function(){
    'use strict';

    App.init(); // Init layout and core plugins
    Plugins.init(); // Init all plugins
    FormComponents.init(); // Init all form-specific plugins
});
</script>
<script type='text/javascript' src='assets/js/custom.js'></script>
<script type='text/javascript' src='assets/js/demo/pages_calendar.js'></script>
<script type='text/javascript' src='assets/js/demo/charts/chart_filled_blue.js'></script>
<script type='text/javascript' src='assets/js/demo/charts/chart_simple.js'></script>

the below is the lines im trying to add when i run into problems and the template stops working 

<script type='text/javascript' src='assets/plupload/jquery.js'></script>
<script type='text/javascript' src='assets/plupload/plupload.full.min.js'></script>
<script type='text/javascript' src='assets/plupload/jquery.plupload.queue.min.js'></script>
<link type='text/css' rel='stylesheet' href='assets/plupload/jquery.plupload.queue.css' media='screen'>

any help is very much appreciated im stuck currently and cannot work out how to proceed

code added thanks to below 

  <script src='assets/plupload/jquery.js'></script> <script> $.noConflict(); jQuery(document).ready(function(){ jQuery('button').click(function(){ jQuery('p').text('jQuery is still working!'); }); }); </script>

2 answers

solution1
 1 ACCPTED  2015-09-15 07:22:06

You need to use jQuery noConflict() Method. The noConflict() method releases the hold on the $ identifier, so that other scripts can use it.

In the below code we are using noConflict() just after including jquery js file, we are releasing $ which is a global function for jQuery to be used by others and we are using jQuery as an alias instead of $ .

You can have your custom variable declared as an alias when using noConflict() like var jq = $.noConflict(); . Now you can access using jquery using jq alias. 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$.noConflict();
jQuery(document).ready(function(){
    jQuery("button").click(function(){
        jQuery("p").text("jQuery is still working!");
    });
});
</script>
</head>
<body>

<p>The noConflict() method releases the hold on the $ shortcut identifier, so that other scripts can use it.</p> 

</body>
</html>

EDIT:

User jQuery noconflict after this in your code not after plupload js. 

<script type='text/javascript' src='assets/js/libs/jquery-1.10.2.min.js'></script>
<script>
$.noConflict();
</script>

Note: Now if you have written any jquery code in your application which is referencing jquery-1.10.2.min.js , replace $ by jQuery .

solution2
 0  2017-05-26 04:15:26

This is b'se plupload uses the old 1.9.0 jquery. I solved this by putting all pupload code above the tag that calls the later jQuery version then added a 

<script>
$.noConflict();
</script>

after the jQuery.

eg 

...
<script type='text/javascript' src='assets/plupload/jquery.js'></script>
<script type='text/javascript' src='assets/plupload/plupload.full.min.js'></script>
<script type='text/javascript' src='assets/plupload/jquery.plupload.queue.min.js'></script>
<link type='text/css' rel='stylesheet' href='assets/plupload/jquery.plupload.queue.css' media='screen'>
...
<script type='text/javascript' src='assets/js/libs/jquery-1.10.2.min.js'></script>
<script>
$.noConflict();
</script>
...

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question jQuery $.post doesn't work with when function(response) added translateY doesn't work when added from jQuery .css() function Facebox doesn't work when content is added via jQuery? Second append doesn't work on jquery delay() doesn't work second time jquery Why plupload library doesn't work in IE8 jQuery on(change) doesn't work second time jquery command works successfully on console but does not work when click() is added but doesn't show any errors either jQuery on() doesn't work on already added DOM items Trigger doesn’t work for dynamic content added on .change jQuery
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM