Two json in one page

CXXXV · August 18, 2017

I have a page where I use a json call to PHP that returns an array that is used to make a tree navigator. I also have a script that uses PHP to return an array of data based on the index value chosen from the tree.

The function uses ajax.post to fetch the detail data array. The problem is that somehow the first json call results interfere with the second. I tested just the function part and everything works great. The issue is that in the second array some of the values are missing. The keys all remain intact.

So the questions are:

- What could be happening between the first and then subsequent json calls.

- Is there a way to clear the first json call. I don't mean delete elements. My theory here is to destroy the first json after it's been used

I come from a long time of Windows development where one can blow away items in memory. However, it appears that in this environment it's not possible. At least I haven't found a way yet.

I am looking to learn as much here as possible. Thanks.

Jacques1 · August 19, 2017

I'm afraid none of us has the advanced mind reading skills required to answer the question in its current form.

HTTP requests don't magically influence each other. If the first request causes problems with the second, that's because there's something wrong with your code (or you've found a bug in the browser or PHP, but this is a lot less likely). If you want help with the debugging, we need to actually see that code and get a detailed description of what happens when. The developer tools of your browser and a few var_dump() calls will give you that information.

CXXXV · August 19, 2017

The question is still: How to clear memory. I have done 100's of var_dumps as well as console.logs That is how I determined the problem in the first place.

JS CODE

