Change address bar url without refreshing the page

7

I'm developing an application where a form with a series of <select> sends information to a chart loaded via AJAX.

I would like these filters to reflect in the browser url, to make it easier for the user to favor the most commonly used filter.

<script type="text/javascript">

    // MyChart("tipo do gráfico", "nome interno grafico", "widht", "heigth", "transparência")   
    var chart = new MyChart("Charts/tipo_do_grafico.swf", "MyChart", "100%", "700", "0");

    var refreshChart = function(){
        var urlParam = $("#filterForm").serialize();
        location.href = "#?" + urlParam;                    
        chart.setDataURL("rota/aplicacao/condicao1/condicao2?" + urlParam);
    };

    refreshChart();
    chart.render("divChart");

    $('#filterForm').change(refreshChart);

</script>

With this code I was able to pass the values that are sent via query string ( GET ) of the form in the url, passing a # to not refresh the page (removed of that answer ).

location.href = "#?" + urlParam; 

But since I use a routing system in my application, ( rota/condicao1/condicao2 ) some conditions stay in the URL and changing them in location.href my page is updated.

Is there any way to only change the address bar URL via javascript, without refreshing the page?

If possible, something works in Internet Explorer.

    
asked by anonymous 11.09.2014 / 15:48

1 answer

8

With HTML5 you can use

window.history.pushState("object or string", "Title", "/new-url");

Read this article for more details: HTML5: Changing the browser-URL without refreshing page

    
11.09.2014 / 15:55