Issue with PHP

SkyRanger · June 12, 2019

Trying to add a select drop down that contains php

 $(wrapper).append('<div><input type="hidden" name="input_array_kuemid[]" value=""/><input type="text" name="input_array_email[]" placeholder="Email Address" /> <input type="text" name="input_array_name[]" placeholder="Email Address Owner" /><select name="input_array_queue[]" size="1"><option selected="selected" value="">Current Job</option><--php mysql output code needs to be here---></select> <a href="javascript:void(0);" class="remove_field">Remove</a></div>');
        }
    });

php code that needs to show

<?php
	$kudoqulist = $wpdb->get_results( "SELECT kuqudept from $tableofname" );
foreach ($kudoqulist as $kuque) {
			if($kuque->kuqudept !=''){
		echo  "<option value=" .$kuque->kuqudept. ">" .$kuque->kuqudept. "</option>";
		}
		}
?>

requinix · June 12, 2019

a) Use AJAX to fetch the HTML
b) Use AJAX to fetch the options as JSON and add them to the <select> with Javascript

SkyRanger · June 13, 2019

Thanks requinix. Googling now how to do this. (confusing as all heck but should be able to figure it out eventually lol)

SkyRanger · June 17, 2019

Trying to to pull data out to echo for json but getting [ ] results

function get_queue() {
 
	global $wpdb;	

	$tableofname= $wpdb->prefix.'kudos_queue';
	
    $data = $wpdb->get_results("select kuqudept from $tableofname");
    
    $job_array = array();

    foreach ($data as $kuque) {
			if($kuque->kuqudept !=''){
				$job_array[] = array (
		$job_array => $kuque->kuqudept
		);
		}
		return json_encode($job_array);
		}
		
	}
 echo '<pre>';
 print_r(get_queue());
 echo '</pre>';

requinix · June 17, 2019

Set aside that foreach... thing for the moment and just do a json_encode of $data.

SkyRanger · June 17, 2019

That works.

Pulled:

[{"kuqudept":""},{"kuqudept":""},{"kuqudept":""},{"kuqudept":"Tech Support"},{"kuqudept":"AR"},{"kuqudept":"PNI"}]

but now just need to get rid of the empty columns

requinix · June 17, 2019

Sounds like something the query could fix.

SkyRanger · June 17, 2019

And that is did. Thanks requinix

 $data = $wpdb->get_results("select kuqudept from $tableofname where trim(coalesce(kuqudept, '')) <>''");

SkyRanger · June 17, 2019

Select not populating with json

jobqueue.json file

[{"kuqudept":"Tech Support"},{"kuqudept":"AR"},{"kuqudept":"PNI"},{"kuqudept":"Shared"},{"kuqudept":"Mobile"}]

php page:

<script type="text/JavaScript">

    var $select = $('#jobqueue');</code>
 
    //request the JSON data and parse into the select element
    $.getJSON('C:\Ampps\www\wp-content\plugins\kudos\admin\js\jobqueue.json', function(data){ 
 
      //clear the current content of the select
      $select.html('');
 
      //iterate over the data and append a select option
      $.each(data.jobqueue, function(key, val){ 
        $select.append('<option id="' + val.kuqudept + '">' + val.kuqudept + '</option>');
      })
    });
  </script>

<select id="jobqueue"></select>

C:\Ampps\www\wp-content\plugins\kudos\admin\js\ <- this is going to change once I can figure out how to auto fill this depending on site owners url

maxxd · June 17, 2019

54 minutes ago, SkyRanger said:

C:\Ampps\www\wp-content\plugins\kudos\admin\js\ <- this is going to change once I can figure out how to auto fill this depending on site owners url

All WordPress AJAX requests are routed through admin_ajax.php. You need to supply an 'action' index in your passed array, then use the 'wp_ajax_{your-action}' and 'wp_ajax_nopriv_{your-action}' hooks. See here for further information.

Barand · June 17, 2019

This works (JSON data stored in hidden input field)

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $().ready( function() {
        var select = $('#jobqueue');
     
        //request the JSON data and parse into the select element
         
          var data = JSON.parse($("#jobdata").val())
          //clear the current content of the select
          select.html('');
     
          //iterate over the data and append a select option
          $.each(data, function(key, val){ 
            select.append('<option id="' + val.kuqudept + '">' + val.kuqudept + '</option>');
          })
        
    })    
</script>
</head>
<body>
    <input type="hidden"  id="jobdata" value='[{"kuqudept":"Tech Support"},{"kuqudept":"AR"},{"kuqudept":"PNI"},{"kuqudept":"Shared"},{"kuqudept":"Mobile"}]'>
    <select id="jobqueue"></select>
</body>
</html>

Barand · June 17, 2019

Just my 0.02 worth...

You seem to be over-complicating the json array that you are passing. A simpler structure would do the same job

