Button to call function without changing URL or reloading entire page?

Question

Right now I have 2 buttons, one calls a function to do something and the other displays info onto the page.

router.get('/run-func', function(res, req, next) {
    //call function
    res.render('index');
};

router.get('/get-data', function(res, req, next) {
    //get info from db...
    res.render('index', {items: tempArray});
};

Each time a button is clicked it sends me to another url but displays the index page:

http://localhost:3000/run-func

http://localhost:3000/get-data

The problem is every time I click run-func it reloads the page and the data that was displayed from get-data disappears. Is there a way to make these buttons not load different urls?

The HTML was done using handlebars, here's the get-data one:

<div class="get">
    <h3>Get Data</h3>
    <a href="/get-data">LOAD DATA</a>
    <div>
        {{# each items }}
            <article class="item">
                <div>id: {{ this._id }}</div>
                <div>prop: {{ this.prop }}</div>
            </article>
        {{/each}}
    </div>
</div>

The code you posted is server-side. But the problem you describe seems to be client-side. You should add the client-side implementation of your buttons (HTML code). — Cubius, Aug 16 '16 at 05:54
First, you need to know what res.render does, because it gives you back an HTML template. http://stackoverflow.com/a/21843991/572348 Second, creating an acnchor with href like this `/somepath` will always navigate your browser to another page. So if you just want to get some data from express and put it on your page, you need at least two things: 1) have a server route which returns data (e.g. JSON) 2) have a client-side code, which invokes an AJAX request to that route, gets that JSON and makes use of it. — Cubius, Aug 16 '16 at 06:13

score 0 · Answer 1 · answered Aug 16 '16 at 05:54

try this

function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", urlPath);
 }

You can then use window.onpopstate to detect the back/forward button navigation:

window.onpopstate = function(e){
    if(e.state){
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
};

Button to call function without changing URL or reloading entire page?

1 Answers1