CODEWITHSUNDEEP
javascripthtmljquery-mobilepostback
theNoobProgrammer
theNoobProgrammer

Reputation: 932

jquery mobile button automatically refreshes page

I a using jquery mobile to create a mobile web page. I defined a button and an onclick event. After the onclick function is carried out my page is automatically refreshed. Does anyone know why this is happening or how i can stop it?

my button declaration:

<button id="rateButton" data-theme="a" data-icon="star" data-iconpos="right" onclick="BtnRatePressed();">Rate</button>

function: 

function BtnRatePressed() {
    var rateBtn = document.getElementById('rateButton');
    rateBtn.style.visibility = 'hidden';
    alert("yeh");

}

I receive the alert and then the page refreshes.

Upvotes: 2

Views: 1557

Answers (3)

a paid nerd
a paid nerd

Reputation: 31502

Add return false; to the end of BtnRatePressed() so that the click even isn't propagated and doesn't cause the form to submit.

Edit: Also, change your attribute to onclick="return BtnRatePressed();"

Upvotes: 2

sgliser
sgliser

Reputation: 2071

The problem is that you're using an actual button and that is causing the form to action, you can accomplish the same thing by using a hyperlink button like this and avoid the problem...

<a href="javascript:BtnRatePressed();" data-role="button" id="rateButton" data-theme="a" data-icon="star" data-iconpos="right">Rate</a>

Upvotes: 1

Dennis Jamin
Dennis Jamin

Reputation: 386

We need code for this to find out. Any way you can supply us with a live demo?

You might have forgotten to return false at the end of the onclick event. Neglecting the return of false will make the browser to execute the href of the link anyway, which might appear as a page reload.

As I stated, seeing the live example, add return false to either

your BtnRatePressed function

function BtnRatePressed()
{
    var rateBtn = document.getElementById('rateButton');
    rateBtn.style.visibility = 'hidden';
    alert("yeh");
    return false;
}

or within the onclick statement.

<button id="rateButton" data-theme="a" data-icon="star" data-iconpos="right" onclick="BtnRatePressed(); return false;">Rate</button>

Upvotes: 2

Related Questions