<?php
$a = ['Tech Support', 'AR', 'PNI', 'Shared', 'Mobile'];
$j = json_encode($a);
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
    $().ready( function() {
        var select = $('#jobqueue');
     
        //request the JSON data and parse into the select element
         
          var data = JSON.parse($("#jobdata").val())
          //clear the current content of the select
          select.html('');
     
          //iterate over the data and append a select option
          $.each(data, function(key, val){ 
            select.append('<option id="' + val + '">' + val + '</option>');
          })
        
    })    
</script>
</head>
<body>
    <input type="hidden"  id="jobdata" value='<?=$j?>'>
    <select id="jobqueue"></select>
</body>
</html>

SkyRanger · June 18, 2019

Thanks maxxd. Yeah I need to sort out my script to enable it in my plugin but first I need to start to sort out the mess I got myself into beginning at the start of this thread which caused the whole issue.

Thanks Barand for the start of what I need to do. Only one question though and I know you must think I am an idiot...lol at times I think I am but how would I get:

[{"kuqudept":"Tech Support"},{"kuqudept":"AR"},{"kuqudept":"PNI"},{"kuqudept":"Shared"},{"kuqudept":"Mobile"}]

To show as this

'Tech Support', 'AR', 'PNI', 'Shared', 'Mobile']

Barand · June 18, 2019

Option 1 - change the way you create the original data

Option 2 -

$orig = '[{"kuqudept":"Tech Support"},{"kuqudept":"AR"},{"kuqudept":"PNI"},{"kuqudept":"Shared"},{"kuqudept":"Mobile"}]';
$simple = json_encode(array_map( function($v) { return $v['kuqudept'];}, json_decode($orig, 1)));

echo $simple;                //--> ["Tech Support","AR","PNI","Shared","Mobile"]

$simple will now contain the encoded siple verion

SkyRanger · June 18, 2019

Thank you Barand

SkyRanger · June 18, 2019

Having issue having it output in my script. I can have it display outside the wrapper and I can have it display without the <input type="hidden" id="jobdata" value='<?=$jobqueue?>'> but how can I get it to show in the wrapper? This is currently in the wrapper:

<select id="jobqueue" name="input_array_queue[]"></select>

$(document).ready(function() {
    var max_fields = 10; //Maximum allowed input fields 
    var wrapper    = $(".wrapper"); //Input fields wrapper
    var add_button = $(".add_fields"); //Add button class or ID
	var x = 1; //Initlal input field is set to 1
	
	var select = $('#jobqueue');
     
        //request the JSON data and parse into the select element
         
          var data = JSON.parse($("#jobdata").val())
          //clear the current content of the select
          select.html('');
     
          //iterate over the data and append a select option
          $.each(data, function(key, val){ 
            select.append('<option id="' + val + '">' + val + '</option>');
          })
	
	
	//When user click on add input button
	$(add_button).click(function(e){
        e.preventDefault();
		//Check maximum allowed input fields
        if(x < max_fields){ 
            x++; //input field increment
			 //add input field
            $(wrapper).append('<div><input type="hidden" name="input_array_kuemid[]" value=""/><input type="text" name="input_array_email[]" placeholder="Email Address" /> <input type="text" name="input_array_name[]" placeholder="Email Address Owner" /> <select id="jobqueue" name="input_array_queue[]"></select><a href="javascript:void(0);" class="remove_field">Remove</a></div>');
        }
    });
	
    //when user click on remove button
    $(wrapper).on("click",".remove_field", function(e){ 
        e.preventDefault();
		$(this).parent('div').remove(); //remove inout field
		x--; //inout field decrement
    })
});

Edited June 18, 2019 by SkyRanger
script mod.

SkyRanger · June 19, 2019

When I add the select to the append it shows the box but not the data when I add:

$(wrapper).append('<div><input type="hidden" name="input_array_kuemid[]" value=""/><input type="text" name="input_array_email[]" placeholder="Email Address" /> <input type="text" name="input_array_name[]" placeholder="Email Address Owner" /> <select id="jobqueue" name="input_array_queue[]"><option value="' + val + '">' + val + '</option></select> <a href="javascript:void(0);" class="remove_field">Remove</a></div>');

It causes my add more fields to stop working.

Barand · June 19, 2019

Ids must be unique
In the document.ready(), the options are added only to those selects that already exist

This works

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

    var max_fields = 10; //Maximum allowed input fields 
    var x = 1; //Initlal input field is set to 1

function loadOptions(x)
{
      var select = $('#jobqueue'+x);
     
      //request the JSON data and parse into the select element
     
      var data = JSON.parse($("#jobdata").val())
      //clear the current content of the select
      select.html('');
 
      //iterate over the data and append a select option
      $.each(data, function(key, val){ 
        select.append('<option id="' + val + '">' + val + '</option>');
      })
}

$(document).ready(function() {
       
    loadOptions(1);
    
    //When user click on add input button
    $("#add_fields").click(function(e){
        e.preventDefault();
        //Check maximum allowed input fields
        if(x < max_fields){ 
            x++; //input field increment
             //add input field
            $("#wrapper").append('<div><input type="hidden" name="input_array_kuemid[]" value=""/><input type="text" name="input_array_email[]" placeholder="Email Address" /> <input type="text" name="input_array_name[]" placeholder="Email Address Owner" /> <select id="jobqueue'+x+'" name="input_array_queue[]"></select><a href="javascript:void(0);" class="remove_field">Remove</a></div>');

            loadOptions(x);         // load options into new select object
        }
    });
    
    //when user click on remove button
    $("#wrapper").on("click",".remove_field", function(e){ 
        e.preventDefault();
        $(this).parent('div').remove(); //remove inout field
        x--; //inout field decrement
    })
});</script>
</head>
<body>
<button id="add_fields">Add</button> <br><br>
<input type='hidden' id='jobdata' value='["Tech Support","AR","PNI","Shared","Mobile"]'>
<div id="wrapper">
    <div>
        <input type="hidden" name="input_array_kuemid[]" value=""/>
        <input type="text" name="input_array_email[]" placeholder="Email Address" /> 
        <input type="text" name="input_array_name[]" placeholder="Email Address Owner" /> 
        <select id="jobqueue1" name="input_array_queue[]"></select>
        <a href="javascript:void(0);" class="remove_field">Remove</a>
    </div>
</div>
</body>
</html>

SkyRanger · June 19, 2019

Thank you Barand. I think I might have copied something wrong but will figure it out (delete row is not working and the select will not populate. Thanks for pointing me in the right direction.

Barand · June 19, 2019

I didn't test the delete bit, just he append.

EDIT: Just copy/pasted my code from my above post and append (includung adding options) and the delete all work OK.

Edited June 19, 2019 by Barand

Barand · June 19, 2019

Correction to above. Did some further testing and repetetive adding/removing causes errors. Fixed by having "x" and "y".

X is used for the id sufficies and is never decremented (thus maintaining uniqueness like mysql auto_increments).

Y is used as the field counter and is incremented and decremented.

Revised code

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">

    var max_fields = 10; //Maximum allowed input fields 
    var x = 1; //Initlal input field id suffix is set to 1 
    var y = 1; //Initlal input field is set to 1

function loadOptions(x)
{
      var select = $('#jobqueue'+x);
     
      //request the JSON data and parse into the select element
     
      var data = JSON.parse($("#jobdata").val())
      //clear the current content of the select
      select.html('');
 
      //iterate over the data and append a select option
      $.each(data, function(key, val){ 
        select.append('<option id="' + val + '">' + val + '</option>');
      })
}

$(document).ready(function() {
       
    loadOptions(1);
    
    //When user click on add input button
    $("#add_fields").click(function(e){
        e.preventDefault();
        //Check maximum allowed input fields
        if(y < max_fields){ 
            x++; //input field id increment
            y++; //input field increment
             //add input field
            $("#wrapper").append('<div><input type="hidden" name="input_array_kuemid[]" value=""/><input type="text" name="input_array_email[]" placeholder="Email Address" /> <input type="text" name="input_array_name[]" placeholder="Email Address Owner" /> <select id="jobqueue'+x+'" name="input_array_queue[]"></select><a href="javascript:void(0);" class="remove_field">Remove</a></div>');

            loadOptions(x);         // load options into new select object
        }
    });
    
    //when user click on remove button
    $("#wrapper").on("click",".remove_field", function(e){ 
        e.preventDefault();
        $(this).parent('div').remove(); //remove inout field
        y--; //input field decrement
    })
});

</script>
</head>
<body>
<button id="add_fields">Add</button> <br><br>
<input type='hidden' id='jobdata' value='["Tech Support","AR","PNI","Shared","Mobile"]'>
<div id="wrapper">
    <div>
        <input type="hidden" name="input_array_kuemid[]" value=""/>
        <input type="text" name="input_array_email[]" placeholder="Email Address" /> 
        <input type="text" name="input_array_name[]" placeholder="Email Address Owner" /> 
        <select id="jobqueue1" name="input_array_queue[]"></select>
        <a href="javascript:void(0);" class="remove_field">Remove</a>
    </div>
</div>
</body>
</html>

SkyRanger · June 20, 2019

I don't know what to say and I wish I could send something your way for a thank you for your assistance This part of my project has been a thorn in my side for weeks. If i get the $$$ to be able to send you something I definitely will. If it wasn't for people like you on here and the others who offer there time and assistance with very little in return I thank you. I will be at least adding you to credits of the program so people know. I have coming to this site for help for over 14 yrs and I still remember you were the first on then to help me and I will never forgot. Again thank you.

Sign In

Issue with PHP

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information