I'm having this annoying problem of my list not being populated properly (intermittently).
Web structure:-
Left side of page has nav-bar. Links for different pages.
Page structure:-
- jqgrid
- select row, and click on button, a dialog is opened. That dialog has 2 buttons, and a drop down list.
My HTML looks like:-
Code: Select all
<form method="POST">
<div id="group_analysis_form" title="Analysis">
<br><br>
<label>
Select pipline: <select class="scroll_options" id="select_pipeline" style="width:120px" size="1"></select>
</label>
</div>
</form>
My grid (attached screen shot) looks like:
Code: Select all
$(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[i].pipeline_name);
console.log(select_option);
select_option=select_option+'<option data-pipe-id="'+pipeline_names[i].id+'"'+'>'+ pipeline_names[i].pipeline_name+'</option>';
/*
* 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.");
}
}
});
//
[text]
[{"pipeline_name":"fasta","id":16},{"pipeline_name":"RDP","id":17},{"pipeline_name":"chimera","id":18},{"pipeline_name":"mixture","id":19}]
[/text]
json_encoded on PHP side
The problem is:
- when I navigate to this page first (without going to any other page), select row -> click on button, the dialog box has the list populated.
I get the list printed in console.log (attached screen shot)
It's completely fine!
- But, if I navigate to a different page, get back to the page, select row, click on button, the dialog box doesn't have the list populated. I get a blank drop down (attached screen shot).
I get the list printed in console.log!
Close the dialog box, repeat, the list will be populated in drop down, and console.log as well (which has been printing constantly)
Please see attached screen shots for the issue I'm facing.
This has been bothering me, and I do not know how to fix it.
Any help shall do great to me.