个人中心
gpt4 book ai didi

javascript - 如何将 JQuery Mobile 数据 Angular 色 ="listview"样式应用到 AJAX php/MySQL 页面结果

转载 作者：行者123 更新时间：2023-11-29 10:47:57 25 4
gpt4 key购买 nike

我的页面是 www.aarontomlinson.com

我是 Jquery mobile 新手，我想转换我的网站。我有一个 AJAX 函数，可以获取用户位置并将变量发送到 php 页面。使用他们的位置，我可以获得与用户的距离以及存储在 MySQL 表中的店面位置。唯一的问题是，我无法将 php 结果放入 jquery ListView 中。

在我的页面上，我有一个示例，展示了我想要看到的内容与正在发生的情况。

我已经尝试了很多列表刷新选项，我不知道我在做什么，我非常感谢我能得到的任何帮助。

还有实际上，有时在我访问另一个页面后但在刷新时却无法正常工作。

这是我的代码:

头

    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

脚本

  $(document).ready(function(){
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showSuggested);
    } else { 
        $('#suggested').html('Geolocation is not supported by this browser.');

    }
});

function showSuggested(position) {
    var latitude = position.coords.latitude;
    var longitude = position.coords.longitude;
    $.ajax({
        type:'POST',
        url:'suggested.php',
        data:'latitude='+latitude+'&longitude='+longitude,
        success:function(msg){
            if(msg){

               $("#suggested").html(msg);


            }else{
                $("#suggested").html('Not Available');
            }
        }

    });

}   
$(function(){
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
});

HTML

<div data-role="page" id="pageone">
  <div id="navtop" data-role="header" data-position="fixed" data-id="navtop" >
    <h1>Ground Up</h1>
     </div>  
<div data-role="header" id="mylocation"></div>  
 <!--banner-->      
<div id="banner"></div>
<!--banner-->    


<div id="sticky-anchor"></div>
<div id="sticky" class="filter" style="">
<div id="header" style="z-index: 6000;">
  <div class="container">
      <nav id="navigation"> <div class="logo">Filter</div> <button2><a aria-label="mobile menu" class="nav-toggle"> <span></span> <span></span> <span></span> </a></button2>
      <ul id="tabs" class="menu-left">
          <li><button2><a  id="tab1" ><div style="width:100vw;white-space:nowrap;overflow: hidden;">Suggested</div></a></button2></li>
        <li><button2><a id="tab2">Distance</a></button2></li>
        <li><button2><a id="tab3">Rating</a></button2></li>
        <li><button2><a id="tab4">OPEN</a></button2></li>
        <li><button2><a id="tab5">Delivery Price</a></button2></li>
      </ul>
    </nav>
  </div>
</div>
</div>


   <div style="height: 200vh" data-role="main" class="ui-content">




                <div class="tabcontainer" id="tab1C">


<ul data-role="listview" >
    <li><a href="#">
  <img src="https://www.aarontomlinson.com/images/MMD.png">
    <h2>Name</h2>
    <p>Distance</p>
     <p class="ui-li-aside">OPEN</p>

        <div style="display: flex;" id="" class="">
            <div style="flex: 1;" id="" class=""><i style="padding-bottom:5px;width:30px;vertical-align:middle;" class="material-icons">star_rate</i> 4.5
            </div>
            <div style="flex: 1;" id="" class=""><i style="padding-bottom:5px;width:30px;vertical-align:middle;" class="material-icons">time_to_leave</i> $20</div>

</div>  
    </a>
    </li>
</ul>


    <ul id="suggested" data-role="listview" class="ui-listview" >

     </ul>  











    <a href="#pagetwo" data-transition="fade">Fade to Page Two</a>







            </div>

            <div class="tabcontainer" id="tab2C">


            <div style="" id="ShopsDistance">b</div>

            </div>

            <div class="tabcontainer" id="tab3C">

            <div style="" id="ShopsRating">c</div>

            </div>

            <div class="tabcontainer" id="tab4C">

            <div style="" id="ShopsOpen">d</div>

            </div>

             <div class="tabcontainer" id="tab5C">

            <div style="" id="ShopsDelivery">e</div>

            </div>














      </div>

