How to make array objects clickable

[maddog]

I am trying to make items from an array clickable. I am pulling data from soap and creating an array in php. I then add it into a scroll-able table pulling only one of the columns entered data. The problem I am having is making the data clickable which would allow me to send another soap request pulling different information to populate different fields. I am able to do this by creating individual buttons and attaching the array. I would prefer to have it fill my table without manually creating each button as the data will be variable. I do have an Identifier as a column that could be used as a variable to initiate the request once clicked. If someone can point me in the right direction that would be great. Main thing is the button function but if there is an easy way to do the second request that will push the ID that the button sends to a variable to use for the request that would be a bonus. Thanks in advance for any help.

To recap:
data is pulled from soap service - array is created - array is filtered for specific column data - data is populated into table - click on item within table sends a soap request based on ID from array - data is received from soap back into php - seperate fields are populated with new data.

here is how I am currently pulling data into the table once it has been requested:

    <?php
                    function pull_name ($item1){
                      return $item1['Name1'];
                    }
                    $name1 = array_map('pull_name', $array);
                    echo('<tr>');
                    echo('<td>');
                    echo(implode('</td><tr><td>', $name1));
                    echo('</td</tr>');
                    echo('<tr>');
                  ?>

I was able to do a table with buttons like this:

<tr>
   <td><input type="button" value="<?php echo $array['0']['Name1'];?>"></td>
</tr>
<tr>
   <td><input type="button" value="<?php echo $array['1']['Name1'];?>"></td>
</tr>

[whispers]

So what is the question? (sorry I’m not clear)

• You call/get/create your array just fine
• Filter or whatever… (means nothing here)

Q1: How are you populating your table?

Quote: “I was able to do a table with buttons like this:”
Manually? In a loop while populating the table?

Q2: Are you trying to load/display these ‘new field contents’ on click immediately? (like using AJAX? or does this submit the page?)

I’m not clear how, where or why that function pull_name() gets used?

[maddog]

I apologize I do not know the correct terminology. So yes I call/get/and create the array just fine. There is a button on the main page that when clicked calls a separate php to perform the soap connect and response which then builds the array. Because the array includes several groups of data for example: name, id, email etc. I take the created array and grab just the name field using the stated function and then add to the table using the implode. Hopefully that explains what I have. My question is how to make the name john doe clickable in the table?

Q1: How are you populating your table?

I used the array map on my variable $array which is returned from my soap request to grab only the names out of the array then I populate the table with implode.

Quote: “I was able to do a table with buttons like this:”
Manually? In a loop while populating the table?

Manually meaning creating a button for each name. Since the data is not static this can not be the way to do this.

Q2: Are you trying to load/display these ‘new field contents’ on click immediately? (like using AJAX? or does this submit the page?)

I can use Ajax if that is the right way. I have not gotten to this part yet so open to suggestions. I use some jquery in other parts of my code.

I’m not clear how, where or why that function pull_name() gets used?

I wish I could give you a better answer. My assumption is that the function creates the variable $item1 as a template. When I call the function using
$name1 = array_map('pull_name', $array); it is able to pull only the names from the array and then becomes $name1 as an array of names only.

[maddog]

I was able to get it done like this. Not sure if its the correct way. I do not have the request function done yet but just wanted to show progress and maybe show what I am trying to do.

<?php
                function pull_name ($item1){
                  return $item1['Name1'];
                }
                $name1 = array_map('pull_name', $array);
                  foreach($name1 as $naMe1){?>
                    <tr><td><input type="button" value="<?php echo $naMe1 ?>"></td></tr>
                  <?php } ?>

[whispers]

Thank you for the update… that helps make more sense of what you are trying to do.

If that works… that should be fine.

Without seeing the original array, which you could probably access directly and not use a ‘function’ as the middle-man… then if it works… it works.

Now perhaps add a listener using jQuery to the ‘buttons’ so they trigger and AJAX call upon being clicked.

