Link to home
Start Free TrialLog in
Avatar of ACEAFTY
ACEAFTYFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Populate dropdown box using jQuery from php funcion and mySQL

Hi
I'm looking to populate a dropdown box using jQuery with data from mySQL, this is obtain using a php function.

Please see the code below:

$(this).closest("tr").find("td").each(function(){
    if ($(this).index()!=0  && $(this).index()!=10){
        if ($(this).hasClass("delivery")){
            $(this).parent('tr').find('td.delivery input').prop('disabled',false);
            $(this).parent('tr').find('td.delivery input').addClass("edit" + $(this).attr('class'));
        }else if($(this).hasClass("dropdown")){
            
            $.ajax({
               url: 'functions.php&f=dropdownFill',
               type: "GET",
               success: function (data) {
                 $(this).html("data");
               }
            });                            
            
        }else{
            console.log("unchecked");
            $(this).html("<input type=\"text\" class=\"edit" + $(this).attr('class') + "\" name=\"" + $(this).attr('class') + "\" value=\""+$(this).text()+"\">")
        }                                
    }
});

Open in new window


function.php file
$(this).closest("tr").find("td").each(function(){
    if ($(this).index()!=0  && $(this).index()!=10){
        if ($(this).hasClass("delivery")){
            $(this).parent('tr').find('td.delivery input').prop('disabled',false);
            $(this).parent('tr').find('td.delivery input').addClass("edit" + $(this).attr('class'));
        }else if($(this).hasClass("dropdown")){
            
            $.ajax({
               url: 'functions.php&f=dropdownFill',
               type: "GET",
               success: function (data) {
                 $(this).html("data");
               }
            });                            
            
        }else{
            console.log("unchecked");
            $(this).html("<input type=\"text\" class=\"edit" + $(this).attr('class') + "\" name=\"" + $(this).attr('class') + "\" value=\""+$(this).text()+"\">")
        }                                
    }
});

Open in new window


Thanks in advance for any help.
Avatar of Gary
Gary
Flag of Ireland image

And the problem is...?
...and you've posted the same code twice
Avatar of ACEAFTY

ASKER

sorry about that didn't notice in a rush

functions.php file
require_once('config.php');

$validFunctions = array("dropdownFill");

$functName = $_REQUEST['f'];
if(in_array($functName,$validFunctions))
{
    $$functName();
}

function dropdownFill(){
    $query = "SELECT StatusType FROM `statuslist` ORDER BY id ASC";
    $result = $mysqli->query($query) or die($mysqli->error.__LINE__);

    echo "<select>";

    while($row = $result->fetch_assoc()) {
        echo "<option>" . $row['StatusType'] . "</option>";        
    } //end while

    echo "</select>";
}  

Open in new window

And what's the problem/error?
Avatar of ACEAFTY

ASKER

how to call the php function dropdownFill in jQuery to populate the select elements.
The code i'm currently using isn't doing the job.
Does the functions.php script work independent of the jQuery (ie: When you test it from the browser address bar, you get the correct HTML rendering)?
As you have used get method and passed parameter  url: 'functions.php&f=dropdownFill', then you can check is the f is set or not to call the function in the functions.php page like:

if(isset($_GET['f'])){
//You can check value of f here and other any things
$query = "SELECT StatusType FROM `statuslist` ORDER BY id ASC";
    $result = $mysqli->query($query) or die($mysqli->error.__LINE__);

    echo "<select>";

    while($row = $result->fetch_assoc()) {
        echo "<option>" . $row['StatusType'] . "</option>";        
    } //end while

    echo "</select>";
}

Open in new window

Start with changing
url: 'functions.php&f=dropdownFill',

to
url: 'functions.php?f=dropdownFill',

The ? indicates the beginning of the querystring
Apart from that I cannot see anything wrong, do the test as Ray has said above.
Avatar of ACEAFTY

ASKER

Will try both later today, out of town at the moment, thanks for the response.
Avatar of ACEAFTY

ASKER

the functions.php file did have an issue and i have fixed that and when i execute the code in firebug console I can see the it returns that html data but its not outputting the data
into to that page

jQuery code that is calling the php function
$.ajax({
    url: 'functions.php?f=statuslist',
    type: "GET",
    success: function (data) {
        $(this).html(data);
    }
});

Open in new window



functions.php
$validFunctions = array("statuslist");

$functName = $_REQUEST['f'];

dropdownQuery($functName);

function dropdownQuery($tableField){
    require('config.php');
    
    $query = "SELECT * FROM `$tableField` ORDER BY id ASC";
    
    $result = $mysqli->query($query) or die($mysqli->error.__LINE__);

    if ($tableField == "statuslist"){
        $colName = "StatusType";
    }

    dropdownFill($result,$colName);    
}

function dropdownFill($dbData,$fieldName){
    echo "<select>";

    while($row = $dbData->fetch_assoc()) {
        echo "<option>" . $row["$fieldName"] . "</option>";        
    } //end while

    echo "</select>";
}  

Open in new window

What is $(this) in your target for the returned html?
It's not obvious from your code, but since this is the element that is (clicked?) to run the routine I would assume it's not where you want to put the dropdown
ASKER CERTIFIED SOLUTION
Avatar of ACEAFTY
ACEAFTY
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of ACEAFTY

ASKER

didn't find a solution for this problem