Refresh the current page with jQuery Mobile when it is clicked

I have a multi page template in jQuery Mobile. How can I refresh the current page when clicking on a hyperlink or button? I am using JQM version 1.4.5

Despite trying the code suggested in how to refresh(reload) page when click button in jQuery Mobile, it is not working as expected:

// Refresh the store main page - experimental
$(document).on('click', '#aStoreReload', function (event) {
    $.mobile.changePage(window.location.href, {
        allowSamePageTransition: true,
        transition: 'none',
        showLoadMsg: false,
        reload: true // also tried reloadPage: true
    });
});

It is returning to the main page with the URL unchanged, such as 

http://localhost:56235/main.html#storeMainPage
on the local server. However, JsBin displays a blank page while JSFiddle does nothing. Click on the store link to see the page with the refresh button.

What would be the proper way to refresh the page (view)?

Edit

I also attempted the following scripts on the click event:

$.mobile.changePage($("#storeMainPage"), { transition: 'slidedown' });
$(document).pagecontainer("load", "#storeMainPage", { reload: true });

The first line has no effect and the second line throws an error 

Uncaught Error: cannot call methods on pagecontainer prior to initialization; attempted to call method 'load'
, which is expected as we are calling pagecontainer before its initialization.

javascriptjqueryhtmlcssjquery-mobile

Answer №1

Make sure to utilize the change method of the pagecontainer widget instead of load:

$(document).on("pagecreate","#storeMainPage", function(){ 
    $(document).on('click', '#aStoreReload', function (event) {
        $( ":mobile-pagecontainer" ).pagecontainer("change", "#storeMainPage", {  reload : true, allowSamePageTransition : true, transition : "none" });
    });    
});

By following this approach, the pageshow event will be triggered again.

Check out the latest version on FIDDLE

Answer №2

How about keeping it simple:

window.location.reload();

It's worth noting that the use of $.mobile.changePage is no longer recommended:

Important: jQuery.mobile.changePage has been deprecated since jQuery Mobile 1.4.0 and will be completely removed in version 1.5.0. It is recommended to use the change() method of the pagecontainer widget instead.

source

Answer №3

After following advice from @ezanker, I successfully managed to refresh the page with a button click. By adding a prefix to the page name in the hash, I was able to trigger a reload of the page and re-run all ajax functions within the pagebforeshow event.

Below is the code snippet that I utilized:

// Refresh the store main page - experimental
//$(document).on("pagecreate", "#storeMainPage", function () {
    $(document).on('click', '#aStoreReload', function (event) {
        $(":mobile-pagecontainer").pagecontainer("change", "main.html#storeMainPage", {
            reload: false,
            allowSamePageTransition: true,
            transition: "none"
        });
        $('#storeMainDesc').text("Latest Store Updates"); // reset the text.
    });
//});

I made some modifications to the code, including adding a filename prefix and changing the reload: false attribute. When using reload: true, the previous page would load with the unchanged URL: 

http://localhost:56235/main.html#storeMainPage
. Uncertain why this behavior occurs.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: Express JS custom module cannot be located in the root directory's modules folder

The file structure of my express js app resembles this I'm attempting to load a modules folder from the root directory. routes/users.js var express = require('express'); var router = express.Router(); var md=require('./modules') ...

javascriptnode.jsexpress

Chart featuring top corners smoothly rounded off for a unique doughnut design

I've been attempting to create a D3.js chart similar to the one shown in the first screenshot: While I can easily replicate a chart like the second screenshot using the default examples, the challenge arises when I try to round only the top corners o ...

javascriptd3.jschartsvisualization

html table displaying incorrect data while using dynamic data in vue 3

example status 1 Hello there! I'm trying to create a table (check out example status 1 for guidance). Here's the code snippet I am using: <table> <tr> <th>Product</th> <th>Price</th> <th>Av ...

htmlvue.jshtml-tablevuejs3

Placing two tables in an HTML document

I am working on integrating two tables into my web application and I would like them to be positioned on the same row horizontally. <span><table><tr><td>A</td><td>B</td></tr></table></span> <s ...

csshtml

Passing a PHP variable between PHP files with the help of jQuery

I'm facing a minor issue. I'm trying to pass a PHP variable from one PHP file to another using setInterval. However, I'm unsure of how to include the PHP variable in my jQuery code. Here is the content of first.php: <?php $phpvariable= ...

javascriptphpjqueryajax

