Asp.net content place holder using javascript

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

Question

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.

Was it helpful?

Solution

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.

OTHER TIPS

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top