Don't mind my last post. I managed to do what I wanted (i didn't write
innerHTML correctly ..)
Any way for those interested here's how i dit it :
In my tab (tab3) i put something like this :
<form id="...." action="">
<select name="selectSmthng" onChange="submitForm(this.value)">
<option>Here's my option generated dynamically</option>
</select>
</form>
<div id="zone_to_change">
</div>
and in JSTreatment i did this :
function submitForm(valueForm)
{
//Initialisation of xhr object
var data = valueForm;
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
if(xhr.status == 200)
{document.getElementById('zone_to_change').innerHTML=xhr.responseText;
alert(xhr.responseText);
}
else
document.getElementById('zone_to_change').innerHTML="<b>Ajax
Execution Error" + xhr.status+"</b>";
}
};
xhr.open("POST",'./ajax/tab3Treatment.php',true);
xhr.setRequestHeader("Content-type", "application/x-www-form-
urlencoded");
xhr.send(data);
}
On 5 avr, 21:08, Chris <[email protected]> wrote:
> Actually I can't load all the content of the tab just by clicking it.
> I have to wait for the user to submit the form before I can do display
> more information in the tab.
> I'm kinda stuck.
> I tried earlier today to do the ajax call in my 'JSTreatment.php' page
> and actually i managed to get an answer from the server and i have the
> right information (i used an alert to check it) but when i use
> somethig like document.getElementById('tab3').innerHTML =
> xhr.responseText nothing happens..
>
> I think the issue is that my tab is somehow not visible in the main
> page (when i check the source i don't have the html code used in my
> tabs).
> Is there any way i can access the elements in my tabs ? (and is it
> normal that they [don't seem] to be in the DOM tree ?)
>
> On 5 avr, 12:49, en4ce <[email protected]> wrote:
>
>
>
> > how about you call the ajax when the actual tab is being clicked and
> > not before, this will save traffic as well
>
> > On 5 Apr., 10:04, Chris <[email protected]> wrote:
>
> > > 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.
