CODEWITHSUNDEEP
javascriptjqueryhtmljson
user177215
user177215

Reputation: 249

Change table based on dropdown box selection

I need to be able to have the displayed table change based on the drop down menu item selected. I have no idea what to write in javascript. The code I have so far is:

JS:

//change table viewed

$("#view").change( function (event) {
$.getJSON('view.php?view=' + $(this).val(), function (json) { 


});
});

HTML:

                <div>
                View: <select id="view"><option value="failed">Failed</option><option value="pending">Pending</option><option value="both">Both</option></select>
                <table id="jobs-failed" border="1">
                <tr><th>ID</th><th>Media</th><th>Playlist</th><th>Input</th><th>Output</th><th>Bit Rate</th><th>Status</th><th>Encoder</th><th>Progress</th></tr>
                <tr><td>2851</td><td>1849474</td><td>367</td><td>txt</td><td>html</td><td>best</td><td>failed</td><td>encvm2</td><td>NULL</td></tr>
                </table>
                <table id="jobs-pending" border="1">
                <tr><th>ID</th><th>Media</th><th>Playlist</th><th>Input</th><th>Output</th><th>Bit Rate</th><th>Status</th><th>Encoder</th><th>Progress</th></tr>
                <tr><td>2344</td><td>1843278</td><td>455</td><td>mp3</td><td>wav</td><td>best</td><td>pending</td><td>encvm1</td><td>NULL</td></tr>
                </table>
                <table id="jobs-both" border="1">
                <tr><th>ID</th><th>Media</th><th>Playlist</th><th>Input</th><th>Output</th><th>Bit Rate</th><th>Status</th><th>Encoder</th><th>Progress</th></tr>
                <tr><td>2851</td><td>1849474</td><td>367</td><td>txt</td><td>html</td><td>best</td><td>failed</td><td>encvm2</td><td>NULL</td></tr>
                <tr><td>2344</td><td>1843278</td><td>455</td><td>mp3</td><td>wav</td><td>best</td><td>pending</td><td>encvm1</td><td>NULL</td></tr>
                </table>
                </div>

Thanks!

Upvotes: 0

Views: 4080

Answers (2)

machineghost
machineghost

Reputation: 35820

This feels like a "teach me how to program" question (as opposed to a "how do I solve this one specific programming problem" question), so I'm going to be a little terse, but ...

$("#view").change( function (event) {

You've got that part right.

$.getJSON('view.php?view=' + $(this).val(), function (json) {

As Josh pointed out, this is wrong unless you are using AJAX. Based on your comment in Josh's answer I'm going to assume that's not the case; ie. you have some content ready to be swapped in already there on the page. In this case, doing the swapping is as simple as:

function doSwap(id) {
  // This is just one way of doing the swap; see jQuery Manipulation docs for others
  var content = $("#" + id).html();
  $("table#jobs-failed").html(content);
  // repeat for your other tables
}
$("#view").change( function (event) {
  var $target = $(event.target);
  var whatTheySelected = $target.val();
  if (whatTheySelected == case1) {
    doSwap("content1");
  } else if (whatTheySelected == case2) ...

If you don't have the content (you just have JS variables with the data or something) you'll need to make the elements. Instead of doing:

  var content = $("#" + id).html();

do:

  var content = $("<tr><td>" + yourVar + "</td><td>" + yourVar2 +"</td></tr>");

Hope that helps.

Upvotes: 1

Josh Pearce
Josh Pearce

Reputation: 3455

Are you rendering the table on the client from JSON? Of not, then you need to change the event to call this: 

$('#id_of_some_table_wrapper').load('view.php?view=' + $(this).val());

Upvotes: 0

Related Questions