Solved

Populate dropdown box using jQuery from php funcion and mySQL

Posted on 2013-06-29
12
47 Views
Last Modified: 2015-12-14
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.
0
Comment
Question by:ACEAFTY
12 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39287347
And the problem is...?
...and you've posted the same code twice
0
 
LVL 1

Author Comment

by:ACEAFTY
ID: 39287351
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

0
 
LVL 58

Expert Comment

by:Gary
ID: 39287358
And what's the problem/error?
0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 1

Author Comment

by:ACEAFTY
ID: 39287863
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.
0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39288080
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)?
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39288093
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

0
 
LVL 58

Expert Comment

by:Gary
ID: 39288107
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.
0
 
LVL 1

Author Comment

by:ACEAFTY
ID: 39288143
Will try both later today, out of town at the moment, thanks for the response.
0
 
LVL 1

Author Comment

by:ACEAFTY
ID: 39288745
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

0
 
LVL 58

Expert Comment

by:Gary
ID: 39288762
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
0
 
LVL 1

Accepted Solution

by:
ACEAFTY earned 0 total points
ID: 39297632
Sorry guys have been swamped at work

Here is the complete code for this function:
$(".edit").click(function(){
    if ($(this).hasClass("save")){
        console.log("save");
    }else{
        console.log("edit");
        $(this).closest("tr").find("td").each(function(){
            if ($(this).index()!=0  && $(this).index()!=10){
                if ($(this).hasClass("delivery")){
                    console.log("checked");
                    $(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")){
                    console.log("dropdown");
                    
                    
                    $.ajax({
                       url: 'functions.php?f=statuslist',
                       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()+"\">")
                }                                
            }
        });

        $(this).closest("tr").next("tr").find("span").each(function(){
                $(this).html("<input type=\"text\" class=\"edit" + $(this).attr('class') + "\" name=\"" + $(this).attr('class') + "\" value=\""+$(this).text()+"\">")
        });
    }

    $(this).closest("tr").next("tr").toggle();
    $(this).toggleClass("save");
});

Open in new window

0
 
LVL 1

Author Closing Comment

by:ACEAFTY
ID: 41369674
didn't find a solution for this problem
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to dynamically set the form action using jQuery.

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question