Managing the order of rows in Bootstrap specifically for mobile devices

Take a look at this simple HTML snippet on this fiddle that illustrates a specific layout on wide desktop screens: Here is the code responsible for rendering the above layout: <div class="container"> <div class="row"> <div class="col-md-4" ...

htmlcsstwitter-bootstrap

Error: Trouble encountered when sending a request to a webservice through ajax due to an unexpected token <

$(document).ready(function () { $("#submit").click(function (e) { e.preventDefault(); var userName = $("#username").val(); var password = $("#password").val(); authenticateUser(userName, password); }); }); functio ...

jqueryajaxjsonweb-services

Is it possible to add a border to both the tbody and td

I currently have a table that is organized with tbody elements to group rows together. In order to create a grid-like structure, I applied borders to each individual td element within the tbody. However, I also desire to show that the tbodies themselves ar ...

htmlcss

Guide on submitting a reply to Harvard's "Guess my Word" challenge using JSoup

I am currently working on developing a bot to enhance my gameplay in Harvard's intriguing "Guess my Word!" game. After some exploration, I found out about a post request feature available through Chrome's "inspect element" functionality when a pl ...

javahtmlhttpnetworkingjsoup

Tips for preventing the overwriting of a JSON object in a React application

I'm trying to compare two JSON objects and identify the differing values in the second JSON object based on a specific key. My goal is to store these mismatched values in a new JSON object. The current issue I'm facing is that when there are mult ...

javascriptreactjsjsontypescripttsx

Guide to Inputting Numbers in a Form Field using a Pop-up Keypad (with Javascript/AJAX)

I am working on a small project that involves creating a keypad with buttons for all the digits, backspace, and decimal. When these buttons are clicked, they should populate a form field like a text box. The keypad will be located next to the form field as ...

javascriptajaxkeyboardformfield

Is submitting data through ajax giving you trouble?

As a beginner in PHP with no knowledge of Javascript, I have been relying on tutorials to complete my JS tasks. Despite trying various solutions from StackOverflow, I have yet to achieve success! My goal is to update database values by clicking the ' ...

javascriptphpjqueryajaxforms

Unable to set the active tab using $rootScope

Is there anyone who can assist me with the issue I am currently facing? I have a NavCtrl to manage my active tags, and although I was able to change the active tab when clicking on the menu item, it does not update when clicking on links in the body views. ...

javascriptangularjsangularjs-scopeangular-ui-router

Invoke the express function on the client using the callable method

When I'm listening on a local port with my browser, the following method will return Hello world. //Node app.get('/', (req,res)=>{ res.send('Hello world') }); I've successfully exported the app as a ca ...

javascriptfirebaseexpressgoogle-cloud-functions

Issues with applying styles to custom components in styled-components

I attempted to customize the inner elements of react-id-swiper using the code below: import Swiper from 'react-id-swiper'; import styled from 'styled-components'; const MySwiper = ({ className, children }) => ( <Swip ...

javascriptreactjsmaterial-uistyled-components

Assertion error: 1 does not match the expected value of 6

I am faced with a challenging test that requires me to write code that will pass successfully. However, no matter what I try, all I get is the following error messages: "Failed asserting that 1 matches expected 6" when I return 6 and "Too few arguments t ...

phphtmlobjecttesting

How to interrupt a JQuery animation and restart it from the middle?

Currently, I am tackling my first JQuery project and facing a challenge. As the user mouseleaves the .container, the animation does not reset but continues as if they are still within it. My goal is to have the animation revert in reverse if the user decid ...

javascriptjqueryhtmlcss

Incorporating PHP in JS/jQuery AJAX for creating unique odd and even conditional layouts

My PHP code includes a loop that changes the layout of elements based on whether the $count variable is odd or even. For odd counts, an image appears on the left and text on the right. For even counts, it's the other way around. To load content dynam ...

javascriptphpjqueryajax

The depth order of overlapping elements and the rotation effect achieved through

I have created some interactive flip cards using CSS and HTML with transitions Currently, when you hover over a card, it flips and enlarges. However, I am facing an issue with positioning the hovered card on top using z-index and relative position due to ...

htmlcsscss-transitions

The <button> tag and the <a> tag have different display properties

I am in the process of creating unique custom buttons using CSS. Below is the code snippet that I have created for this purpose. Interestingly, when I apply the CSS to a <button> element, it behaves as expected. However, when I use it with an <a& ...

htmlcsstwitter-bootstrap