Call PHP Function in jQuery (var)

Question

I'm facing a small problem that I can't solve by myself.

I have this php function:

function intervalo_manha(){
 $que="select id_intervalo,data_15
 from intervalo_manha
 order by id_intervalo";
 $re=mysql_query($que);
 $object.="<select>";
 $object.="<option></option>";
 while(list($id_intervalo, $data_15)=mysql_fetch_row($re))
 {
 $object.= "<option value=\"".$id_intervalo."\">".$data_15."</option>"; 
 }
 $object.="</select>";
return $object;
}

This function return a select with information from database.

I also have this js function:

$(document).ready(function() {
 var destTable = $("#dataTable");
 $("#btnAdd").click(function() {
 var newRow = $("<tr style='margin-left:-60px'><td><INPUT type='checkbox' name='chk'/></td><td><INPUT type='text' name='txt[]' id='txt'/></td><td></td></tr>");
 $("#dataTable").append(newRow);
 newRow.find('input').autocomplete("get_cols_name.php", {
 width: 260,
 matchContains: true,
 selectFirst: false
 });
 });
 });

This one will add a new row to my table, and for each new input will "activate" autocomplete. What I want to do is, instead of this:

var newRow = $("<tr style='margin-left:-60px'><td><INPUT type='checkbox' name='chk'/></td><td><INPUT type='text' name='txt[]' id='txt'/></td><td></td></tr>");

I would like to have something like this:

var newRow = $("<tr style='margin-left:-60px'><td><INPUT type='checkbox' name='chk'/></td><td><INPUT type='text' name='txt[]' id='txt'/></td><td><?php echo intervalo_manha(); ?></td></tr>");

Calling php function directly will return nothing, and I can't do anything. Is there any way to accomplish this?

Thank you

• Reigel Gallarde: are all codes inside one php file?
• l3gion: Yes, they are in the same page. I basically want to output my php function inside the variable declared in jQuery. I dunno if that's possible, but doing the way I said in the post, I can't do what I want.
• Felix Kling: You have to be careful with your wording. You cannot call PHP functions from JS, but I think that is not what you want to do anyway (but your title suggests it). What you do is, you create the HTML page through PHP and in this process a PHP function is called, that generates some HTML and the result of this is injected into the final HTML page.
• Felix Kling: In your function, you don't connect to a database. Do you connect to a database somewhere in your script? If not you should get a warning. Are you getting any error messages?
• l3gion: Hi again Felix, Actually what I wanted is calling a PHP function inside the js function. I've searched and it seems that is not possible, like you mentioned. What I want it, when adding a new row with my js function, it will add an input and a select that got values from database. This select is the output of php function. Yes Felix, I have a connection string. The way I posted the topic, in the 1st post, I can add a new row and user autocomplete without any problems. The problem is adding a select drop downlist (using DB values) to the html dynamically created.

Answer 1

This won't work, because you execute your code inside $(document).ready. This means php is already done and can't be executed after $(document).ready (thats because php is server-side only). Either you will have to use ajax or you will have to do the php function call before calling $(document).ready and put it into a variable:

var php_function_result = "<?php echo intervalo_manha(); ?>";
$(document).ready(function() {
...
// use php_function_result here
...
}

• l3gion: My php function is done before calling the "js" function. I'll give a try to your approach. Thank you
• l3gion: Tried your suggestion without success. After adding the var, my add new row button doesn't work anymore.
• Felix Kling: The HTML page is created by PHP so it is no problem to inject the return value from the PHP function. This has nothing to do with $(document).ready(). For PHP, this is just text.
• Felix Kling: @l3gion: This was more a comment to Thariama but you are welcome ;)
• Thariama: @I3legion: did you check if your function actually returns a non-empty string?

Answer 2

if all the codes are on the same page, try

echo "var newRow = $(\"<tr style='margin-left:-60px'><td><INPUT type='checkbox' name='chk'/></td><td><INPUT type='text' name='txt[]' id='txt'/></td><td>";
echo intervalo_manha();
echo "</td></tr>\");";

• l3gion: Thank you Reigel for your answer. I already tried that approach but it didn't worked. Now I can't even add a new row in my table.

Answer 3

You are using $().autocomplete(); to get_coll_name.php. $().autocomplete(); is most likely a jQuery UI or jQuery plugin that uses AJAX to call PHP. You will need to use AJAX to call PHP. You can not specify the method intervalo_manha(), you must specify a page. If you are using a framework, like Zend, this is easier as the framework allows you to specify methods in the call.

• l3gion: A little more help, or more details, would be appreciated. Thank you

Answer 4

Try this code: (Please add the html tag to complete the page sice I am not able to add it here)

<?php 

function intervalo_manha(){ return 'here is my data';

$que="select id_intervalo,data_15
 from intervalo_manha
 order by id_intervalo";
 $re=mysql_query($que);
 $object.="<select>";
 $object.="<option></option>";
while(list($id_intervalo, $data_15)=mysql_fetch_row($re))
{
 $object.= "<option value=\"".$id_intervalo."\">".$data_15."</option>"; 
}
 $object.="</select>";

return $object; }

if($_GET['get_data']) { echo intervalo_manha(); exit; }

?>

<head>
 <title>test</title>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 var destTable = $("#dataTable");
 $("#btnAdd").click(function() {
 var newRow = $("<tr style='margin-left:-60px'><td><INPUT type='checkbox' name='chk'/></td><td><INPUT type='text' name='txt[]' id='txt'/></td><td class='d_value'>...retrieving data...</td></tr>");
 $("#dataTable").append(newRow);
 //newRow.find('input').autocomplete("get_cols_name.php", {
 // width: 260,
 // matchContains: true,
 // selectFirst: false
 //});
 $.get('index.php?get_data=1', {}, function(data) {
 newRow.find('.d_value').html(data);
 });
 });
 });
 </script>
</head>
<body>
<input type="button" value="click me" id="btnAdd" />
<table id="dataTable">
</table>
</body>

• l3gion: Tried your code jondm. Thanks.But, can you explain to me what should be the output?
• l3gion: I get what you wanted to do. Unfortunately, I couldn't solve my problem. Any other suggestion?

Answer 5

Maybe it will be better to use ajax functions. Give to it name. Call php-script, and get data from output.

$.ajax(/*...*/);

?

• l3gion: Thank you for trying to help me. I'll try it tomorrow, too tired today. :)

Answer 6

I solved my problem with a friend's help.

Basically what we've done.

We create a div with the "php echo":

<div id="intervalo-manha"><?php echo intervalo_manha(); ?></div>

Then we've hiden it with css:

<style type="text/css">
 #intervalo-manha {
 display: none;
 }
</style>

After this we just called the div at jQuery function:

var newRow = $("<tr style='margin-left:-60px'>...<td>" + $("#intervalo-manha").html() + "</td></tr>");

I never thought that it could be so easier. :)

Thank you for everyone who gave me tips and suggestions.

regards

• l3gion: Probably we could do it in a cleaner way. It works and that's the important thing.