.Hi jqGrid experts,
Please pardon me if my query doesn’t fit forum. It’s a mix of PHP + HTML + jqGrid.
I’ve a grid. Upon select of a row, and click of a button, a dialog box is shown. Dialog box has a list, and 2 more buttons. The list is being pulled from PHP + database.
HTML looks like:
|
1 2 3 4 5 6 7 8 9 10 |
<form method="POST"> <div id="group_analysis_form" title="Analysis"> <label><label> Select pipline:<select id="select_pipeline" class="scroll_options" style="width: 120px;" size="1"></select></label></label> </div> </form> |
************
In short I append drop down list to the div above.
My jqGrid + populate looks like:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
var grid_name="#grid_illumina_manage_samples2"; var pager_name="#pager_illumina_manage_samples2"; $(grid_name).navButtonAdd(pager_name,{ caption:"Group for analysis", buttonicon: "ui-icon-cart", onClickButton: function() { var selected_rows =$(grid_name).jqGrid('getGridParam','selarrrow'); if(selected_rows.length>0){ $("#select_pipeline").empty(); //make it empty firs tthen fill $.ajax({ type:'GET', url:'illumina/illumina_xhr_get_pipeline_list', success: function(data){ //jQuery.parseJSON(data) is to json_normal thing var select_option=""; var pipeline_names=jQuery.parseJSON(data); for(var i=0;i<pipeline_names.length;i++){ console.log(pipeline_names<em class="d4pbbc-italic"></em>.pipeline_name); console.log(select_option); select_option=select_option+''+ pipeline_names<em class="d4pbbc-italic"></em>.pipeline_name+''; /* * append this to the dialog box of pipeline drop down */ } $("#select_pipeline").append(select_option); return false; }, error:function(){ alert("Jerry is caught"); return false; } }); //ajax ends var sample_names,group_name; for(var j=0;j<selected_rows.length;j++){ group_name=jQuery(grid_name).getRowData(selected_rows[j])['sample_group_name']; sample_names=jQuery(grid_name).getRowData(selected_rows[j])['sample_name']; } //for loopp ends $("#group_analysis_form").dialog({ modal: true, 'width': 300, 'height': 230, show: { effect: "highlight", duration: 1000 }, hide: { effect: "explode", duration: 1000 }, buttons: { Confirm: function(){ var selected_pipeline_name=$("#select_pipeline").children("option").filter(":selected").text(); var pipe_id= $('#select_pipeline option:selected').data('pipe-id'); $.ajax({ type:'POST', url:'illumina/xhr_submit_analysis', data:{pipeline:selected_pipeline_name,grp_name:group_name, samples:sample_names,pipeline_id:pipe_id} }); $(this).dialog("close"); }, //confirm ends Cancel: function(){ $(this).dialog("close"); }, //cancel ends }//button ends }); //dialog ends } //selected freater than 0 ends else{ alert("Please select rows for analysis."); } } }); |
Everything is fine, mostly.
However, if you navigate to this page from another, Check console.log, I get exactly I want, but the list isn’t populated.
***
I close the dialog box -> click again -> list will be shown.
Close -> select row -> click -> list populated
console.log – prints everything
change page -> get back to this page->select row->click button-> list not populated
But console.log – prints everything
***
When I print console.log, it looks like:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
fasta RDP <option data-pipe-id="16">fasta</option> chimera <option data-pipe-id="16">fasta</option><option data-pipe-id="17">RDP</option> mixture <option data-pipe-id="16">fasta</option><option data-pipe-id="17">RDP</option><option data-pipe-id="18">chimera</option> |
Which is perfect, and no big Deal.
json_encoded data from looks like:
|
1 2 3 4 5 |
[{"pipeline_name":"fasta","id":16},{"pipeline_name":"RDP","id":17},{"pipeline_name":"chimera","id":18},{"pipeline_name":"mixture","id":19}] |
I’ve had the same issue with another list + jqGrid + JS, to which I couldn’t find a absolute solution. This thing is now bothering me. 🙁
I want list populated in dialog box any day, anytime whenever I navigate, and from whichever page.
Please help.
Best,
–pG
PS: I’m fairly new to web development, JS, HTML world. Kindly pardon my naive questions.
For some reason in my code above class is being show in select and console.log which is not present in my code apparently.
They look like:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
for(var i=0;i<pipeline_names.length;i++){ console.log(pipeline_names<em class="d4pbbc-italic"></em>.pipeline_name); console.log(select_option); select_option=select_option+''+ pipeline_names<em class="d4pbbc-italic"></em>.pipeline_name+''; /* * append this to the dialog box of pipeline drop down */ } |
Update:
Looks like I cannot get rid of class em something. Its present in this as well.
Hello,
I’m really loast on what is your problem.
Please, check your code again.
The expression:
|
1 2 3 |
... select_option=select_option+''+ pipeline_names<em class="d4pbbc-italic"></em>.pipeline_name+''; .... |
is wrong. I think you mix PHP with JavaScript.
Kind Regards,
Will
Guriddo Support Team
Hi Will,
Thank you for your reply.
After posting the code
|
1 2 |
em class="d4pbbc-italic"> |
is being added automatically here on forum 🙁 It’s not in my code.
Posting it again:
|
1 2 3 |
select_option=select_option+'<option data-pipe-id="'+pipeline_names<em class="d4pbbc-italic"></em>.id+'"'+'>'+ pipeline_names<em class="d4pbbc-italic"></em>.pipeline_name+'</option>'; |
The issue is – the list doesn’t get populated all the times upon opening of dialog box; intermittently list is populated.
Don’t know why the code is not shown properly here. If you could edit my reply, then you’d be able to see what I’ve posted.
Copyright 2014 TriRand LtdAll Rights ReservedRSS
Back to Top
