Page 1 of 1

list not getting populated properly

Posted: Wed Jan 06, 2016 8:38 am
by publicGenome
Hi There,

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>
List echo-ed from PHP is appended to the select option.

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.");
			}
			
		}

		}); 
			//
My list items look like:
[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! :crazy:

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.

Re: list not getting populated properly

Posted: Wed Jan 06, 2016 2:04 pm
by requinix
publicGenome wrote:- 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).
"Get back" meaning you use the back button? Or you click a link?

Re: list not getting populated properly

Posted: Wed Jan 06, 2016 2:16 pm
by publicGenome
requinix wrote:
publicGenome wrote:- 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).
"Get back" meaning you use the back button? Or you click a link?
Hi Requinx,
Thanks for your reply.
I click links; from nav-bar. (attached screen shot)

I found the problem. The list being populated doesn't get destroyed when you/I change page. I've duplicate entries.
Please see attached screen shot.

Re: list not getting populated properly

Posted: Wed Jan 06, 2016 2:29 pm
by requinix
That suggests the previous <option>s are being kept, but that doesn't make sense if you're clicking a link. (If you were hitting Back, that could.)

What if you move the .empty() into the AJAX handler?

Code: Select all

$("#select_pipeline").empty(); //make it empty firs tthen fill
$("#select_pipeline").append(select_option);

Re: list not getting populated properly

Posted: Wed Jan 06, 2016 2:36 pm
by publicGenome
requinix wrote:That suggests the previous <option>s are being kept, but that doesn't make sense if you're clicking a link. (If you were hitting Back, that could.)

What if you move the .empty() into the AJAX handler?

Code: Select all

$("#select_pipeline").empty(); //make it empty firs tthen fill
$("#select_pipeline").append(select_option);
I've:

Code: Select all


$(document).ready(function () {
	$("#select_pipeline").empty(); //make it empty

// go on ..
after adding this as well, I do not see list being populated. :banghead: Why is it so happening?
I can see list using inspect element - chrome.

Re: list not getting populated properly

Posted: Wed Jan 06, 2016 2:40 pm
by publicGenome
Even if there are no multiple entries, list isn't populated.
Click on different link, come back to this page, repeat - list won't populate. No duplicates as well.

Blank list when navigated from different page first time. Close dialog box, list will be populated. That is not acceptable. I empty list upon close of the dialog box, upon load of page.
Please see attached 2 screen shots.


Everything is fine in inspect, and console.log

Re: list not getting populated properly

Posted: Wed Jan 06, 2016 3:36 pm
by requinix
If you see the <option>s in the HTML but not in the list itself then something is interfering with that process: the browser is supposed to show the first element in the list.
- Does that sound possible? Could the UI libraries/code you have be affecting the list?
- To see the HTML are you right-clicking the list and hitting Inspect Element?
- What happens if you click/expand the list?

Re: list not getting populated properly

Posted: Wed Jan 06, 2016 4:03 pm
by publicGenome
requinix wrote:If you see the <option>s in the HTML but not in the list itself then something is interfering with that process: the browser is supposed to show the first element in the list.
- Does that sound possible? Could the UI libraries/code you have be affecting the list?
- To see the HTML are you right-clicking the list and hitting Inspect Element?
- What happens if you click/expand the list?
Hi R,
Thank you for your constant and enthusiastic replies. :)
- Naah, I think it's my poor architecture for dialog box
- Yes, hitting right click and hitting inspect element
- Nothing happens, as list isn't populated. Don't see nothing

--
I went ahead, and used mozilla's firebug; for I was confident there's something fishy with dialog box thing. I changed page couple of time, and found (please see attached screen shot). These things keep on adding. Multiple select options. :roll: :cry:
This is the max I think I'm able to dig . :crazy:

Re: list not getting populated properly

Posted: Wed Jan 06, 2016 5:50 pm
by requinix
And to be absolutely clear: every time you return to the page, you clicked a link somewhere and did not use the back button? You are definitely not using the back button at all?
If so,

The browser will not remember what was happening on that page previously unless you have some code somewhere to do that. Either PHP code that's outputting multiple forms or Javascript that is somehow duplicating the form multiple times (and likely backed by cookies or local data). So that's what you need to look for. Doing a View Source on the page will show you PHP's output - check if there are multiple forms there. If so then it's PHP causing problems, otherwise it's Javascript.

Re: list not getting populated properly

Posted: Thu Jan 07, 2016 7:12 am
by publicGenome
requinix wrote:And to be absolutely clear: every time you return to the page, you clicked a link somewhere and did not use the back button? You are definitely not using the back button at all?
If so,

The browser will not remember what was happening on that page previously unless you have some code somewhere to do that. Either PHP code that's outputting multiple forms or Javascript that is somehow duplicating the form multiple times (and likely backed by cookies or local data). So that's what you need to look for. Doing a View Source on the page will show you PHP's output - check if there are multiple forms there. If so then it's PHP causing problems, otherwise it's Javascript.
Hi requinix,
Yes, yes, I'm not using "Back" button anytime. I'm always using links on nav-bar.
I don't understand how and why multiple forms are generated. I'll look into this more.

If this doesn't get solved, then I'd go with approach I was going:

viewtopic.php?f=13&t=142066

Re: list not getting populated properly

Posted: Thu Jan 07, 2016 12:43 pm
by publicGenome
Update:
I think I've nailed this.
The reason why I had multiple forms even after leaving/exiting the page is they were not Destroyed upon cancel, confirm, or click of cross tick of dialog.

I found solution from legacy code. Have to add:

Code: Select all

		$(this).dialog("destroy");
//this works fine with me
However, if you use:

Code: Select all

$(this).dialog("close");
Dialog is hidden form the page, and DOM elements, and other things remain on your web page.

There's an additional option

Code: Select all

$(this).dialog("destroy").remove();
This however would remove div in which dialog box was made/created/added/appended along with other DOM and dialog elements. It doesn't work for me, as of now.

Along with buttons I've to duplicate this code line in cross-tick :

Code: Select all

$(".ui-dialog-titlebar-close").click( function() {
					$("#group_analysis_form").dialog("destroy"); 
			      
			  });
I've struggled through this problem for over a month on different page, and couldn't understand the amiss. It's all settled now. :drunk: :mrgreen:

May the solution help someone else.

For more reading:

http://stackoverflow.com/questions/1805 ... logdestroy

Thanks,
--pG