html - Radio buttons not changing how javascript selects elements my table? -
problem
how use radio buttons control selection behavior jquery ui?
right now, can select green boxes (success) intended check out. please note when select orange.
my problem if choose check in, cannot select of blue boxes. also, need way "refresh" when change radio buttons green boxes not still selected when want change radio buttons.
code (view)
i using jquery selectable job done. can read more api documentation found here. tried jquery "filter" based on whether or not radio box checked. clearly, approach failing.
edit think approach failing because loading javascript once? when change radio buttons, filter definition not changing.
<html> <head> <meta name="viewport" content="width=device-width" /> <title>details</title> <link rel="stylesheet" href="~/css/table.css" /> <script> $(document).ready(function(){ //have conditional based on radio input var getrad1 = document.getelementbyid('optionsradios1'); if (getrad1.checked) { console.log("check has passed check in"); $("#selectable").selectable({ filter: ".success" }); //getter var filter = $(".selector").selectable("option", "filter"); } //option 2 var getrad2 = document.getelementbyid('optionsradios2'); if (getrad2.checked) { //$("#selectable").selectable("refresh"); console.log("check has passed check in"); $("#selectable").selectable({ filter: ".info" }); //getter var filter = $(".selector").selectable("option", "filter"); } //i not sure doing var select_range = false; //queue of objects deselect var deselect_queue = []; //http://stackoverflow.com/questions/3691773/jquery-ui-event-and-ui-object-properties $("#selectable").selectable({ selecting: function(event, ui) { var selecting = $(ui.selecting); if (selecting.hasclass('ui-selected')) { deselect_queue.push(selecting); } }, //this keeps previous selected items selected? unselecting: function (event, ui) { $(ui.unselecting).addclass('ui-selected'); }, //triggered @ end of select operation stop: function () { if (!select_range) { (var = 0; < deselect_queue.length; i++) { deselect_queue[i] .removeclass('ui-selecting') .removeclass('ui-selected') } } select_range = false; deselect_queue = []; //something else went here didn't understand } }); }); </script> </head> <body> @{ int columnn = model.columnnumber;} @{ int rown = model.rownumber;} @{ int index = 1;} <table class="table table-striped table-hover"> <thead> <tr> <th>#</th> @for (int j = 1; j <= columnn; j++) { <th>@j.tostring()</th> } </tr> </thead> <tbody id="selectable"> @for (int = 1; <= rown; i++) { <tr> <th>@i.tostring()</th> @for (int k = 1; k <= columnn; k++) { if (k % 2 == 0) { <td class="book success" data-id=@index> @index.tostring() </td> } else { <td class="book info" data-id=@index> @index.tostring() </td> } index++; } </tr> } </tbody> </table> <form class="form-horizontal"> <fieldset> <legend>legend</legend> <div class="form-group"> <label class="col-lg-2 control-label">radios</label> <div class="col-lg-10"> <div class="radio"> <label> <input name="optionsradios" id="optionsradios1" type="radio" checked="" value="option1"> check out (depopulate) </label> </div> <div class="radio"> <label> <input name="optionsradios" id="optionsradios2" type="radio" value="option2"> check in (populate) </label> </div> </div> </div> </fieldset> </form> </body> </html> attempts
- i trying use conditionals inside main javascript function. works initial time , sets , fails.
- i have 2 separate views, defeats purpose of having dynamic page content.
i think close trying read dom elements , change javascript behavior, can't quite work right (i might way off too). appreciate assistance rendered.
i writing solution in hopes else might find post useful.
solution
the radio buttons need listener. necessary add onclick="" them. however, need 2 functions have behavior seek. otherwise, javascript load , become useless us, radio buttons.
- select elements green
- select elements blue
thus, following functions need added javascript:
function populate() { //$("#selectable").selectable("refresh"); console.log("check has passed check in"); $(".selector").selectable("refresh"); $("#selectable").selectable({ filter: ".info" }); var filter = $(".selector").selectable("option", "filter", ".info"); }; function depopulate() { console.log("check has passed check in"); $(".selector").selectable("refresh"); $("#selectable").selectable({ filter: ".success" }); var filter = $(".selector").selectable("option", "filter", ".success"); }; the radio button needs modified follows:
<input name="optionsradios" id="optionsradios1" type="radio" checked="" value="option1" onclick="depopulate()"> <input name="optionsradios" id="optionsradios2" type="radio" value="option2" onclick="populate()"> after this, clicking on radio buttons give behavior desired.
Comments
Post a Comment