Jump to content
SkyRanger

Issue with PHP

Recommended Posts

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>";
		}
		}
?>

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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>';

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

That works.

Pulled:

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

  but now just need to get rid of the empty columns

Share this post


Link to post
Share on other sites

Sounds like something the query could fix.

Share this post


Link to post
Share on other sites

And that is did.  Thanks requinix

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

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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']

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
Posted (edited)

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 by SkyRanger
script mod.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
  1. Ids must be unique
  2. 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>

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
Posted (edited)

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 by Barand

Share this post


Link to post
Share on other sites

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>

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.