views:

691

answers:

2

The code below displays a google map and search results when you enter an address and hit the submit button. I've been playing with it to try and force the page to completely refresh or reload once you hit the submit button. But I can't get it to work right. It loads the results "in page," but I'd like the page to completely refresh when the results load, like when you hit the back button on your browser. Hope that makes sense.

I think the answer lies in this line of code but I don't know jquery very well. It's near the bottom of the full code below.

<script type="text/javascript">
(function($) { 
    $(document).ready(function() {
        load();';

Here's the full code below. Any help would be greatly appreciated!

<?php
/*
SimpleMap Plugin
display-map.php: Displays the Google Map and search results
*/
$to_display = '';

if ($options['display_search'] == 'show') {
$to_display .= '
<div id="map_search" style="width: '.$options['map_width'].';">
    <a name="map_top"></a>
    <form onsubmit="searchLocations(\''.$categories.'\'); return false;"         name="searchForm" id="searchForm"     action="http://'.$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'].'"&gt;
        <input type="text" id="addressInput" name="addressInput" class="address"     />&nbsp;
        <select name="radiusSelect" id="radiusSelect">';

            $default_radius = $options['default_radius'];
            unset($selected_radius);
            $selected_radius[$default_radius] = ' selected="selected"';

            foreach ($search_radii as $value) {
                    $r = (int)$value;
                    $to_display .= '<option valu         e="'.$value.'"'.$selected_radius[$r].'>'.$value.' '.$options['units']."</option>\n";
            }

$to_display .= '    
        </select>&nbsp;
        <input type="submit" value="'.__('Search', 'SimpleMap').'"     id="addressSubmit" class="submit" />
        <p>'.__('Please enter an address or search term in the box above.',     'SimpleMap').'</p>
    </form>
</div>';
}
if ($options['powered_by'] == 'show') {
    $to_display .= '<div id="powered_by_simplemap">'.sprintf(__('Powered by %s     SimpleMap', 'SimpleMap'),'<a href="http://simplemap-plugin.com/"     target="_blank">').'</a></div>';
}

$to_display .= '
<div id="map" style="width: '.$options['map_width'].'; height:     '.$options['map_height'].';"></div>

<div id="results" style="width: '.$options['map_width'].';"></div>

<script type="text/javascript">
(function($) { 
    $(document).ready(function() {
        load();';    

        if ($options['autoload'] == 'some') {
            $to_display .= 'var autoLatLng = new GLatLng(default_lat,     default_lng);
            searchLocationsNear(autoLatLng, autoLatLng.lat() + ", " +     autoLatLng.lng(), "auto", "'.$options['lock_default_location'].'", "'.$categories.'");';
        }

        else if ($options['autoload'] == 'all') {
            $to_display .= 'var autoLatLng = new GLatLng(default_lat,     default_lng);
            searchLocationsNear(autoLatLng, autoLatLng.lat() + ", " +     autoLatLng.lng(), "auto_all", "'.$options['lock_default_location'].'",     "'.$categories.'");';
        }

$to_display .= '
    });
})(jQuery);
</script>';

?>
+5  A: 

You don't need jQuery to do this. Embrace the power of JavaScript.

window.location.reload()

Edit: This is another example of where some "jQuery magic" is expected to solve problems without thinking of the fundamentals of JavaScript which is often the simplest, fastest and most direct way to do something.

Diodeus
+5  A: 

Replace that line with:

$("#someElement").click(function() {
    window.location.href = window.location.href;
});

or:

$("#someElement").click(function() {
    window.location.reload();
});
karim79
Hey thanks guys. I'm a total noob at this stuff but when I replaced load(); with window.location.reload(); the page continually refreshes at the moment the page loads up, and doesn't stop. Can you let me know where I make the change?
TimMac
onsubmit="searchLocations(\''.$categories.'\'); return false;"Get rid of the "return false".
Diodeus
Thanks, but I'm still in an infinite refresh loop. Did I do this right:<script type="text/javascript">(function($) { $(document).ready(function() { window.location.reload();';
TimMac
That's because every time the page loads, it refreshes again as soon as the DOM is ready. Basically, you want to bind that to the click method of some element. See the updated answer. If that element happens to be a link, `return false` at the end of the event handler.
karim79
@TimMac - see my edit, you will need to include the entire code within your doc ready: `$("#someElement").click(function() { window.location.href = window.location.href;});`
karim79
Thanks Karim. I tried but now the map won't load. It won't seem to load with the "load();"Here's what I tried: <script type="text/javascript">(function($) { $(document).ready(function() {$("#addressSubmit").click(function() { window.location.href = window.location.href; });
TimMac