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

Stopping $interval using promise after a specific condition is satisfied using Angular timer

I'm struggling to figure out why my $interval service isn't canceling properly. It seems like something important is missing. In my code, I've set up a counter that's tied to a counting property: $scope.sessionCounter $scope.sessionC ...

javascriptangularjssetinterval

How about a custom-designed talking JavaScript pop-up?

Looking to customize the appearance (CSS, buttons...) of a "confirm" JavaScript dialog box while ensuring it remains persistent. The dialog box appears after a countdown, so it is crucial that it maintains focus even if the user is on another browser tab o ...

javascriptdialog

Unable to display <iframe> containing a YouTube video on Mozilla Firefox page

I have included an <iframe> in my webpage to display videos from YouTube, but I am facing an issue with Mozilla Firefox. In Chrome, IE, and Edge, the videos display correctly using the following code: <iframe src="http://www.youtube.com/v/DNLh8p ...

htmlfirefoxiframeembed

Who is responsible for triggering a PostBack?

I am trying to identify the control that triggers a page PostBack within the Page_Load event, as there are multiple controls on my page. ...

c#asp.netpostbackhtml

Disable the scroll bar on a bootstrap modal

<span class="education"style="font-size:170%;line-height:150%;">&nbsp;Education <br> <small style=" color:gray;font-size:60%;">&nbsp; Blue Ridge University,2012-2014 </small> <br> <sma ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

Convenient way for users to easily choose an icon from a vast selection of icons

I am currently working on a web application that allows users to create new categories. These categories are then inserted into a database using form post. Each category should have an icon associated with it, and I want users to be able to select the ico ...

javascripttwitter-bootstrapbootstrap-5user-friendlybootstrap-icons

Could there be a more efficient method to enable support for all video formats?

I have a case statement in my video validation function that checks for specific file extensions of video formats. However, I am wondering if there is a shorter way to write the code in order to allow all video formats instead of creating a long list of al ...

javascriptjquerycase

Issue retrieving Select2 tag values from view to controller in ASP.NET MVC 5

I need assistance in transferring tag values from the view to the controller. Here is my approach: I have a model attribute for fetching Select2 values: In the model: public string[] TagList { get; set; } In the view, I have a select element like this: ...

c#jqueryasp.net-mvcasp.net-mvc-5jquery-select2

Adaptable material for collapsible panels

I'm facing a challenge with implementing an accordion menu. My goal is to have a 4 column layout that transforms into an accordion menu when the browser width is less than 600px. It almost works as intended, but there's a glitch. If you start at ...

javascriptjqueryaccordion

An issue occurred while attempting to differentiate the '[object Object]'. Angular-11 Application only accepts arrays and iterables for this operation

When using *ngFor, I am facing an issue with fetching data from my component.ts to my component.html Interestingly, the same method works for one class but not for another. Let's take a look at my service class: export class FoodListService { priv ...

javascriptangulartypescriptrxjsangular-ui-router

The concept of Border-Merging within Material Design Tables

Is there a way to implement the following border style in a Material Design Table: border-collapse: collapse; I tried adding a border to .mat-cell: .mat-cell { border: 1px solid; } However, in some instances, the border appears to be 2px. The reas ...

cssangularmaterial-design

reveal a hidden div by sliding it during an onclick action

My PHP while loop code is as follows: while (...($...)){ $convid = $row['ID']; echo" <button onclick='getconvo($convid)'>open</button> <div class="convowrap"></div> "; } Here is the correspond ...

javascriptphpjquery

When integrating the React custom hook setValue into another component, it appears to be returning an undefined

I have created a custom useLocalStorage hook. When I directly use it in my component and try to update the value, I encounter an error stating that setValue is not a function and is actually undefined. Here's the code snippet: // Link to the original ...

javascriptreactjsreact-hooks

Implementing a NestJs application on a microcomputer like a Raspberry Pi or equivalent device

I'm facing a challenge in trying to find a solution for what seems like a simple task. I am aware that using the Nest CLI, I can utilize the command "nest build" to generate a dist folder containing the production files of my project. However, when I ...

javascriptnode.jstypescriptnestjs

Determine the data type of a string without needing to convert it

Can you determine if a value is numeric without casting it? For example, how can you differentiate between 'abc' and '123' without converting them to a specific data type? While visually apparent that 'abc' is not numeric, t ...

javascriptlodash

Ways to verify the timeframe between two specific dates

Having two distinctive arrays: accomodation: [ { id: 1, name: "Senator Hotel Fnideq", address: "Route de Ceuta, 93100 Fnidek, Morocco", checkin: "September 1", fullCheckinDate: "2021-09-01", ...

javascriptarraysvue.jsobjectdayjs

Creating a variable in the outer scope from within a function

I am currently implementing validation for a form field on the server side using ExpressJS. Here are the steps I am taking: Reading data from a JSON file Extracting an array property from the data Verifying if this array contains every element of a ...

javascriptarraysnode.jsjsonexpress

Display only the static placeholder in Angular 2 multi-select feature

My experience with angular 4 is fairly new and I've recently delved into using the angular multiselect feature with the npm package available here. I've managed to successfully configure it, as well as capture selected and deselected items/event ...

cssangularnpmresponsive-design

What is the most effective way to verify numerical values, including both integers and decimals, using regular

Allow input as both integers and decimal numbers, with a total length restriction of 11 characters (including the decimal point). For example, allowed values include: 1.0, 1.123546, 12345678912, 12.12345678, etc. If the value contains a decimal point, ther ...

jqueryregex

Embark on the journey of incorporating the Express Router

My Nodejs server is set up with router files that use absolute routes for the HTTP methods, such as /api/users/all. // /routes/user.routes.js module.exports = (app) => { app.use((req, res, next) => { res.header( "Access-Control-All ...

javascriptnode.jsexpressroutes