<div data-role="footer" data-id="navbtm" data-position="fixed">
    <div data-role="navbar">
        <ul>
            <li><a class="navbtmbtn" data-role="button" href="a.html">Home</a></li>
            <li><a class="navbtmbtn" data-role="button" href="b.html">SmokeShop</a></li>
            <li><a class="navbtmbtn" data-role="button" href="c.html">Orders</a></li>
            <li><a class="navbtmbtn" data-role="button" href="d.html">Account</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->
</div>

建议.php

<?php
session_start();
date_default_timezone_set('America/Los_Angeles');
$currency = '$';


if(!empty($_POST['latitude']) && !empty($_POST['longitude'])){
    //Send request and receive json data by latitude and longitude
    $url = 'http://maps.googleapis.com/maps/api/geocode/json?latlng='.trim($_POST['latitude']).','.trim($_POST['longitude']).'&sensor=false';
    $json = @file_get_contents($url);
    $data = json_decode($json);
    $status = $data->status;

    $mylat = $_POST['latitude'];
    $mylng = $_POST['longitude'];

    $_SESSION["latitude"] = "latitude";
    $_SESSION["longitude"] = "longitude";

    if($status=="OK"){
        //Get address from json data
        $location = $data->results[0]->formatted_address;
    }else{
        $location =  '';
    }




    $mylat = 34.103736;
    $mylng = -118.328646;   







$db_username = '---------';

$db_password = '-------';

$db_name = '-----------';

$db_host = 'localhost';             

$mysqli = new mysqli($db_host, $db_username, $db_password,$db_name);            

if ($mysqli->connect_error) {

    die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);

}







$results = $mysqli->query("SELECT dispensaries.pagelink, dispensaries.id, dispensaries.name, dispensaries.image, dispensaries.rating, dispensaries.shop_id, dispensaries.delivery_price, shop_hours.day_of_week, shop_hours.open_time, shop_hours.close_time, ( 3959 * acos( cos( radians('$mylat') ) * cos( radians( dispensaries.lat ) ) * cos( radians( dispensaries.lng ) - radians('$mylng') ) + sin( radians('$mylat') ) * sin( radians( dispensaries.lat ) ) ) ) AS distance FROM dispensaries INNER JOIN shop_hours ON dispensaries.shop_id= shop_hours.shop_id WHERE shop_hours.day_of_week = DATE_FORMAT(NOW(), '%w') HAVING distance < 10000   ORDER BY dispensaries.id ASC");
if($results){ 



//fetch results set as object and output HTML
while($obj = $results->fetch_object())

{


$opentime = $obj->open_time; 
$closetime = $obj->close_time;
$t = date("H:i:s"); 







if($t > $opentime && $t < $closetime) {
   $openclosed = "<open style='color:green;text-decoration: none;'>OPEN</open>";
} else {
    $openclosed = "<closed style='color:red;text-decoration: none;'>CLOSED</closed>";
}       




$distance = round($obj->distance , 1);  


$ShopsSponsored .= <<<EOT


<li>
   <a href="{$obj->pagelink}" data-transition="slide">
  <img src="https://www.aarontomlinson.com/images/{$obj->image}">
    <h2>{$obj->name}</h2>
    <p>{$distance}</p>
     <p class="ui-li-aside">{$openclosed}</p>

        <div style="display: flex;" id="" class="">
            <div style="flex: 1;" id="" class=""><i style="padding-bottom:5px;width:30px;vertical-align:middle;" class="material-icons">star_rate</i> {$obj->rating}
            </div>
            <div style="flex: 1;" id="" class=""><i style="padding-bottom:5px;width:30px;vertical-align:middle;" class="material-icons">time_to_leave</i>{$currency}{$obj->delivery_price}</div>

</div>  
    </a>
  </li>


EOT;


}

}


echo $ShopsSponsored;


}
?>

SQL 表

Table structure for table `dispensaries`
--

