How to check a checkbox with javascript

QuestionsHow to check a checkbox with javascript
Florent PERRET asked 7 years ago

Hi, I use Bulk edit to check multiple row. When I execute custom update data, it’s work perfectly. But when I refresh the page, how to check by default the row and checkbox previously selected ?

I found a solution : 

  1. With conditionnal data, I set a class to detect my row selected for the CSS
  2. In Jquery, I use the event “js_on_load_complete” to select the checkbox. This is my code :

$e["js_on_load_complete"] = "checkLigneSelected";
$grid->set_events($e);
.......
// add toolbar button for bulk operation
jQuery(document).ready(function(){
jQuery('#list1').jqGrid('navButtonAdd', '#list1_pager',
{
'caption' : 'Mettre à jour le groupe <?php echo $row_groupe_choisie["grou_nom"]; ?>',
'buttonicon' : 'ui-icon-save',
'onClickButton': function()
{
fx_bulk_update("set-groupe");
},
'position': 'last'
});



});

function checkLigneSelected(){
$('.ligne_checked').each(function () {
$(this).attr("aria-selected","true");

$(this).find('input[type=checkbox]').attr("checked", true);
$(this).find('input[type=checkbox]').attr("checked", true).trigger("change");
//alert('tata');
});
};

3. I have this, it's ok

image

or link to GDrive

But when I click on the button to call "update_data", I have the message "Please select rows to edit".

Please help me.... :)

Best regards
3 Answers
Abu Ghufran Staff answered 7 years ago

To retain checkbox selection after refresh, a better solution will be to use state persistence feature.
Include these JS:

<!-- library for persistance storage -->
 <script src="//cdn.jsdelivr.net/jstorage/0.1/jstorage.min.js" type="text/javascript"></script> 
 <script src="//cdn.jsdelivr.net/json2/0.1/json2.min.js" type="text/javascript"></script>
 <script src="//cdn.rawgit.com/gridphp/jqGridState/63904a57244ef89fa58ca0fa146da8e2e6e4d395/jqGrid.state.js" type="text/javascript"></script>

and then this in body:

<script>
 // user php session id to retain grid state for current session only
 var opts = {
 "stateOptions": { 
 storageKey: "gridState-list1",
 columns: true, // remember column chooser settings
 selection: true, // row selection
 expansion: false, // subgrid expansion
 filters: false, // filters 
 pager: false, // page number
 order: false // field ordering
 }
 };
 </script>


 You can switch true/false as required.
_________________________
Abu Ghufran - Dev Team
Grid 4 PHP Framework
 
Florent PERRET answered 7 years ago

Hi thanks for your answer. But how to use this ?
Have you an example ?
Should I remove my code ?
More information : after I refresh the page, I execute a MySQL Query to find if the line is selected.
I use this code :
 
///—— 1: The Query

$select_sql = "SELECT DISTINCT *,
(SELECT liemr_id
FROM ce_lien_groupe_membre_retraite ta1
WHERE ta1.liemr_ret_id=t3.ret_id AND liemr_grou_id = '$groupe_choisie') AS est_present
FROM ce_famille t1
JOIN ce_membre_famille t2 ON t1.fami_id = t2.memb_fami_id
LEFT JOIN ce_membre_famille_retraite t3 ON t2.memb_id = t3.ret_memb_id
WHERE memb_num = 1 AND memb_est_retraite = '1' AND (memb_est_decede = 0 or memb_est_decede is null or memb_est_decede = \"\")
GROUP BY memb_id";

$grid->select_command = $select_sql;

///------ 2: The Column Grid

$col = array();
$col["title"] = "";
$col["name"] = "memb_id";
$col["hidden"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "";
$col["name"] = "est_present";
$col["hidden"] = true;
$cols[] = $col;


$col = array();
$col["title"] = "Code";
$col["name"] = "fami_code";
$col["width"] = "20";
$col["align"] = "left";
$col["editable"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "Nom";
$col["name"] = "fami_nom";
$col["width"] = "20";
$col["align"] = "left";
$col["editable"] = true;
$cols[] = $col;

$col = array();
$col["title"] = "Prénom";
$col["name"] = "memb_prenom";
$col["width"] = "20";
$col["align"] = "left";
$col["editable"] = true;
$cols[] = $col;

$grid->set_columns($cols);


///------ 3: The CSS
$f = array();
$f["column"] = "est_present";
$f["op"] = ">";
$f["value"] = "0";
//$f["css"] = "'background-color':'#3498DB', 'color':'000', 'font-weight':'bold'"; // must use (single quote ') with css attr and value
$f["class"] = "ligne_checked";
$f_conditions[] = $f;

$grid->set_conditional_css($f_conditions);

 

Florent PERRET replied 6 years ago

Up 🙂 please help me..

Abu Ghufran Staff answered 6 years ago

Please refer demos/misc/persist-settings.php to see selection persistance.
If you need some thing else, let me know.

_________________________
Abu Ghufran - Dev Team
Grid 4 PHP Framework
 
Your Answer

11 + 4 =

Login with your Social Id:

OR, enter

Attach code here and paste link in question.
Attach screenshot here and paste link in question.



How useful was this discussion?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate it.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?