занесения в JQuery Mobile ListView с данными XML

Я нахожусь в настоящее время в процессе экспериментов с обучающей программой Google PHP/MySQL with Google Maps занесения в JQuery Mobile ListView с данными XML

Я успешно осуществившего учебник, потянув данных из базы данных PhpMyAdmin и черчения местоположения широты и долготы на карту google с использованием xml и javascript.

Я хотел использовать одни и те же данные для заполнения списка jquery-mobile listview. Может кто-нибудь предложить некоторые советы о том, как подойти к этому, поскольку я не могу думать, с чего начать с переменных и массива, который извлекают данные.

phpsqlajax_genxml.php

<?php 
require("dbconnect.php"); 

$dom = new DOMDocument("1.0"); 
$node = $dom->createElement("markers"); 
$parnode = $dom->appendChild($node); 

$connection=mysqli_connect("$server", "$username", "$password", "$database"); 

if (!$connection) { 
    die('Not connected : ' . mysqli_error()); 
} 

$query = "SELECT * FROM Site WHERE 1"; 
$result = mysqli_query($connection, $query); 

if (!$result) { 
    die('Invalid query: ' . mysqli_error()); 
} 

header('Content-type: text/xml'); 

while ($row = @mysqli_fetch_assoc($result)){ 
    $node = $dom->createElement("marker"); 
    $newnode = $parnode->appendChild($node); 
    $newnode->setAttribute("site_id",$row['site_id']); 
    $newnode->setAttribute("site_name",$row['site_name']); 
    $newnode->setAttribute("street_address", $row['street_address']); 
    $newnode->setAttribute("lat", $row['lat']); 
    $newnode->setAttribute("lon", $row['lon']); 
    $newnode->setAttribute("prime_category", $row['prime_category']); 
} 

echo $dom->saveXML(); 

mysqli_close($connection); 

?>

HTML Карта кода и Javascript

<!DOCTYPE html > 
    <head> 
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
     <title>PHP/MySQL & Google Maps Example</title> 
     <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js "></script> 
     <script type="text/javascript"> 


    var customIcons = { 
     restaurant: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png' 
     }, 
     bar: { 
      icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png' 
     } 
    }; 

    function load() { 
     var map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(47.6145, -122.3418), 
      zoom: 13, 
      mapTypeId: 'roadmap' 
     }); 
     var infoWindow = new google.maps.InfoWindow; 

     downloadUrl("phpsqlajax_genxml.php", function(data) { 
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker"); 

      for (var i = 0; i < markers.length; i++) { 
       var name = markers[i].getAttribute("name"); 
       var address = markers[i].getAttribute("address"); 
       var type = markers[i].getAttribute("type"); 
       var point = new google.maps.LatLng(
        parseFloat(markers[i].getAttribute("lat")), 
        parseFloat(markers[i].getAttribute("lng"))); 
       var html = "<b>" + name + "</b> <br/>" + address; 
       var icon = customIcons[type] || {}; 
       var marker = new google.maps.Marker({ 
        map: map, 
        position: point, 
        icon: icon.icon 
       }); 
       bindInfoWindow(marker, map, infoWindow, html); 
      } 
     }); 
    } 

    function bindInfoWindow(marker, map, infoWindow, html) { 
     google.maps.event.addListener(marker, 'click', function() { 
      infoWindow.setContent(html); 
      infoWindow.open(map, marker); 
     }); 
    } 

    function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

     request.onreadystatechange = function() { 
      if (request.readyState == 4) { 
       request.onreadystatechange = doNothing; 
       callback(request, request.status); 
     } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
    } 

    function doNothing() {} 

    </script> 

    </head> 

    <body onload="load()"> 
     <div id="map" style="width: 500px; height: 300px"></div> 
    </body> 
</html>

я что-то вдоль линий вставки присвоенных Js переменных например мышления. имя var, адрес и т. д. из массива в тег li на странице списка?

источник

2014-09-16 DanBeard

Почему вы используете '@' перед функциями 'mysqli'? Это скрывает ошибки, предупреждения, и они являются ошибкой. Вы должны их исправить. – HddnTHA

Есть много ответов и руководств здесь и в Интернете, если вы google «jquery mobile dynamic listview». – Omar

@HddnTHA Я не заметил этого до сих пор, но я удалил его, и ошибок нет. – DanBeard

Для вас Listview просто создайте еще один PHP-файл и перейдите по пути Json вместо XML. Фактически вы можете избавиться от используемой вами процедуры XML для своей Карты и использовать $ .post ниже, чтобы вместо этого вернуть данные Json. Я считаю, что его быстрее и проще читать, чем создавать разметку XML, и обычно норма для данных, которые поступают так же просто из базы данных, но лично я никогда не тестировал ее для нескольких маркеров.

пример

PHP (назовём этот файл getsome.php)

$host = "yourhost"; 
$user = "dbusename"; 
$dbname = "databasename"; 
$pass = "dbpassword"; 

try { 
    $DBH = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $user, $pass, 
        array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'")); 
} 
catch (PDOException $e) { 
    print "Error!: " . $e->getMessage() . "<br/>"; 
    die(); 
} 

$STH = $DBH->prepare("SELECT * FROM Site WHERE 1"); 

$STH->execute(); 

$result = $STH->fetchAll(); 

echo json_encode($result);

Jquery для заполнения Ваше представление списка

var file = "getsome.php"; 

$.post(file, function(data) { 

var output = ''; 

$.each(data, function(index, value){ 

     output += '<li><h2>' + value.site_name + '</h2></li>'; 

}); 
$('#listview-id').html(output).listview().listview('refresh'); 
}, "json");

Это работает 100%, хотя я персонально используйте $ .post для отправки данных из переменных в мой PHP-файл, например $ .post (файл, {А:, В: C: C, D: d}, функция (данные) {

value.site_name захватывает поле имя-правильное, что происходит от PHP-файл как json-формат. Итак, для street_address делаем value.street_address. Я привел пример на выходе, чтобы включить имя сайта, поэтому создайте элементы списка соответственно, используя + значение.fieldname +

источник

2014-09-17 17:51:50 Tasos

Отлично! Спасибо @ Тасос, я очень ценю это. Да, я думаю, что я собираюсь вернуться и избавиться от XML-процедуры. У меня мало опыта работы с JSON, что было моей первой проблемой. Спасибо. – DanBeard

Является ли слишком широким вопрос о том, как определить каждую динамическую строку списка отдельно, чтобы определить, какая строка была нажата? – DanBeard

oh его было закрыто.Откройте еще один, и мы поместим тот же ответ. плохое голосование за вас :))) – Tasos

занесения в JQuery Mobile ListView с данными XML

ответ

Смежные вопросы