Suggestion: use a class or something on them so they are easier to select in the DOM…etc…

//declare array
$someArray = [['Name1' => 'Tom', 'Name2' => 'Jerry'],['Name1' => 'Fred', 'Name2' => 'Barney']];

//build table rows from array:
echo '<table id="someTable">';		
for($i=0; $i<count($someArray); $i++){			
	//declare Name1
	$Name1 = $someArray[$i]['Name1'];				
	//output Name1					
	echo "<tr><td><input type='button' class='someClass' value='$Name1'></td></tr>";
}		
echo '</table>';

Add a listener to them using jQuery… which (I think it what you want to?) can be used in the AJAX call

//jQuery (event actions)
document.addEventListener("DOMContentLoaded", function(event) {					
		
	//table row button listener
	$( "#someTable .someClass" ).click(function() {				
		//check button value (to be used in the ALAX call.....(I think?)
		alert($(this).val());					
	});	
});

Once you get this working, you only need the AJAX call (which is sending one of these names… to an external .php script… to return some sort of value…correct?.. not quite clear what you want done once you click on of these buttons now?)

[maddog]

Thanks. This is what I was thinking was the way. The only reason I am using the function that way is so the original array stays intact allowing me to call it in to different operations breaking it down as needed. I would imagine it would have more flexibility this way?

[whispers]

Since you havent shared the real array and how its put together… nobody can answer SPECIFICALLY to access your array/data.

That being said… this would have no bearing on the array itself… you are just accessing the data. The array itself it still as it was when imported/created…etc…

You have an array.
You can access any of its data (if a legit array)
You dont need a function

As far as what happens when you actually ‘click’ something… not sure.

not sure if you are just taking the ‘name’ on the button… and adding it somewhere?

or if if you need to use that name in a query to gather more info that is displayed somewhere?

[maddog]

I understand, maybe you need more info. I did get it to look the way I wanted but not actually work the correct way. Populating my table this way does create buttons with the Name only however I cant seem to do anything with them. Do I need to pass through something else first?
My plan was to have a separate soap script setup that would be used to create a request for User specific info. That response would then be used to populate other fields.
For example I click Matt Test in the table ID 88 is sent to the separate soap request. The response would then populate fields on the page First Name, Last Name, Site, ID, Employee Function etc. with the correct data as read only.

This is the raw return from soap. It is much larger than this and includes multiple Users with their data but hopefully this gives you an idea of the format:

connectValidatebeenValidatedobject(SimpleXMLElement)#4 (175) { "LastName"]=> string(4) "test" ["FirstName"]=> string(4) "matt" ["Name"]=> string(9) "matt test" ["Name2"]=> object(SimpleXMLElement)#23 (0) { } ["LicenseNumber"]=> object(SimpleXMLElement)#30 (0) { } ["Union"]=> object(SimpleXMLElement)#31 (0) { } ["Site"]=> object(SimpleXMLElement)#32 (0) { } ["DateOfBadgeProduction"]=> string(19) "1900-01-01T00:00:00" ["ExpirationDateOfBadge"]=> string(19) "1900-01-01T00:00:00" ["CustomField1"]=> object(SimpleXMLElement)#33 (0) }

This is what is created as the $array variable:

Array ( Array ( ) [LastName] => test [FirstName] => matt [Name] => matt test [Name2] => [ID] => 88 Array ( ) [EmployeeFunction] => Array ( ) [LicenseNumber] => Array ( ) [Union] => Array ( ) [Site] => Array ( ) [DateOfBadgeProduction] => 1900-01-01T00:00:00 [ExpirationDateOfBadge] => 1900-01-01T00:00:00 [CustomField1] ) Ending

[whispers]

So this is the array that PHP is using to ‘create’ (populate) the table of buttons… correct?

And now you want to be able to add the ‘click’ stuff… correct?

Did you try the jQuery posted above? is that working yet?

[phdr]

I removed the ‘solved’ selection from this thread since it is still in progress.

