Databases
StackOverflow2013
Postsdbo
POjQuery Mobile: problems refreshing multiple list views after elements have been appended
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery Mobile: problems refreshing multiple list views after elements have been appended
    primarykey
    data
    text
    <p>I hope the Title is self explanatory. I am using jQuery mobile to populate a series of list views from information stored in a database, each list view populates the following one in a parent-child relationship (ex: first list view allows you to choose animals, you choose dog, next list view is populated with pedigrees, and so on).</p> <p>Right now my code properly populates the list views properly, the problem I have is that if I go back to a parent list view and make a different selection, the child list views do not refresh and we end up with a bunch of appended information. I have read a lot everywhere but I cannot seem to find a proper implementation for my code.</p> <p>HTML content (body):</p> <pre><code>&lt;ul data-role="listview" data-filter="false" data-inset="true" data-theme="a" data-divider-theme="a"&gt; &lt;li&gt; &lt;label for="pet" class="select"&gt;Pet&lt;/label&gt; &lt;select id="pet" data-mini="true" onchange="fill_list('pedigree', this);"&gt; &lt;option value=""&gt;&lt;/option&gt; &lt;/select&gt; &lt;/li&gt; &lt;li&gt; &lt;label for="pedigree" class="select"&gt;Pedigree&lt;/label&gt; &lt;select id="pedigree" data-mini="true" onchange="fill_list('pet_name', this);"&gt; &lt;option value=""&gt;&lt;/option&gt; &lt;/select&gt; &lt;/li&gt; &lt;li&gt; &lt;label for="pet_name" class="select"&gt;Pet Name&lt;/label&gt; &lt;select id="pet_name" data-mini="true"&gt; &lt;option value=""&gt;&lt;/option&gt; &lt;/select&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p>JS:</p> <pre><code>function fill_list(next_list, this_list){ var pet_url = server_root_url + 'controler/pet/find_pet.php'; var value = this_list.options[this_list.selectedIndex].value; var params = { control: next_list, value: value }; $.ajax({ type: "POST", url: pet_url, async:false, data: params, success: function(json){ do_fill_list(json, next_list); } }); } function do_fill_list(json, next_list){ var x = "#" + next_list; var option = $(x); /*------------------------------------------------------------------------------ EDIT: Below is the solution I found for this issue. Basically we capture the current list with the switch, empty it, append it with a blank line, then let the rest of the code populate the list. -------------------------------------------------------------------------------*/ switch(next_list){ case "pet": options.html("").append("&lt;option /&gt;"); break; case "pedigree": options.html("").append("&lt;option /&gt;"); break; case "pet_name": options.html("").append("&lt;option /&gt;"); break; } //-------------------------------------END EDIT------------------------------------ $.each(json.control, function(i,control){ switch(next_list){ case "pet": option.append($("&lt;option /&gt;").val(control.pet).text(control.pet)); break; case "pedigree": option.append($("&lt;option /&gt;").val(control.pedigree).text(control.pedigree)); break; case "pet_name": options.append($("&lt;option /&gt;").val(control.pet_name).text(control.pet_name)); break; } } ); } </code></pre> <p>Notice that I call a php function to handle the backend fetching of the data, but you can hardcode this data if you need to test it out. Also, I have a commented line in the last JS function of which I have read plenty about: the refresh method, which should be implemented to solve my issue. I have tried countless ways of doing this, clearly not enough. </p> <h2>Could anyone please point out how I can solve my problem? Perhaps my implementation is not suited for this purpose, if so it can be changed.</h2> <p>EDIT: I have added a switch statement that resolves this issue, it is within the "do fill list" JS method.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USAGE
    1. USAGE
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload