After the initial click I have to click twice to get the button to fire again

StackOverflow https://stackoverflow.com/questions/17071274

  •  31-05-2022
  •  | 
  •  

Question

I'm developing an app with jquery/phonegap. I have a page where you can choose a country. Based on that you will be able to get different lists. But you can also return to this 'settings's page and change the country. when you start, the click fires just like it should. But when you return to the settings and try to change country, you have to click twice. Might be easy to solve? Anyone have any ideas?

<!DOCTYPE HTML>
<html>
<head>
<title>The Arena App</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="css/styles.css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript">
        function ProcessC(){
       console.log('test');
        var input = $('input:radio[name=country]:checked').val();
        if (input =='belgium' ) {
            window.localStorage.setItem("country", "Belgium");
            document.location.href = "listarenas.html";
        } else if (input =='holland') {
            window.localStorage.setItem("country", "Holland");
            document.location.href = "listarenas.html"; }
        else {
            window.localStorage.setItem("country", "all");
            document.location.href = "listarenas.html";
        }
    }

</script>
</head>

<body>

<div data-role="page" id="countryPage">

    <div data-role="header" data-position="fixed">
        <h1>Choose Country</h1>
    </div>

    <div data-role="content">
         <form action="" data-ajax="false" id="countryp">
         <div data-role="fieldcontain">
            <fieldset data-role="controlgroup">
                <legend>Choose a country:</legend>
                <input type="radio" name="country" id="all" value="all" checked="checked">
                <label for="all">All</label>

                <input type="radio" name="country" id="be" value="belgium">
                <label for="be">Belgium</label>

                <input type="radio" name="country" id="nl" value="holland">
                <label for="nl">Holland</label>
            </fieldset>
         </div>
         <div data-role="fieldcontain">
            <input type="button" value="Go!" onclick="ProcessC();" />
         </div>
         </form>


    </div>      

</div>


<script src="js/arenalist.js"></script>
<script src="js/arenadetails.js"></script>


</body>

</html>

EDIT1: It seems like the prevent default doesn't work the second time you go to the page. Instead it just reloads the page(and the url becomes http://localhost/arenaapp/www/index.html?country=holland , for example, if i click on holland), and that's why it works when you click the second time i guess.

EDIT2: I'll post the code of the page you arrive from as well here: listarenas.html

<!DOCTYPE HTML>
<html>
<head>
<title>The Arena App</title>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
 <link rel="stylesheet" href="css/jquery.mobile-1.3.1.min.css" /> 
 <link rel="stylesheet" href="css/styles.css" /> 
</head>

<body>

<div id="ListArenasPage" data-role="page">

    <div data-role="header" data-position="fixed">
    <a href='index2.html' class='ui-btn-left' data-icon='settings' data-theme="a" >Countries</a>
        <h1>The Arena App</h1>
    </div>

    <div data-role="content">
         <ul id="arenaList" data-role="listview" data-filter="true" data-filter-placeholder="Filter arenas..."></ul>
    </div>      

</div>

 <script src="js/jquery-1.9.1.min.js"></script> 
 <script src="js/jquery.mobile-1.3.1.min.js"></script>
 <script src="js/arenalist.js"></script>
 <script src="js/arenadetails.js"></script> 


</body>

</html>

And the JS file arenalist.js:

var serviceURL = "http://localhost/arenaapp/services/";

var arenas;

$('#ListArenasPage').on('pageshow', function(event) {
    getarenaList();
});

function getarenaList() {
    var country = window.localStorage.getItem("country");
    $.getJSON(serviceURL + 'getarenas.php?id=' + country, function(data) {
        $('#arenaList li').remove();
        arenas = data.items;
        $.each(arenas, function(index, arena) {
            $('#arenaList').append('<li><a href="arenaDetails.html?id=' + arena.id + '">' +
                    '<img src="pics/' + arena.picture + '"/>' +
                    '<h4>' + arena.arenaName + '</h4>' + '<p id="category">Club:' + arena.arenaClub + '</p>' +
                    '<p>Capacity:' + arena.arenaCapacity + '</p>' +
                    '<span class="ui-li-count">' + arena.id + '</span></a></li>');
        });
        $('#arenaList').listview('refresh');
    });
}

LAST EDIT: As a last edit I would like to point out, for people with the same problem, that one of the reasons I had such big problems was that as you can see in the first code snippet, I had my script before the data-role="page". And with jquery after the initial page, only the things within the page tag will be executed in the rest of the pages. So code must go in the first index-page(where ever) or in other pages after the data-role"page", because of the jquery architecture.

Read this: https://stackoverflow.com/a/8724964/2466991

Was it helpful?

Solution

I think that you should probably not be trying to handle this inside of a submit type of action. Really all you are talking about is executing a button's click handler. Trying to do it inside of a form onsubmit is probably adding unnecessary complexity and potential cross browser issues.

Try changing your submit button into a normal button element. Here is where you would register the click handler. Remove the handler from the <form onsubmit=""> tag.

<input type="button" value="Go!" onclick="ProcessC();" />

I think also at that point you can probably drop the event.preventDefault() since you don't really need to prevent the default of a simple button click handler. The default is exactly what you're doing!

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top