CREATE TABLE IF NOT EXISTS `dispensaries` (
  `id` varchar(10) NOT NULL,
  `shop_id` int(11) unsigned NOT NULL,
  `name` varchar(50) NOT NULL,
  `image` varchar(100) NOT NULL,
  `pagelink` varchar(100) NOT NULL,
  `street` varchar(50) NOT NULL,
  `ZIP` int(5) NOT NULL,
  `phone` varchar(10) NOT NULL,
  `email` varchar(50) NOT NULL,
  `description` varchar(500) NOT NULL,
  `rating` decimal(2,1) NOT NULL,
  `updated` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `lng` varchar(50) NOT NULL,
  `lat` varchar(50) NOT NULL,
  `pageviews` int(11) NOT NULL,
  `delivery_price` decimal(10,2) NOT NULL,
  `reviews` int(11) NOT NULL,
  `orders` int(11) NOT NULL,
  `revenue` decimal(10,2) NOT NULL,
  PRIMARY KEY (`id`),
  UNIQUE KEY `username` (`name`),
  UNIQUE KEY `id` (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `dispensaries`
--

INSERT INTO `dispensaries` (`id`, `shop_id`, `name`, `image`, `pagelink`, `street`, `ZIP`, `phone`, `email`, `description`, `rating`, `updated`, `lng`, `lat`, `pageviews`, `delivery_price`, `reviews`, `orders`, `revenue`) VALUES
('1', 1, 'MMD', 'MMD.png', '#mmd', '1515 N Cahuenga', 90028, '315265456', 'mmd@hey.com', 'Hollywood', '4.5', '2017-05-06 00:04:09', '-118.329758', '34.098499', 73834, '20.00', 0, 0, '0.00'),
('2', 2, 'Mr. Naturals', 'mrnaturals.jpg', '#mrnaturals', '521 S Alvarado St', 90057, '2132568312', 'mr.naturalsdtla@gmail.com', 'FTP FREE EIGHTH', '4.8', '2017-05-11 00:30:16', '-118.274480', '34.060165', 159099, '20.00', 0, 0, '0.00'),
('3', 3, 'The Kind Center, Inc.', 'kindcenter.jpeg', '#kindcenter', '1944 North Cahuenga Blvd', 90068, '323318905', 'kindcenter420@gmail.com', 'Hollywood', '4.5', '2017-05-11 01:45:58', '-118.330479', '34.106565', 135716, '20.00', 0, 0, '0.00'),
('4', 4, 'Lounge 64', 'lounge64.jpg', '#lounge64', '874 N. Virgil Ave', 90029, '310280648', 'The710Club@gmail.com', 'OPEN 24/7', '4.5', '2017-05-14 03:55:12', '-118.286673', '34.087545', 51934, '10.00', 0, 0, '0.00');

SQL 时间表

Table structure for table `shop_hours`
--

CREATE TABLE IF NOT EXISTS `shop_hours` (
  `id` int(11) NOT NULL,
  `shop_id` int(11) unsigned NOT NULL,
  `day_of_week` int(11) unsigned NOT NULL,
  `open_time` time NOT NULL,
  `close_time` time NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Dumping data for table `shop_hours`
--

INSERT INTO `shop_hours` (`id`, `shop_id`, `day_of_week`, `open_time`, `close_time`) VALUES
(1, 1, 0, '10:00:00', '20:00:00'),
(2, 1, 1, '10:00:00', '20:00:00'),
(3, 1, 2, '10:00:00', '20:00:00'),
(4, 1, 3, '10:00:00', '20:00:00'),
(5, 1, 4, '10:00:00', '20:00:00'),
(6, 1, 5, '10:00:00', '20:00:00'),
(7, 1, 6, '10:00:00', '20:00:00'),
(8, 2, 0, '10:00:00', '20:00:00'),
(9, 2, 1, '10:00:00', '24:00:00'),
(10, 2, 2, '10:00:00', '20:00:00'),
(11, 2, 3, '10:00:00', '20:00:00'),
(12, 2, 4, '10:00:00', '20:00:00'),
(13, 2, 5, '10:00:00', '20:00:00'),
(14, 2, 6, '10:00:00', '20:00:00'),
(15, 3, 0, '10:00:00', '20:00:00'),
(16, 3, 1, '10:00:00', '20:00:00'),
(17, 3, 2, '10:00:00', '20:00:00'),
(18, 3, 3, '10:00:00', '20:00:00'),
(19, 3, 4, '10:00:00', '20:00:00'),
(20, 3, 5, '10:00:00', '20:00:00'),
(21, 3, 6, '10:00:00', '20:00:00'),
(22, 4, 0, '00:00:00', '24:00:00'),
(23, 4, 1, '00:00:00', '24:00:00'),
(24, 4, 2, '00:00:00', '24:00:00'),
(25, 4, 3, '00:00:00', '24:00:00'),
(26, 4, 4, '00:00:00', '24:00:00'),
(27, 4, 5, '00:00:00', '24:00:00'),
(28, 4, 6, '00:00:00', '24:00:00');

以防万一页面 JavaScript

    <script>
        // TOGGLE HAMBURGER & COLLAPSE NAV
    $('.nav-toggle').on('click', function() {
      $(this).toggleClass('open');
      $('.menu-left').toggleClass('collapse');
    });
    // REMOVE X & COLLAPSE NAV ON ON CLICK
    $('.menu-left a').on('click', function() {
      $('.nav-toggle').removeClass('open');
      $('.menu-left').removeClass('collapse');
    });


    function sticky_relocate() {
        var window_top = ($(window).scrollTop()+44);
        var div_top = $('#sticky-anchor').offset().top;
        if (window_top > div_top) {
            $('#sticky').addClass('stick');
            $('#sticky-anchor').height($('#sticky').outerHeight());
        } else {
            $('#sticky').removeClass('stick');
            $('#sticky-anchor').height(0);
        }
    }

    $(function() {
        $(window).scroll(sticky_relocate);
        sticky_relocate();
    });

    $(document).ready(function() {    

    $('#tabs li a:not(:first)').addClass('inactive');
    $('.tabcontainer').hide();
    $('.tabcontainer:first').show();

    $('#tabs li a').click(function(){
        var t = $(this).attr('id');
      if($(this).hasClass('inactive')){ //this is the start of our condition 
        $('#tabs li a').addClass('inactive');           
        $(this).removeClass('inactive');

        $('.tabcontainer').hide();
        $('#'+ t + 'C').fadeIn('fast');
     }
    });

    }); 

        </script>

这是我的 CSS(如果有人想重现这种情况)

<style >

a{
  text-decoration:none!important;
  color:black!important;
  font-weight:normal!important;
}   


* { 
    box-sizing: border-box; 
}


html {
    box-sizing: border-box;
    margin: 0;
    overflow-x: hidden; 

}   
body {
    overflow-x: hidden;
}
[data-role="page"]{
        overflow-y: hidden;
    }
#pageone{

}

[data-role="header"] {
background-color: rgba(245,242,242,0.95);
}
[data-id="navtop"],#navtop {    
    background-color: rgba(245,242,242,0.95);
    border-bottom: solid;
    border-bottom-width: 0.5px;
    border-bottom-color: rgba(117,117,117,0.92);
    color: rgba(89,151,85,1.00);
    letter-spacing: 2px;

}
#mylocation{
    font-size: 12px;
    letter-spacing: 2px;
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;
    min-height: 40px;
    text-align: center; 
    line-height: 40px;
    padding-left: 60px;
    padding-right: 60px;
    background-color: rgba(245,242,242,0.95);
    margin-left: auto;
    margin-right: auto;
}
#banner{
    height: 120px;
    background-color:white;
    border-bottom: solid;
    border-bottom-width: 0.5px;
    border-bottom-color: rgba(117,117,117,0.92);
    background-image: url(https://www.aarontomlinson.com/images/sprout.jpg);
    background-size: cover;
    background-position: 50% 20%    
    }
