Solved

Populate dropdown box using jQuery from php funcion and mySQL

Posted on 2013-06-29
12
41 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
 
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 108

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Sql query on a varchar that is numeric. 8 28
Javascript and Jquery not firing 9 43
test if query has no results 2 19
php convert date format 3 0
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

863 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

Need Help in Real-Time?

Connect with top rated Experts

28 Experts available now in Live!

Get 1:1 Help Now