Как обновить только div, а не полную страницу

Question

У меня есть этот код, который выбирает тип ресторана. После выбора любого типа страница обновляется, и после некоторой обработки SQL я получаю все рестораны, соответствующие выбранному типу, и показываю их на Картах Google.

Как я могу это сделать без обновления полной страницы, например, только обновление <div>, содержащего Карты Google?

<select class="mapleftS" name="type" id="type" onchange="changeType(this.value)"> 
    <option value="0">كل الانواع</option> 
    <?$type = mysql_query("select * from rest_type "); 
    while($rod = mysql_fetch_array($type)) { 
     if($rod[id] == $_REQUEST['type']) 
      $selll = 'selected'; 
     else {$selll = ''; 
    ?> 
    <option value="<?=$rod[id]?>" <?=$selll?> ><?=$rod[name]?></option> 
    <? } ?>            
</select> 
<script> 
    function changeType(id) { 
     parent.location = '?type=' + id; 
    } 
    $(function() { 
     var text_menu = $("#type option:selected").text(); 
     $("#ddddd_").html(text_menu); 
    }); 
</script> 

После выбора этого кода запуска:

if($_REQUEST['type']) { 
// do some thing and refrsh map div 
} else { 
// do some thing and refrsh map div 
} 

И следующий элемент содержит Google Maps:

<div id="mppp" class="map"></div> 

JS для Google Maps:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=SOMEAPIKEY&sensor=true"></script> 

<script type="text/javascript"> 
    var address_index = 0, map, infowindow, geocoder, bounds, mapinfo, intTimer; 
    $(function(){ 
    mm(); 
    }); 

    mm = function() { 
    // Creating an object literal containing the properties you want to pass to the map 
    var options = { 
     zoom: 15, 
     center: new google.maps.LatLng(24.701564296830245, 46.76211117183027), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // Creating the map 
    map = new google.maps.Map(document.getElementById('mppp'), options); 
    infowindow = new google.maps.InfoWindow(); 
    geocoder = new google.maps.Geocoder(); 
    bounds = new google.maps.LatLngBounds(); 

    //******* ARRAY BROUGHT OVER FROM SEARCHRESULTS.PHP ********** 
    mapinfo = [ <?=$da?> ]; 
    intTimer = setInterval("call_geocode();", 300); 
    } 

    function call_geocode() { 
    if(address_index >= mapinfo.length) { 
     clearInterval(intTimer); 
     return; 
    } 
    geocoder.geocode({ 
     location: new google.maps.LatLng(mapinfo[address_index][6], mapinfo[address_index][7]) 
    }, (function(index) { 
      return function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       // Scale our bounds 
       bounds.extend(results[0].geometry.location); 
       var $id = mapinfo[index][0]; 
       var $tell = mapinfo[index][3]; 
       var $title = mapinfo[index][2]; 
       var $img_src = mapinfo[index][3]; 
       var img_src = mapinfo[index][1]; 
       var $logo = mapinfo[index][4]; 
       var $status = mapinfo[index][5]; 
       var $sell = mapinfo[index][6]; 
       var $city = mapinfo[index][8]; 
       var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(mapinfo[index][6], mapinfo[index][7]), 
       icon: { 
        url : '<? bloginfo('url'); ?>' + img_src + '', 
        scaledSize : new google.maps.Size(50,50) 
       }, 
       map: map, 
       scrollwheel: false, 
       streetViewControl: true, 
       title: $title 
       }); 
       google.maps.event.addListener(marker, 'click', function() { 
       // Setting the content of the InfoWindow 
       if (img_src) { 
        var imdd = '<img src="<? bloginfo('url'); ?>' + img_src + '" width="60" height="60" style="margin-left:4px;float:right;" />'; 
       } 
       else { 
        var imdd = ''; 
       } 

       if ($tell) { 
        var tell = 'رقم الهاتف : '+$tell+'<br>'; 
       } 
       else { 
        var tell = ''; 
       }        

       if ($status) { 
        var status = 'الحي : '+$status+'<br>'; 
       } 
       else { 
        var status = ''; 
       } 

       if ($city) { 
        var city = 'المدينة : '+$city+'<br>'; 
       } 
       else { 
        var city = ''; 
       } 

       var content = '<div id="info" style="direction:rtl;font:15px time new roman;font-weight:bolder;position:relative;width:210px;"><a href="#"><div style=" font-size:13px;font-family:Tahoma;font-weight:bolder;text-align:center;font-weight:bold">' + $title + '</div><br><div style="float:right">' + imdd + '</div><div style="float:right;text-align:right;font-family:Tahoma">' + tell + city + status + '</div></a><br /><a style="float:left;color:#d22f00;font-size:12px;font-family:Tahoma" href="<? bloginfo('url'); ?>/rest-det/?id=' + $id + '">المزيد+</a></div>'; 
       infowindow.setContent(content); 
       infowindow.open(map, marker); 
       }); 

       map.fitBounds(bounds); 

       if (mapinfo.length == 1) { 
       map.setZoom(12); 
       } 
      } 
      else { 
       // error!! alert (status); 
      } 
      } 
     } 
    )(address_index) 
    ); 
    address_index++; 
    } 
    </script> 
<div id="mppp" class="map"></div> 

Answer 1

Вы можете используйте шаблон AJAX для обновления части твоя страница.

1. Переместите ваш код SQL в другой скрипт - например. query.php
2. возвращает список результатов в формате JSON
3. при изменении списка вызовов runQuery
4. использовать функцию для анализа возвращаемых данных и обновить карту

<script> 
function runQuery() { 
    $.ajax({ 
     url: "query.php?type="+ $("#type").val(), 
     cache: false, 
     success: function(data){ 
      // code to process your results list; 
     } 
    }); 
} 
</script> 

Answer 2

Это концепция AJAX, в которой вы можете изменить только часть своей страницы без необходимости обновления полной страницы или обратной передачи.

Вы найдете массу примеров того, что вы пытаетесь сделать, но основная концепция в том, что вы:

-Take пользовательского ввода

-Call обратно на сервер со значениями

- сервер возвращает вам информацию, которую вы затем используете, чтобы добавить или перезаписать часть страницы.