0

My code for jQuery datepicker works fine. But when I include a jQuery slider/banner on same page, the datepicker doesn't work. I think the script tags may conflict with other.

Scripts under head tag:
//for datepicker
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script.js"></script>

//for slider/banner
<link rel="stylesheet" href="nivo-slider/nivo-slider.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="nivo-slider/themes/default/default.css" type="text/css" media="screen"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>  
<script src="nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>

html:

Search By Date <input type="text" id="datepicker" name="date">
<input type="submit" name="searchbydate" value="Search">

<script type="text/javascript"> 
    $(window).on('load', function() {
        $('#slider').nivoSlider(); 
    }); 
</script>

script.js file
$(document).ready(function(){
    $("#datepicker").datepicker({dateFormat: 'dd/mm/yy'});
});

PHP code for slider

<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider"> 

<?php
   include("dbConnect.php");

    $query="select * from event_table where enable_disable='Enable'";
    $result=mysqli_query($conn,$query);
    if(mysqli_num_rows($result)>0)
    {
        while($row=mysqli_fetch_array($result))
        {
            //echo "<img src='images/".$row['image']."' title='".$row['description']."' height='400'>";
            ?>
            <a href="event_details.php?eid=<?php echo $row['event_id']; ?>"><img src="images/<?php echo $row['image'] ?>" title="<?php echo $row['event_name'] ?>" height="450"></a>
            <?php    
        }
    }
    else
    {
        echo "No Events";
    }
    mysqli_close($conn);     
   ?>

    </div> 
   </div>

My slider shows 2 extra empty slides at the start and after second slide,it works fine. How to remove extra empty slides?

html code for id="slider"

    <div class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">     
   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Connection</title>
</head>
<body>
    </body>
</html>            <a href="event_details.php?eid=9"><img src="images/foot.jpg" title="Indian Super League 4" height="450"></a>
                        <a href="event_details.php?eid=10"><img src="images/volleyball.jpg" title="Pro Volleyball League" height="450"></a>
                        <a href="event_details.php?eid=11"><img src="images/nemo.jpg" title="Nemo Play" height="450"></a>
                        <a href="event_details.php?eid=12"><img src="images/walle.jpg" title="Robot Fight" height="450"></a>
                        <a href="event_details.php?eid=13"><img src="images/badminton.jpg" title="Premier Badminton League" height="450"></a>
                        <a href="event_details.php?eid=18"><img src="images/foot2.jpg" title="English Premier League" height="450"></a>

    </div> 
   </div>
halfer
  • 18,701
  • 13
  • 79
  • 158
Krupesh03
  • 39
  • 5

2 Answers2

0

I think its because you are using two jquery libraries and they may have conflicts try removing one of them

I think you should remove : 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
vikalp
  • 300
  • 1
  • 8
0

Remove one of the jQuerys - for example <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>

I also needed to fix the zindex of the picker Jquery date picker z-index issue

and use the CDN for all:

$(window).on('load', function() {
  $('#slider').nivoSlider();
});

$(document).ready(function() {
  $("#datepicker").datepicker({
    dateFormat: 'dd/mm/yy'
  });
});
<!-- for datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- for slider/banner -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/nivo-slider.min.css" type="text/css" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.min.js"></script>

Search By Date <input type="text" id="datepicker" name="date" style="position: relative; z-index: 100000;" />
<input type="submit" name="searchbydate" value="Search" />
<div id="slider" class="nivoSlider"> <img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/toystory.jpg" data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/toystory.jpg" alt="" />
  <a href="http://dev7studios.com"><img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/up.jpg" data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/up.jpg" alt="" title="This is an example of a caption" /></a> <img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/walle.jpg"
    data-thumb="https://www.jqueryscript.net/demo/nivo-slider/demo/images/walle.jpg" alt="" data-transition="slideInLeft" /> <img src="https://www.jqueryscript.net/demo/nivo-slider/demo/images/nemo.jpg" data-thumb="demo/images/nemo.jpg" alt="" title="#htmlcaption"
  /> </div>
<div id="htmlcaption" class="nivo-html-caption"> <strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>. </div>

Using your html for the slider

$(window).on('load', function() {
  $('#slider').nivoSlider();
});

$(document).ready(function() {
  $("#datepicker").datepicker({
    dateFormat: 'dd/mm/yy'
  });
});
<!-- for datepicker -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- for slider/banner -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/nivo-slider.min.css" type="text/css" media="screen" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.min.js"></script>

Search By Date <input type="text" id="datepicker" name="date" style="position: relative; z-index: 100000;" />
<input type="submit" name="searchbydate" value="Search" />
<div class="slider-wrapper theme-default">
  <div id="slider" class="nivoSlider">
    <a href="event_details.php?eid=9"><img src="https://www.hindustantimes.com/rf/image_size_960x540/HT/p2/2017/11/26/Pictures/hero-isl-m9-atk-v-pune_cb4d0a0a-d2a8-11e7-a40e-766ee48c25bf.jpg" title="Indian Super League 4" height="450"></a>
    <a href="event_details.php?eid=10"><img src="http://images.all-free-download.com/images/graphiclarge/arrest_volleyball_picture_168170.jpg" title="Pro Volleyball League" height="450"></a>
    <a href="event_details.php?eid=11"><img src="https://static1.squarespace.com/static/51cdafc4e4b09eb676a64e68/57aa036e20099eb9c945bcae/57aa03705016e1b85aa5821b/1470759793960/nemo11.jpg" title="Nemo Play" height="450"></a>
    <a href="event_details.php?eid=12"><img src="https://vignette.wikia.nocookie.net/disney/images/2/2b/Wall-E.png/revision/latest?cb=20151002192237" title="Robot Fight" height="450"></a>
    <a href="event_details.php?eid=13"><img src="https://cdn.pixabay.com/photo/2016/05/31/23/21/badminton-1428047_960_720.jpg" title="Premier Badminton League" height="450"></a>
    <a href="event_details.php?eid=18"><img src="http://www.cyprusupdates.com/wp-content/uploads/2014/05/FreeGreatPicture.com-19724-football.jpg" title="English Premier League" height="450"></a>

  </div>
</div>
mplungjan
  • 134,906
  • 25
  • 152
  • 209
  • Yess..it is working. Also the datepicker was hiding inside slider, this problem also got solved by using z-index. Thanks a lot for ur help. – Krupesh03 Mar 14 '18 at 15:54
  • My slider shows first 2 slides empty with dots. After second slide it works fine. How to resolve this issue? – Krupesh03 Mar 14 '18 at 15:56
  • Make sure the images are loaded. Look in the network tab and console – mplungjan Mar 14 '18 at 15:57
  • All database images loads properly but 2 extra empty slides are shown in the beginning. – Krupesh03 Mar 14 '18 at 16:19
  • Please post rendered HTML. It is not a php problem – mplungjan Mar 14 '18 at 16:35
  • it only displays database images into slider so I used only php code for that and not html – Krupesh03 Mar 14 '18 at 16:39
  • You do not understand. Look at my snippet. I went for you to the nivoslider demo site, view-sourced their site to have an example of a nivoslider ***HTML*** I do not care what is GENERATING the HTML, go to your website, view-source, copy enough HTML from the div with id="slider" to show the problem and paste it into a [mcve] in your question – mplungjan Mar 14 '18 at 16:58
  • Why do you have a document inside the div? It is illegal HTML. Get rid of or move ` Connection ` – mplungjan Mar 14 '18 at 18:24
  • I updated my code - I added a slider with your HTML. Please VALIDATE your HTML before testing – mplungjan Mar 14 '18 at 18:47