iOS Cordova user prompt displaying multiple times

Question

I have an iOS cordova application. I have a navigator.notification.prompt that appears (as expected) to allow the user to rename a particular radio channel. The problem is that if the "Rename" button is clicked again (even after navigating to other pages and such) the prompt shows up times the number of times it has been clicked during the life of the application. (Example: if this is the second time it was clicked, it shows up twice. Third time, 3 times. etc...)

The Javascript:

//***ChannelDetails***//

var ChannelDetails = {
    Load: function (id) {
        Data.db.transaction(function (tx) {
            tx.executeSql('SELECT * FROM Channels WHERE ID=?', [id], function (tx, results) {
                $('#channel-info').empty().append(
                    $('<strong/>').html(results.rows.item(0).Name),
                    $('<p/>').html("Zone: " + results.rows.item(0).Zone),
                    $('<p/>').html("Channel: " + results.rows.item(0).Channel),
                    $('<p/>').html("Frequency: " + results.rows.item(0).Frequency)
                );
                $('#channel-rename').data('id', id).data('name', results.rows.item(0).Name).on('click', function () {
                    ChannelDetails.Rename($(this).data('id'), $(this).data('name'));
                });
                $('#channel-delete').attr('data-id', id).on('click', function () {
                    ChannelDetails.Delete($(this).attr('data-id'));
                });
            });
        });
    },
    Rename: function (id, name) {
        navigator.notification.prompt("Set a name for the channel:", function (results) {
            if(results.buttonIndex === 1) {
                Data.db.transaction(function (tx) {
                    tx.executeSql('UPDATE Channels SET Name=? WHERE ID=?',[results.input1,id]);
                });
                $('#channel-details').dialog('close');
                $('#channel-list').empty();
                RadioChannels.Load();
            }
        }, name, ["Save", "Cancel"]);
    },
    Delete: function (id) {
        Data.db.transaction(function (tx) {
            tx.executeSql('DELETE FROM Channels WHERE ID=?',[id]);
        });
        $('#channel-details').dialog('close');
        $('#channel-list').empty();
        RadioChannels.Load();
    }
};

The HTML:

<!--Radio Channels-->
<div id="radio-channels" data-role="page" data-theme="a">
    <div data-role="header">
        <a href="#home">Back</a>
        <h1>Channels</h1>
    </div>
    <div data-role="content">
        <a href="#add-channel" data-role="button">Add Channel</a>
        <ul id="channel-list" data-role="listview" data-inset="true"></ul>
    </div>
</div>
<!--Channel Details-->
<div id="channel-details" data-role="page" data-theme="a">
    <div data-role="header">
        <h1>Channel</h1>
    </div>
    <div data-role="content">
        <div id="channel-info"></div>
        <button id="channel-rename">Rename</button>
        <button id="channel-delete">Delete</button>
    </div>
</div>

This is very confusing behavior.

EDIT:

So after further testing I have found that it is not the number of times that the button is clicked that causes multiples, it is the number of times that the channel-details page is loaded. I will post the code below of how it is opened since this appears to be affecting it somehow. Note I am using jQuery-mobile and this page is opened as a dialog.

//***Radio Channels***//

var RadioChannels = {
    Init: function () {
        $('a[href=#radio-channels]').on('click', function () {RadioChannels.Load();});
    },
    Load: function () {
        $('#channel-list').empty();
        Data.db.transaction(function (tx) {
            tx.executeSql('SELECT * FROM Channels', [], function (tx, results) {
                var i;
                for(i=0; i<results.rows.length; i++) {
                    $('#channel-list').append(
                        $('<li/>').append(
                            $('<a/>').attr('href', "#channel-details").attr('data-rel', "dialog").attr('data-id', results.rows.item(i).ID).append(
                                $('<strong/>').html(results.rows.item(i).Name),
                                $('<p/>').html("Zone: " + results.rows.item(i).Zone),
                                $('<p/>').html("Channel: " + results.rows.item(i).Channel),
                                $('<p/>').html("Frequency: " + results.rows.item(i).Frequency)
                            ).on('click', function () {
                                ChannelDetails.Load($(this).attr('data-id'));
                            })
                        )
                    );
                }
                $('#channel-list').listview('refresh');
            }, function (error) {alert(error.code + " " + error.message);});
        });
    }
};

Another Edit

I switched it back to a regular page, not a dialog and I am getting the same results... Are multiple instances being created? Is this an internal bug?

score 2 · Accepted Answer · edited May 23 '17 at 12:11

From what you have told I think you have a problem with multiple event binding. Unlike classic web pages jQuery Mobile is unique, if you don't take care you you can bind multiple events to a single object.

Fir example this code:

$('a[href=#radio-channels]').on('click', function () {RadioChannels.Load();});

should be:

$('a[href=#radio-channels]').off('click').on('click', function () {RadioChannels.Load();});

If wan to find more about multiple event binding and how to solve it (with examples) take a look at my other answer: jQuery Mobile: document ready vs page events and look for a topic: Prevent multiple event binding/triggering.

iOS Cordova user prompt displaying multiple times

1 Answers1