function GetMemData(MEMBER_ID){

jQuery.ajax({

type: 'POST',

url: 'member_data.php',

datatype: 'json',

data: {MID:MEMBER_ID},

async: false,

success: function(data){

k = data;

}

)};

PHP CODE

<?php

include ( 'connect_mow.php)';

$ID = $_POST['MID'];

$db = new mysqli($hostname,$username, $password, $database);

$query = $db-> query("call WEBFSS.GETMEMDATA('$ID')");

$memData = $query->fetch_array(MYSQLI_ASSSOC);

$query->close();

$db->close();

echo json_encode($memData);

?>

Edited August 19, 2017 by CXXXV

Jacques1 · August 19, 2017

Is it really so hard to understand that I need facts, not speculations about how “clearing memory” will solve everything? What am I supposed to do with half of the code and the statement that you've done “hundreds of var_dumps”? As long as you don't post them, that tells me exactly nothing.

As long as you don't provide any meaningful information, all I can tell you is that you neither understand JavaScript nor PHP very well. The whole point of Ajax is that it's asynchronous (that's what the “A” stands for), but you halt the entire page to make a synchronous request and write the data to some variable in the outer scope (which may very well mess up existing data). JavaScript doesn't work like this. It uses nested callbacks or Deferreds to execute code after an event has happened. The PHP code is also wide open to SQL injection attacks.

CXXXV · August 19, 2017

Interesting. I have relied heavily on examples and tutorials show it as I have it. So what you are saying is most people are doing it wrong. I am still learning. I am very familiar with Windows coding. I am not used to display type languages. I would really like to know how to do it correctly.

Here is the entire code. Perhaps you could help in this. As a newbie to HTM/JS/PHP I am wide open.

Thanks

housemem.htm

Edited August 19, 2017 by CXXXV

requinix · August 19, 2017

Please don't use attachments to show some code. Having to download files is annoying, and risky enough that some people here won't do it at all.

<!DOCTYPE html>
<html lang="en">
<head>

    <link rel="stylesheet" href="styles/jqx.base.css" type="text/css" />
	<link rel="stylesheet" href="styles/jqx.energyblue.css" type="text/css" />
	<link rel="stylesheet" href="styles/w3.css"  />
    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/jqxcore.js"></script>
    <script type="text/javascript" src="js/jqxdata.js"></script>
    <script type="text/javascript" src="js/jqxbuttons.js"></script>
    <script type="text/javascript" src="js/jqxscrollbar.js"></script>
    <script type="text/javascript" src="js/jqxdatatable.js"></script>
    <script type="text/javascript" src="js/jqxtreegrid.js"></script>
	<script type="text/javascript" src="js/jqxpanel.js"></script>
    <script type="text/javascript" src="js/scripts/demos.js"></script>
		
    <script type="text/javascript">
	
        function GetMemData(MEMBER_ID){	

					jQuery.ajax({
					  type: 'POST',
					  url: 'member_data.php',
					  datatype: 'json',
					  data:{MID:MEMBER_ID},
					  async: false,
					  success: function(data){
						k = data;
					  }
					});								

					meminfo = JSON.parse(k);
					<!-- console.log(meminfo);	 -->
					
					$.each(meminfo, function(k, v) {
						$("#" + k).val(v);
					});

					
        }
		
    </script>	
	
    <script type="text/javascript">
        $(document).ready(function () {    
			
            var source =
            {
                dataType: "json",
                dataFields: [
                        { name: 'id' },
                        { name: 'parentid' },
                        { name: 'text' },
                        { name: 'value' }
                ],
                hierarchy:
                {
                    keyDataField: { name: 'id' },
                    parentDataField: { name: 'parentid' }
                },
                id: 'id',
					url: 'housemem_data.php',
					async: false		
            };
			
            var dataAdapter = new $.jqx.dataAdapter(source);
			
            $("#treeGrid").jqxTreeGrid(
            {
                width: 250,
				height: 750,
                source: dataAdapter,
                sortable: true,
				editable: true,
				altRows:true,
				<!-- theme:'energyblue', -->
	            editSettings: { saveOnPageChange: true, saveOnBlur: true, saveOnSelectionChange: true,
								cancelOnEsc: true, saveOnEnter: true, editSingleCell: true, editOnDoubleClick: true, editOnF2: true },
                ready: function()
                {
                    $("#treeGrid").jqxTreeGrid('expandRow', '1');				
                    $("#treeGrid").jqxTreeGrid('expandRow', '2');
                    $("#treeGrid").jqxTreeGrid('expandRow', '3');					
                },
                columns: [
                  { text: 'NAME',  dataField: 'text', width: 235 },
                ]

            });

            $("#treeGrid").on('rowDoubleClick', function (event) {
                var args = event.args;
				GetMemData(args.key);		
							
             });
		});
		
		dataAdapter = undefined;
		source = undefined
    </script>
</head>
<body class='default'>
    <div id="treeGrid" style="display:inline-block; vertical-align:top; margin-top:10px; margin-left:10px"></div>	
	<div style="display:inline-block; vertical-align:top; margin-top:10px; margin-left:10px;">
	 
		<form>
			 <fieldset style="display:inline-block; vertical-align:top; height: 260px; margin-left:30px; width:900px; background-color:#F0F0F0; ">
				  <legend><b>Member Information</b></legend>
					  <label style="display: inline-block;  width: 140px;  text-align: right;  padding: 5px;" >First Name:</label>
					  <input type="text" id="FN" />
					  
					  MI: <input type="text" id="MI"  style="width:30px;"/>
					  
					  Last Name: <input type="text" id="LN"/><br>  
					  
					  <label style="display: inline-block;  width: 140px;  text-align: right;  padding: 5px;" >DOB:</label>
					  <input type="text" id="DOB"><br>  
					  
					  <label style="display: inline-block;  width: 140px;  text-align: right;  padding: 5px;" >Address 1:</label>
					  <input type="text" id="ADD1" style="width:320px;">
					  
					  Address 2: <input type="text" id="ADD2" style="width:320px;"<br>
					  
					  <label style="display: inline-block;  width: 140px;  text-align: right;  padding: 5px;" >City:</label>
					  <input type="text" id="CTY" style="width:170px;">
					  
					  State: <input type="text" id="ST" style="width:50px;">
					  
					  ZIP CODE: <input type="text" id="ZIP" style="width:65px;">	
					  
					  COUNTY: <input type="text" id="CNTY" style="width:150px;"><br>	
					  
					  <label style="display: inline-block;  width: 140px;  text-align: right;  padding: 5px;" >Phone (Home):</label>
					  <input type="text" id="PH1" style="width:150px;">	

					  <label style="display: inline-block;  width: 140px;  text-align: right;  padding: 5px;" >Phone (Mobile):</label>					  
					  <input type="text" id="PH2" style="width:150px;">

					  EMAIL: <input type="text" id="EM" style="width:200px;"><br>
					  
					  <label style="display: inline-block;  width: 140px;  text-align: right;  padding: 5px;" >AIMS:</label>
					  <input type="text" id="AIMS" style="width:150px;">						  					  
					  
							  
					  <label style="display: inline-block;  width: 140px;  text-align: right;  padding: 5px;" >Gender:</label>
					  <select <id="GEN">
							<option value="0">Select</option>				  
							<option value="male">M</option>
							<option value="female">F</option>
					  </select>

					  <label style="display: inline-block;  width: 140px;  text-align: right;  padding: 5px;" >Race:</label>
					  <select <id="RACE">
							<option value="0">Select</option>				  
							<option value="AA">African-american</option>
							<option value="CAU">Caucasian</option>
					  </select>		
						<br>
					 
					  <label style="display: inline-block;  width: 140px;  text-align: right;  padding: 5px;" >Funding:</label>				 
					  <select <id="FUND">		  
							<option value="0">Select</option>		  
							<option value="1">ARRA</option>
							<option value="2">CARE TRANS</option>
							<option value="3">CCSP</option>
							<option value="4">FS</option>		  
							<option value="5">ITC</option>
							<option value="6">NSIP</option>		  
							<option value="7">NSIP SSBG</option>
							<option value="8">NSIP STATE</option>		  
							<option value="9">PRIVATE PAY</option>
							<option value="10">T-3</option>				
							<option value="11">UA</option>
							<option value="12">UW</option>						
					  </select>
					  
					  
					  <label style="display: inline-block;  width: 140px;  text-align: right;  padding: 5px;" >Poverty:</label>							  
					  <input type="checkbox" id="POV" style="padding-left:10px;">		

					  <label style="display: inline-block;  width: 140px;  text-align: right;  padding: 5px;" >Inactive:</label>							  
					  <input type="checkbox" id="INAC" style="padding-left:10px;">						  
					  
			  
			 </fieldset>
		</form>
	
</div>	

</body>
</html>

So what you are saying is most people are doing it wrong.

No, what he's saying is that trying to use AJAX synchronously is the wrong approach.

function GetMemData(MEMBER_ID){	

			jQuery.ajax({
				type: 'POST',
				url: 'member_data.php',
				datatype: 'json',
				data:{MID:MEMBER_ID},
				async: false,
				success: function(data){
				k = data;
				}
			});								

			meminfo = JSON.parse(k);
			<!-- console.log(meminfo);	 -->
			
			$.each(meminfo, function(k, v) {
				$("#" + k).val(v);
			});

			
}

Make it asynchronous and put the code to process the data into the success callback.

Sign In

Two json in one page

Recommended Posts

CXXXV

Link to comment

Share on other sites

Jacques1

Link to comment

Share on other sites

CXXXV

Link to comment

Share on other sites

Jacques1

Link to comment

Share on other sites

CXXXV

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information