Does the original soap response contain all the data you need for each single name or do you get more specific data when you make a request using a specific id? If you already have all the data in the original soap request, you might as well save/cache this persistently on the server and just get and display the correct user’s data out of it when you click on a link.

In any case, you have two pieces of data for each name, the id and the display name. For what you are describing, all you need is a link, which can use a button as the displayed portion, which when clicked will submit the corresponding id to a php script that will request and display the data or get the corresponding data out of the saved initial soap response for that id. If you want to use ajax to do this, that is a simple change.

The array_map filtering is not really needed, since you can just loop over all the elements in the original array of data and access the two values you need in each element to produce the output that you want. For the array_map filtering, since you need both the id and the name, you would return an array consisting of those two values, rather than a single value containing the name.

[maddog]

I did change my table using the above like this.

'echo '<table id="dtTable">';
                        for($i=0; $i<count($array); $i++){
                          $name1 = $array[$i]['Name1'];
                          $gxID = $array[$i]['ID'];
                          echo "<tr><td><input type='button' class='DTbuttons' method='post' name='$gxID' value='$name1'></td></tr>";
                        }
                        echo '</table>';'

I am not sure how to get the clicks to work right. I tried adding a listener but not great with ajax and am probably doing it wrong.

    document.addEventListener("DOMContentLoaded", Function(event){
            $("#dtTable.DTbuttons").click(function() {
                alert($gxID.val());
            });
          });

here is my .ajax

’ $.ajax({
type: “POST”,
url: ‘soap2.php’,
data: ‘$gxID’,
success: function(data){
alert(data);
}
});’

[maddog]

My second soap Listens like this…

`if (isset($_POST['gxID'])) {`

[whispers]

Does the jQuery work…?

As in… are yo getting an ALERT when you click on the buttons?

[maddog]

no it does not seem to work.

[whispers]

please use the code supplied and update the ID and CLASS appropriately…

[maddog]

I have tried this many ways. still get no alerts.

    <table>
                      <?php
                        echo '<table id="dtTable">';
                        for($i=0; $i<count($array); $i++){
                          $name1 = $array[$i]['Name1'];
                          echo "<tr><td><input type='button' class='DTbuttons' value='$name1'></td></tr>";
                        }
                        echo '</table>';
                        ?>
                        <script src='jquery-3.5.1.js'>
                        document.addEventListener("DOMContentLoaded", function(event) {
                          $( "#dtTable .DTbuttons" ).click(function() {
                              alert($(this).val());
                          });
                        });
                        </script>
                </table>

[whispers]

??

That is NOT how you load jQuery.

Load the library in the header… add the script after…

Im not sure if it matters… but I also wouldnt add it after the table…

Please google on how to load jQuery

//import script

<head>		
	<title>PHP HELP EXAMPLES</title>
	<meta charset="UTF-8">		
	<!-- jQuery 3.3.1 -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
</head>

then … your script tags: defining your listener code

<script type="text/javaScript"> 
	document.addEventListener("DOMContentLoaded", function(event) {	
		//submit button listener
		$( "#someTable .someClass" ).click(function() {				
			//check button value (to be used in the ALAX call.....(I think?)
			alert($(this).val());					
		});
	});						
</script>

Then you output the table somewhere int he body:

//build table rows from array:
echo '<table id="someTable">';		
for($i=0; $i<count($someArray); $i++){			
	//declare Name1
	$Name1 = $someArray[$i]['Name'];				
	//output Name1					
	echo "<tr><td><input type='button' class='someClass' value='$Name1'></td></tr>";
}		
echo '</table>';

[maddog]

Yes I knew to add it to the header. That was just the last place I tried it and since it had it all that is what I sent. My problem was missing the source close I guess since it closed after the listener it did not flag an error. Stupid mistake. Thanks.

[maddog]

Thank you for your help.

[whispers]

So…?

The alert is now being triggered? - good.

Have you added in the AJAX call/function… is that working now?