list not getting populated properly

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
publicGenome
Forum Contributor
Posts: 110
Joined: Thu Apr 16, 2015 7:55 am

list not getting populated properly

Post 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.
Attachments
blank_list.png
blank_list.png (13.83 KiB) Viewed 4922 times
console_log.png
grid.png
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: list not getting populated properly

Post 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?
publicGenome
Forum Contributor
Posts: 110
Joined: Thu Apr 16, 2015 7:55 am

Re: list not getting populated properly

Post 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.
Attachments
links.png
links.png (11.32 KiB) Viewed 4897 times
problem_found.png
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: list not getting populated properly

Post 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);
publicGenome
Forum Contributor
Posts: 110
Joined: Thu Apr 16, 2015 7:55 am

Re: list not getting populated properly

Post 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.
publicGenome
Forum Contributor
Posts: 110
Joined: Thu Apr 16, 2015 7:55 am

Re: list not getting populated properly

Post 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
Attachments
no_duplicate.png
blank_list.png
blank_list.png (13.83 KiB) Viewed 4894 times
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: list not getting populated properly

Post 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?
publicGenome
Forum Contributor
Posts: 110
Joined: Thu Apr 16, 2015 7:55 am

Re: list not getting populated properly

Post 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:
Attachments
more_digg.png
User avatar
requinix
Spammer :|
Posts: 6617
Joined: Wed Oct 15, 2008 2:35 am
Location: WA, USA

Re: list not getting populated properly

Post 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.
publicGenome
Forum Contributor
Posts: 110
Joined: Thu Apr 16, 2015 7:55 am

Re: list not getting populated properly

Post 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
publicGenome
Forum Contributor
Posts: 110
Joined: Thu Apr 16, 2015 7:55 am

Re: list not getting populated properly

Post 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
Post Reply