简体   繁体   中英

Multiple Jquery scripts on same page conflict

Ok, I have seen a couple of questions on this topic - I have an html5 page and I am trying to apply a music stream player but the jquery script is conflicting with another jquery script.

My code is below, I have tried the no conflict method but to no avail I might be applying it wrong. This is just the script portion of my code I have video gallery playing also; the gallery plays fine but the player shows but doesn't play at all. Everytime I load the page I get a message stating : Adobe Flash Player security null is trying to connect with an internet based location which is webservinghosting.ca (the site I'm streaming the station from).

<script type="text/javascript" src="style/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="style/js/jquery.aw-showcase.js"></script>
<script type="text/javascript" src="style/js/jquery.superbgimage.min.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.6/jquery.min.js"></script>   

<script type="text/javascript">
//create this naming for Jquery 1.3.2 version
var jq_1_6 = $.noConflict(true);
</script> 

<script type="text/javascript">
jQuery(document).ready(function($){
$('.forms').dcSlickForms();
});
</script>

<script type="text/javascript">

$(document).ready(function()
{
$("#showcase").awShowcase(
{
    content_width:          900,
    content_height:         400,
    auto:                   true,
    interval:               3000,
    continuous:             false,
    arrows:                 true,
    buttons:                true,
    btn_numbers:            true,
    keybord_keys:           true,
    mousetrace:             false, /* Trace x and y coordinates  for the mouse */
    pauseonover:            true,
    stoponclick:            false,
    transition:             'fade', /* hslide/vslide/fade */
    transition_delay:       0,
    transition_speed:       500,
    show_caption:           'onload' /* onload/onhover/show */
});
});

</script>

<link type="text/css" href="http://www.websavershosting.ca/jplayer/skin/jplayer.websavers.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.websavershosting.ca/jplayer/jquery.jplayer.min.js"></script>
<script language="javascript" type="text/javascript" src="https://fennel.websavers.ca:2199/system/streaminfo.js"></script>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<div id="jp-album-art">
    <img id="cc_strinfo_trackimageurl_wlezfm" class="cc_streaminfo" />
</div>
<ul class="jp-controls">
  <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
  <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
  <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
  <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
</ul>
<div class="jp-volume-bar">
  <div class="jp-volume-bar-value"></div>
</div>
</div>
<div class="jp-title"><span id="cc_strinfo_summary_wlezfm" class="cc_streaminfo">Loading Track ...</span></div>
<div class="jp-no-solution">
<span>Update Required</span>
To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
</div>
</div>
</div>

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#jquery_jplayer_1").jPlayer({
  ready: function () {
    jQuery(this).jPlayer("setMedia", {
      mp3: "http://209.172.54.130:9025/;stream/1"
    });
  },
  swfPath: "http://www.websavershosting.ca/jplayer/Jplayer.swf",
  supplied: "mp3",
  solution: navigator.userAgent.indexOf("Trident/6")>-1 ? "flash" : "html,flash"
});
});
</script>

You are using jQuery file twice causing issues.

try removing last one:

<script type="text/javascript" src="style/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="style/js/jquery.aw-showcase.js"></script>
<script type="text/javascript" src="style/js/jquery.superbgimage.min.js"></script>
<script type="text/javascript" src="style/js/jquery.slickforms.js"></script>

if you need to use multiple files on same page.

<script type="text/javascript" src="jquery-1.1.3.js"></script>
<script> $113 = jQuery.noConflict(true);</script>
<script type="text/javascript" src="jquery-1.6.2.js"></script>

Now to access version 1.1.3 you need to use $113 like

$113('.element').val();

while $ for version 1.6.2.

Try this:

if you have more jquery scripts:

<script  src="../jquery-1.9.1.min.js"></script> 
<script type="text/javascript">
var first= $.noConflict(true);
</script>

<!-- load jQuery 1.4.2 -->
<script type="text/javascript" src="../jquery-1.2.2.js"></script>
<script type="text/javascript">
var second= $.noConflict(true);
</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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM