Hi everyone, It's been a few days that i'm stuck on something and it's
gonna drive me crazy. I'm developping an app that uses Google Maps v3.
I already managed to create markers and load them dynamically since I
use a mysql database to get the position of the markers i'll have to
display. I also added some infowindows that show when a marker is
clicked and in them i've managed (after hours of searching) to have
tabs using Jquery UI; in those tabs i display some informations that i
read from my database.
In one of the tabs i'd like to put a form (more precisely a dropdown
list) that will allow the user to select an option and when he does
dynamically load the rest of the tab's content using jquery/ajax -->
without refreshing the page and the map (would be too long to refresh
the map since i use a large database so many markers to display).
To help you help me , here's the global structure of my code :
<div id="infowindowcontent">
<div class="tabs" id="tabs">
<ul>
<li><a href="#tab1"><span class="headerTabs">tab1</span></
a></li>
<li><a href="#tab2"><span class="headerTabs">tab2</span></
a></li>
<li><a href="tab3"><span class="headerTabs">tab3</span></
a></li>
</ul>
<?php include('./tab1.php'); ?>
<?php include('./tab2.php');?>
<?php include('./tab3.php'); ?>
</div>
</div>
This is the content from a page i call 'infowindowContent.php' and i
use this page to display the code in the infowindows. This page is
called from an other page in which i have all the javascript/ajax/
jquery calls and functions for my app.
I call the page 'infowindowContent.php' using this code in
'JSTreatment.php' (the page previously mentioned where i have all my
JS. This page is included in the header of my main page 'index.php'
where all i have is the map)
myApp.openInfoWindow = function(marker, idPlace) {
$.post("./ajax/setActivatedPlace.php", { place:
idPlace},function success()
{
$.post('./ajax/infowindowContent.php',function
success(data)
{
myApp.infoWindow.setContent(data);
myApp.infoWindow.open(myApp.map, marker);
google.maps.event.addListener(myApp.infoWindow,
'domready', function() {
$(".tabs").tabs();
});
document.getElementById('tabs').height =
document.getElementById('infowindowcontent').offsetHeight;
});
});
};
What i'm trying to do is to put my form in let's say tab3 and from
tab3 when i send the form i just wait for the server to send back an
answer and when i have it I display the the information I receive in
tab3. I do all this without any refreshment of the page or of the tab
is made.
I'd like some tips/advice to do that, please help me quick i'm
desperate ^^.
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
