jQuery Mobile Collapsible appearing twice

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

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.

Was it helpful?

Solution

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
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top