Databases
StackOverflow2013
Postsdbo
POgoogle maps loaded with ajax
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POgoogle maps loaded with ajax
    primarykey
    data
    text
    <p>I have a website (which uses <code>jquery bbq</code>) where an ajax request is fired off and a <code>div</code> somewhere in the body is replaced when the response is received. Something along the lines of:</p> <pre><code>var mainContent = $('#main_content'); if ( cache[ url ] ) { mainContent.fadeOut(duration, function() { mainContent.html(cache[ url ]); mainContent.fadeIn(duration, function() { $(document).trigger("ajax_loaded"); }); }); } else { mainContent.fadeOut(duration, function() { var postAjaxCallback = function() { cache[ url ] = mainContent.html(); $(document).trigger("ajax_loaded"); }; $('#loading').fadeIn(duration, do_ajax(url, duration, postAjaxCallback)); } ); } function do_ajax(linkVal, duration, callback) { $.ajax({ type: "GET", url: linkVal, dataType: "html", success: function(page){ var mainContent = $('#main_content'); mainContent.stop(true, true); if(parseInt(page)!=0) { mainContent.html(page); $('#loading').fadeOut(duration, function() { mainContent.fadeIn(duration, callback); } ); } } }); } </code></pre> <p>Now on the whole this works great. The main page is something like:</p> <pre><code>&lt;html&gt; &lt;head&gt; ... &lt;/head&gt; &lt;body&gt; &lt;div id="main_content"); &lt;p&gt;Hello world!&lt;/p&gt; &lt;/div&gt; /body&gt; &lt;/html&gt; </code></pre> <p>and the ajax return for <code>#page2</code> is something like</p> <pre><code>&lt;p&gt;Hello to a different world!&lt;/p&gt; </code></pre> <p>On <code>#page3</code> it gets a bit more complicated. The ajax returned is:</p> <pre><code>&lt;script type="text/javascript"&gt; function initialize() { var mapOptions = { zoom: 11, streetViewControlOptions: true, center: new google.maps.LatLng(26.737792, 49.878273), mapTypeId: google.maps.MapTypeId.SATELLITE } map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); } function loadScript() { var script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;callback=initialize"; document.body.appendChild(script); } loadScript(); $(document).bind("ajax_loaded", function() { console.log("map resize called"); google.maps.event.trigger(map, 'resize'); }); &lt;/script&gt; </code></pre> <p>Now the first time <code>#page3</code> is loaded, everything works fine, the console log fires and the map is resized (needs to be resized because of the grey area problem). Now what I <em>want</em> to happen is that all other pages continue to load normally (either via the ajax calls or from the cache), and that when <code>#page3</code> is navigated to again (i.e. the <code>#("main_content")</code> is set from the cache, that the resize event fires again. I guess in the simplest terms, I am trying to create an event that I trigger after each ajax page is loaded and I can have a custom <code>$(document).bind("ajax_loaded", function() {});</code> on each ajax retrieved page that can do any post processing I need. The behaviour currently exhibited is that nothing happens until I load <code>#page3</code> (and as I mentioned the map is resized and everything is gravy). After that, each page load triggers the bound function and prints to the console (reasonable I guess since I have bound it to <code>$(document)</code>, is there something better to do to make it unique to each page?) However, the real pain is that when I try to reload <code>#page3</code>, the maps loads but is not resized (the console still prints) so I have grey areas on the map. Can anyone help me with my limited javascript experience to get the workflow right. To reiterate:</p> <ul> <li>Each ajax load (or load from cache) will trigger some event</li> <li>Within each ajax page (<code>#page1</code>, <code>#page2</code> etc.) there will be a function that is triggered from the above step that can do setup unique to each ajax page.</li> </ul> <p>Thanks for the help!</p> <p><strong>Edit</strong> I have tried using the following:</p> <pre><code>mainContent.find("script").each(function(i) { eval($(this).text()); }); </code></pre> <p>instead of triggering the <code>ajax_loaded</code> event but to no avail. Anything else I can try?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USChris Robinson
    1. USChris Robinson
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POgoogle maps loaded with ajax
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload