jQuery Mobile Collapsible appearing twice

Question

I have a jQuery Mobile page with a dynamically generated collapsible. It works great, except if I leave the page then return to it. When that happens, the collapsible appears twice. A refresh fixes the issue but that's obviously not a good solution. Others on here have described similar symptoms, but their solutions didn't work for me. I'm hoping someone can help me out. I think I may be misusing pageinit...

I'm using jQuery 1.9.1 with jQuery Mobile 1.3.1. I'm using Codiqa to generate my pages, hence why I'm on jQuery 1.3.1. I generated the code such that every page is a separate html file.

Here's my code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Characters | PCT</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <link href="css/codiqa.ext.css" rel="stylesheet">
  <link href="css/jquery.mobile-1.3.1.css" rel="stylesheet">

  <script src="js/jquery-1.9.1.js"></script>
  <script src="js/jquery.mobile-1.3.1.js"></script>
  <script src="js/codiqa.ext.js"></script>
  <script src="http://www.parsecdn.com/js/parse-1.2.15.min.js"></script>
  <script src="js/pct.js"></script>

</head>
<body>
   <div data-role="page" data-control-title="Characters" id="characters" 
      class="character_page">
   <script>
  $(document).on("pageinit", "#characters", function() {
    var charQuery = new Parse.Query("Character");
            charQuery.equalTo("user", Parse.User.current());
            charQuery.find({
           success: function(results) {
                  for (var j = 0; j < results.length; j++) {
                var object = results[j];
        var charName = object.get('charName');
        var charNumActions = object.get('charNumActions');
        var charSpd = object.get('charSpd');

                    $("#char_list").append("<div data-role='collapsible'><h4> " + 
                    charName + "</h4><p><strong>Number of Actions:</strong> " + 
                    charNumActions + "</p><p><strong>Spd:</strong> " + charSpd + "</p>
                    <a data-role='button' class='edit_button' 
                    href='edit_character.html?charname=" + charName + "' data-icon='edit' 
                    data-iconpos='left'>Edit</a><a data-role='button' 
                    id='delete_char_button' class='delete_button' data-inline='true' 
                    data-icon='delete' data-iconpos='left'>Delete</a></div>");

                    $("#char_list").collapsibleset("refresh");
                $(".edit_button").buttonMarkup();
        $(".delete_button").buttonMarkup();
         }
             }
         }); 
    });
</script> 
  <div data-theme="a" data-role="header">

Thank you in advance for taking the time to look at this.

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

Update:

Based on your edited OP and comment below, when using single page model, functions/JS code that is related to a specific page should be placed inside that page's div.

jQuery Mobile uses Ajax to load pages, it loads all libraries and code of first loaded page's head tag, and neglects the rest as it loads only data-role="page" div.

<div data-role="page" id="characters">
  <script>
    <!-- place code here -->
  </script>
</div>

Because you bind to pageinit without specifying a page. The code will be executed whenever a page is initiated.

You should bind it to page id to fire once only.

$(document).on("pageinit", "#page_id", function () {
  // code
});

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 03 '14 at 07:22

Omar

32,302
9
69
112

Thank you for your response! It works much better now except for one thing: on the initial load, it doesn't display any at all. I have to click refresh. Once refresh is clicked, it works fine from there. – mrbranden Jan 03 '14 at 14:37
@mrbranden are you using _single page model_? each page in a separate HTML file? if yes, place the code inside the target page. – Omar Jan 03 '14 at 15:33
That is correct, I'm using single page model. I placed the JS in the target page (see edited code above), which fixes the problem with it not appearing on page load... but now we're back to printing double! Is it necessary to add the _pageid_ to the pageinit if it's included in the page div itself? Thanks again! – mrbranden Jan 03 '14 at 19:22
1

If page id is added and the problem persists, use `.one` instead of `.on` @mrbranden – Omar Jan 03 '14 at 20:07
1

That did it! Thank you so much, you've made my afternoon! :-) – mrbranden Jan 03 '14 at 20:57

jQuery Mobile Collapsible appearing twice

1 Answers1

Update: