• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

jquery problem in server

Explorer ,
Jul 22, 2023 Jul 22, 2023

Copy link to clipboard

Copied

Hi, the below jquery works in local environment.

However, when i upload the same file on server, the page doesnt working.
May i know any problem in below coding?

<?php
include("inc_function.php");
connect_db();

?>
<!doctype html>
<html>
	<head>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
		<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800&display=swap" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"><div class="pd-wrap">
		<link href="style.css" rel="stylesheet">
	</head>
		<body>
		<?php include("inc_header.php")?>

		<div class="container">
	        <div class="row">
	        	<div class="col-md-6">
	        		<div id="slider" class="owl-carousel product-slider">
						<?php
					$id=$_GET[id];
					$sql="select * from `product` where id='$id'";
					$result=mysqli_query($connect, $sql);
					while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
					?>
						<div class="item">
						  	<img src="<?=$row[Pic]?>">
						</div>
						<div class="item">
						  	<img src="<?=$row[Pic1]?>">
						</div>
						<div class="item">
						  	<img src="<?=$row[Pic2]?>">
						</div>
						<div class="item">
						  	<img src="<?=$row[Pic3]?>">
						</div>
						<div class="item">
						  	<img src="<?=$row[Pic4]?>">
						</div>
					</div>
					<div id="thumb" class="owl-carousel product-thumb">
						<div class="item">
						  	<img src="<?=$row[Pic]?>">
						</div>
						<div class="item">
						  	<img src="<?=$row[Pic1]?>">
						</div>
						<div class="item">
						  	<img src="<?=$row[Pic2]?>">
						</div>
						<div class="item">
						  	<img src="<?=$row[Pic3]?>">
						</div>
						<div class="item">
						  	<img src="<?=$row[Pic4]?>">
						</div>
					</div>
					<?php
						}
						?>
	        	</div>
	        	<div class="col-md-6">
	        		<div class="product-dtl">
        				<div class="product-info">
							<?php
							$id=$_GET[id];
							$sql="select * from `product` where id='$id'";
							$result=mysqli_query($connect, $sql);
							while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
							?>
		        			<div class="product-name"><?=urldecode($row[name])?></div>
							
		        			<div class="product-price-discount"><span><?=nl2br(urldecode($row[price]))?></span></div>
		        		</div>
	        			<p><?=nl2br(urldecode($row[description]))?></p>
						<?php
						}
						?>
			
	        		</div>
	        	</div>
	        </div>
		</div>
	</div>
		</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="	sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
		    var slider = $("#slider");
		    var thumb = $("#thumb");
		    var slidesPerPage = 5; //globaly define number of elements per page
		    var syncedSecondary = true;
		    slider.owlCarousel({
		        items: 1,
		        slideSpeed: 2000,
		        nav: false,
		        autoplay: false, 
		        dots: false,
		        loop: true,
		        responsiveRefreshRate: 200
		    }).on('changed.owl.carousel', syncPosition);
		    thumb
		        .on('initialized.owl.carousel', function() {
		            thumb.find(".owl-item").eq(0).addClass("current");
		        })
		        .owlCarousel({
		            items: slidesPerPage,
		            dots: false,
		            nav: true,
		            item: 5,
		            smartSpeed: 200,
		            slideSpeed: 500,
		            slideBy: slidesPerPage, 
		        	navText: ['<svg width="18px" height="18px" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="25px" height="25px" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
		            responsiveRefreshRate: 100
		        }).on('changed.owl.carousel', syncPosition2);
		    function syncPosition(el) {
		        var count = el.item.count - 1;
		        var current = Math.round(el.item.index - (el.item.count / 2) - .5);
		        if (current < 0) {
		            current = count;
		        }
		        if (current > count) {
		            current = 0;
		        }
		        thumb
		            .find(".owl-item")
		            .removeClass("current")
		            .eq(current)
		            .addClass("current");
		        var onscreen = thumb.find('.owl-item.active').length - 1;
		        var start = thumb.find('.owl-item.active').first().index();
		        var end = thumb.find('.owl-item.active').last().index();
		        if (current > end) {
		            thumb.data('owl.carousel').to(current, 100, true);
		        }
		        if (current < start) {
		            thumb.data('owl.carousel').to(current - onscreen, 100, true);
		        }
		    }
		    function syncPosition2(el) {
		        if (syncedSecondary) {
		            var number = el.item.index;
		            slider.data('owl.carousel').to(number, 100, true);
		        }
		    }
		    thumb.on("click", ".owl-item", function(e) {
		        e.preventDefault();
		        var number = $(this).index();
		        slider.data('owl.carousel').to(number, 300, true);
		    });


            $(".qtyminus").on("click",function(){
                var now = $(".qty").val();
                if ($.isNumeric(now)){
                    if (parseInt(now) -1> 0)
                    { now--;}
                    $(".qty").val(now);
                }
            })            
            $(".qtyplus").on("click",function(){
                var now = $(".qty").val();
                if ($.isNumeric(now)){
                    $(".qty").val(parseInt(now)+1);
                }
            });
		});
</script>
</html>

 

Views

116

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 22, 2023 Jul 22, 2023

Copy link to clipboard

Copied

Screen Shot 2023-07-23 at 15.58.03.pngScreen Shot 2023-07-23 at 15.58.00.png
The page should be look like this

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 24, 2023 Jul 24, 2023

Copy link to clipboard

Copied

I'm very curious, how did you get hired for this job? 

What prior coding & web development experience did you have?

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

LATEST

im self-employed.

since i didnt have much skill and sense on coding so asked this stupid question.

sorry for that

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 24, 2023 Jul 24, 2023

Copy link to clipboard

Copied

quote

Hi, the below jquery works in local environment.

However, when i upload the same file on server, the page doesnt working.
May i know any problem in below coding?

 

By @Hiu Ching26169588pka2

 

Near the top of your document there is

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

 

Near the bottom of the document there is

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="	sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

 

This means that you are loading two different versions of Bootstrap. Very confusing for any browser!

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines