Solved

Populate dropdown box using jQuery from php funcion and mySQL

Posted on 2013-06-29
12
32 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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

These days socially coordinated efforts have turned into a critical requirement for enterprises.
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
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…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

760 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

23 Experts available now in Live!

Get 1:1 Help Now