Asp.net content place holder using javascript

StackOverflow https://stackoverflow.com/questions/12409473

質問

I have a annoying issue involving javascript/jquery and asp:ContentPlaceHolders that I can't seem to solve and I've been trying all day.

I have an ASP.NET website with C#. The front page - Default.aspx, has a master page - MasterPage.master. I also have a control - bslider.ascx

I am trying to implement the image slider shown at http://bxslider.com/

The code in my control looks like this

<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.bxSlider.min.js" type="text/javascript">
    $(document).ready(function () {
        $('#slider1').bxSlider();
    });    
</script>

<div id="slider1">
    <div>Slide one content</div>
    <div>Slide two content</div>
    <div>Slide three content</div>
    <div>And so on...</div>
</div>

The relevant code in Default.aspx is as follows:

<asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <div class="sliderContainer">
        <uc4:BSlider ID="slider1" runat="server" />  
    </div>
</asp:Content>

The relevant code in MasterPage.master is as follows:

<body>
<form id="form1" runat="server">
    <div id="ContentContainer">
        <asp:contentplaceholder id="ContentPlaceHolder2" runat="server">
            <uc3:headerLeft ID="Header2" runat="server" /> 
        </asp:contentplaceholder>
    </div>
</form>
</body>

However this does not work, it displays the content of the inner divs but one after another. I have tested this in a standard .html web page and it worked so it must be to do with the ASP.NET side of things.

Can anyone help with this issue?

Thanks in advance.

役に立ちましたか？

解決

I have solved the problem! It was a conflict between the JQuery library and the BxSlider library.

It was fixed with the following code:

<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    jQuery.noConflict();
    $('#slider1').bxSlider();
});    
</script>

Kicking myself for not realising that it was a conflict issue. I hope this helps anyone else stuck in a similar situation to me.

他のヒント

I suppose that 

<script src="../scripts/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.bxSlider.min.js" type="text/javascript">
    $(document).ready(function () {
        $('#slider1').bxSlider();
    });    
</script>

is actually located in <uc3:headerLeft ID="Header2" runat="server" />, and if so you just have no scripts printed on a page.

<body>
<form id="form1" runat="server">
    <div id="ContentContainer">
        <asp:contentplaceholder id="ContentPlaceHolder2" runat="server">
            <uc3:headerLeft ID="Header2" runat="server" /> 
        </asp:contentplaceholder>
    </div>
</form>
</body>

In code above, which is from master page, you defined a default content. It will be printed only if you have no <asp:Content ContentPlaceHolderID="ContentPlaceHolder2" in currently executed page. Try to simply move headerLeft outside contentplaceholder:

<div id="ContentContainer">
    <uc3:headerLeft ID="Header2" runat="server" /> 
    <asp:contentplaceholder id="ContentPlaceHolder2" runat="server">

    </asp:contentplaceholder>
</div>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top