Geek Answers Handbook

Prevent multiple divs with same identifier

I had a problem in a jquery-mobile project that uses multiple html documents. The premise is that a regular thread, the user went to the main page, and then referred to one of the other two pages (icon_view, detail_view). From there, the user can select the "character". My understanding of jQM is that the home page loads when the link to icon_view or detail_view is clicked, that HTML is loaded and everything except <title> and <div data-role = "page"> are deleted and placed in the DOM. This is working fine. This happens again when the user clicks one of the characters <div data-role = "page" id = "CH-page"> this is the div that is inserted into the DOM. If I press back and then select another character, everything will be fine. However, when the bookmark user is on the character page and tries to go to another character page, it seems that there is a second lt page; div data-role = "page" id = "CH-page"> which is added to the DOM again, and any manipulation using the object identifier is ineffective (I assume that this is because the first instance is the one that is modified but not displayed). My question is navigation, how can I prevent multiple <div data-role = "page" id = "CH-page"> in my document?

character.php

<?php $date = new DateTime(); $ts = "?x=" . $date->getTimestamp(); $typeId = $_GET["typeId"]; ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HARDAC - Character</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/themes/borg.css" /> <link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" /> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" /> <link rel="stylesheet" type="text/css" href="css/hardac.css<?php echo $ts ?>" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> <script type="text/javascript" src="js/index_data.js<?php echo $ts ?>"></script> <script type="text/javascript" src="js/hardac.js<?php echo $ts ?>"></script> </head> <body> <div data-role="page" id="CH-page"> <link rel="stylesheet" type="text/css" href="css/character.css<?php echo $ts ?>" /> <script type="text/javascript" src="js/character.js<?php echo $ts ?>"></script> <div data-role="header" data-position="fixed"> <div class="ui-btn-left"> <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-btn-icon-notext ui-btn-inline ui-icon-carat-l">Back</a> <a href="index.php" class="ui-btn ui-corner-all ui-btn-icon-notext ui-btn-inline ui-icon-home"></a> </div> <h1>HARDAC - Character</h1> </div> <!-- data-role="header" --> <div class="ui-content" id="CH-content"> <div> <div class="CH-picture"> <img src="" alt="" name="CH-picture" id="CH-picture"/> </div> </div> <div data-role="field-contain"> <label for="CH-player-name">Player Name:</label> <input type="text" name="CH-player-name" id="CH-player-name" placeholder="Player Name"/> </div> <div data-role="field-contain"> <label for="CH-character-name">Character Name:</label> <input type="text" name="CH-character-name" id="CH-character-name" placeholder="Character Name"/> </div> <div data-role="field-contain"> <label for="CH-creature-type" class="select">Creature Type:</label> <select name="CH-creature-type" id="CH-creature-type"> <option value="0">Unknown</option> <option value="1">Changeling</option> <option value="2">Werewolf</option> </select> </div> <div data-role="field-contain"> <label for="CH-virtue" class="select">Virtue:</label> <select name="CH-virtue" id="CH-virtue"> <option value="0">Unknown</option> <option value="3">Charity</option> <option value="4">Faith</option> <option value="5">Fortitude</option> <option value="6">Hope</option> <option value="7">Justice</option> <option value="8">Prudence</option> <option value="9">Temperance</option> </select> </div> <div data-role="field-contain"> <label for="CH-vice" class="select">Vice:</label> <select name="CH-vice" id="CH-vice"> <option value="0">Unknown</option> <option value="10">Envy</option> <option value="11">Gluttony</option> <option value="12">Greed</option> <option value="13">Lust</option> <option value="14">Pride</option> <option value="15">Sloth</option> <option value="16">Wrath</option> </select> </div> <?php if ($typeId == 1) { include("changeling.php"); } else if ($typeId == 2) { include("werewolf.php"); } ?> </div> </div> <!-- class="ui-content" --> <div data-role="footer"> </div> <!-- data-role="footer" --> </div> <!-- data-role="page" --> </body> </html>

character.js

 var character = null; var player = null; $(document).off("pageinit", "#CH-page").on("pageinit", "#CH-page", function (event) { var parameters = $(this).data("url").split("?")[1]; var characterId = getUrlParameter(parameters, "characterId"); // gets characterId either from jQM or browser url character = getCharacter(characterId); player = getPlayer(character.playerId); fillSelect("CH-creature-type", character.typeId); fillSelect("CH-vice", character.viceId); fillSelect("CH-virtue", character.virtueId); if (player.picture) { $("#CH-picture").attr("src", "img/" + player.picture + ""); } $("#CH-picture").attr("alt", player.name); $("#CH-player-name").val(player.name); $("#CH-character-name").val(character.name); $("#CH-page").trigger("create"); }); function fillSelect(selectId, selectedId) { $("#" + selectId).each(function(){ $(this).val(selectedId); }); }
+7
jquery-mobile
source share
1 answer

This code will delete any page if it is hidden, but does not leave it in the document tree.

 $(document).on('pagehide', '.ui-page', function(event, ui) { $(event.target).remove(); });
0
source share

More articles:


All Articles