如何从第一页的按钮重新加载第二页？

Question

I've button in page one and I wanna to refresh page two when I click on button in page one ??

I've been using this code but not working :

var url_home = "{{ url('/') }}";

$(document).ready(function()
{  
    $("#refreshDIV").click(function()
    {
        $("#refreshDIV").reload(url_home);
    });
});

Answer 1

You can use local storage to accomplish this in the browser as long as both pages are open at the same time.

In your page ONE , you can set local storage like below:

$("#refreshDIV").click(function()
{
    localStorage.setItem('refreshOtherPage', '0');
    localStorage.setItem('refreshOtherPage', '1');
});

Then in page TWO , you can add a listener script to automatically reload the page:

//Fired from page ONE tab

    $(window).on('storage', function (e)
    {
        var storageEvent = e.originalEvent;

        if ((storageEvent.key == 'refreshOtherPage')
            && (storageEvent.oldValue == '0')
            && (storageEvent.newValue == '1'))
        {
          // DO WHATEVER YOU WANTED TO DO WHEN THAT BUTTON WAS CLICKED HERE
        }
    });

Answer 2

It seems you mix javascript and jquery. The reload() function does not exist in jquery. However, you are close to answer your question. But you'll have to put your 'second page' into a div#id.

<div id="page1"><button id="reload" ...></div>
<div id="page2">the second page, no page headers</div>

And your jquery

var url_home = "{{ url('/') }}";

$(document).ready(function()
{  
    $("button#reload").click(function()
    {
        //font awesome spinner while loading, temporarily replaces #page2
        $("#page2").html('<div class="fas fa-sync fa-spin fa-2x fa-fw"></span>'); 
        $("#page2").load(url_home);
    });
});

You could make the button dynamic by replacing it with a boostrap <a> button and catch the url let url_home = $(this).attr('href'); , don't forget to preventDefault() and trigger on $("a#reload"> if you go for this option.

Answer 3

If I understand you correctly, you can do that by naming your link's target attribute when you first launch the new tab. Then every time you click that link used to launch the tab, it will reload the page in that tab for you.

In page A you add a link to page B like this:

<a href="/page-b" target="page_b">Foo</a>

Now click that link and it will open page B in new tab.

Click again and it will reload page B.

This will not work when someone directly goes to /page-b though.

There is no need to write any Javascript or something on server side. However, if you must create a button dynamically you may adapt this approach to suite your needs. Hope this helps!

If you meant reloading part of the same webpage, that is easily achievable through AJAX.