embed PHP in jQuery .append()

Question

Is this possible? I know the code below looks a whole heap of mess but i want to make it more messy by embedding PHP into it. On each click i'm appending a row onto a table, but i need to include a dynamic dropdown into one of these <td>'s by pulling results from a mysql db. Where it says this: <td><p class="add_edit">Add/Edit</p><input type="text" class="project_ref_input" name="project_ref_input" /><p class="project_ref"></p></td> Instead of p tags i'm going to have a PHP built dropdown...how can i achieve this?

$('#items').append('<tr class="tableRow">
<td><a class="removeItem" href="#"><img src="/admin/images/delete.png"></img></a></td>
<td class="supp_short_code">' + supp_short_code_db + '</td>
<td class="om_part_no">' + omPartNo + '</td>
<td>' + supPartNo + '</td><td>' + cat + '</td>
<td class="description">' + desc + '</td>
<td>' + manuf + '</td>
<td>' + list + '</td>
<td>' + disc + '</td>
<td><p class="add_edit">Add/Edit</p><input type="text" class="quantity_input" name="quantity_input" /></td>
<td class="price_each_nett price">' + priceEach + '</td>
<td class="cost_of_items"></td>
<td><p class="add_edit">Add/Edit</p><input type="text" class="project_ref_input" name="project_ref_input" /><p class="project_ref"></p></td>
<td class="cost_total_td"></td>
</tr>');

Answer 1

Because Jquery is client side - you cant append PHP like you suggest.

You would have to write a PHP script that is triggered by a callback from Jquery, the PHP script would recieve some parameters, and return the HTML that would be needed to achieve your solution.

Does this help?

Answer 2

step 1: add row

// Your code
//just call another function to get db driven combo.
get_education_combo();

step 2: write following javascript function for retriving the result from php code and sending to html element.

function get_education_combo()
{
    var url ="print_education_list";
    //alert(url);
    var contents = AjaxRequest(url);
    //alert(contents);
    //return contents;
    //send the result to html

    document.getElementById("elementID").innerHTML=contents;
}

function AjaxRequest(url)
{
    //alert(url);
    if(xmlhttp != null){
        if(xmlhttp.abort)
            xmlhttp.abort();
        xmlhttp = null;
    };
    if(window.XMLHttpRequest) // good browsers
        xmlhttp=new XMLHttpRequest();
    else if(window.ActiveXObject) // IE
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

    if(xmlhttp == null)
        return null;

    xmlhttp.open("GET",url,false);

    xmlhttp.send(null);
    // alert(xmlhttp.status);

    if(xmlhttp.status >= 200 && xmlhttp.status < 300)// 2xx is good enough
        return xmlhttp.responseText;
    else
        return null;
}

step 3: php code

print_education_list()
{
    $education="your query";
    echo '<select name="edu_name" id="edu_name" style="width:70px;">';
    foreach($education as $edu)
    {
        echo '<option>';
        echo $edu->sEducationName;
        echo '</option>';
    }
    echo '</select>';
}

That's It. BEST OF LUCK. I have prepared this combination during development of DeskTop application by php.