[data-id="navbtm"] {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 8px;
}
.navbtmbtn {
     height:60px;
    line-height: 40px;
    letter-spacing: 2px;
    font-size: 8px;
    background-color: rgba(245,242,242,0.95);

}   
 /*--------------------------------FILTER BAR --------------------------*/


.container {
    padding: 0px 15px 0px 15px; }

@media (min-width: 0) {

.container {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.container:after {
  content: " ";
  display: block;
  clear: both;
}
}








#header {
    background-color: rgba(245,242,242,0.95);

  top: 0;
  left: 0;
  width: 100%;
 padding: .5rem 0;
  z-index: 3;
  will-change: transform;
  transition: background 0.3s, -webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1);
  transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1), background 0.3s;
  transition: transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1), background 0.3s, -webkit-transform 0.5s cubic-bezier(0.694, 0.048, 0.335, 1);
  transform: translateY(0);
  -webkit-transform: translateY(0);
          border-bottom: solid;
  border-bottom-width: 0.5px;
    border-bottom-color: rgba(117,117,117,0.92);


}

#header nav .logo {
    letter-spacing: 1.5px;
  float: left;
 padding-top: .25rem;
 padding-bottom: .25rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  font-weight: 500;
  color: black;
}

#header nav .logo:after {
  content: '';
  display: table;
  clear: both;
}

