Solved

Populate dropdown box using jQuery from php funcion and mySQL

Posted on 2013-06-29
12
56 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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
How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

 
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 110

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

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to escape unsafe HTML tags 4 36
Pull Variable from URL  Use php template 1 32
Make login page safer 3 31
modify change color of text 9 33
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 discusses four methods for overlaying images in a container on a web page
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

740 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