#header nav ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

header nav ul li {
  float: none;
  margin-left: 0;
}


#header nav ul li a { display: block; }
@media (min-width: 576px) {

#header nav ul li a { display: block;  padding: .425rem 0rem;
}
}


ul { clear: both; }

ul li { padding: .5em 0; }


.hide-nav {
 transform: translateY(-120% !important); -webkit-transform: translateY(-120%) !important; }

ul.menu-left {
  display: block;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
  z-index: 10;
}
@media (min-width: 900px) {

ul.menu-left {
  display: block !important;


}
}

ul.menu-left:before {

  clear: both;
}

ul.menu-left.collapse { max-height: 100% !important; }

.nav-toggle {
  display: block;
  border-radius: 5px;
  background-color: transparent;
  float: right;
  height: 38px;
  width: 38px;
  cursor: pointer;
  padding: 8px 8px;

}

.nav-toggle.open span:first-child { transform: rotate(45deg) translate(4.4px, 4.4px); }

.nav-toggle.open span:nth-child(2) {
  width: 0%;
  opacity: 0;
    float: none;
}

    .nav-toggle.open{

    }


.nav-toggle.open span:last-child { float: none; width: 100%;transform: rotate(-45deg) translate(4.4px, -4.4px); }



.nav-toggle span {
  position: relative;
  display: block;
  height: 2px;
  width: 100%;
  margin-top: 4px;
  background-color: #000;
  transition: all .25s;
}
.nav-toggle span:nth-child(2) { width: 75%; float: right; }
.nav-toggle span:last-child { width: 50%; float: right; }

    .menu-left{
        border-radius: 5px;
    }



.menu-left a {
    letter-spacing: 1.5px;
    font-size: 16px;
padding-left: 30px;
line-height: 35px;

  display: inline-block;

  position: relative;

  padding-bottom: 0px;

  transition: color .35s ease;


}   


#sticky {

}

#sticky.stick {
    margin-top: 0 !important;
    position: fixed;
    top: 44px;
    z-index: 6000;
    display: flex;
    width: 100%;


}



 /*-------FILTER BAR -----------*/
        .itemContainer{
            width:100%;
            float:left;
        }

        .itemContainer div{
            float:left;
            margin: 5px 20px 5px 20px ;
        }

        .itemContainer a{
            text-decoration:none;
        }

        .cartHeaders{
            width:100%;
            float:left;
        }

        .cartHeaders div{
            float:left;
            margin: 5px 20px 5px 20px ;
        }





    </style>

最佳答案

在 while 循环中使用变量“$ShopsSponsored”之前，您没有声明该变量。声明为

$ShopsSponsored = '';

在while循环之前

关于javascript - 如何将 JQuery Mobile 数据 Angular 色 ="listview"样式应用到 AJAX php/MySQL 页面结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44239380/

25 4 0
文章推荐： mysql find_in_set匹配2列
文章推荐： javascript - 使用 php 和 mysql 表单上的多个搜索字段
文章推荐： ios - 通过不同的函数同时调用一个对象到内存中
文章推荐： php - 从表中选择 *，其中日期 = 本周，以及？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com