We Keep Coding

ajax innerHTML result doesn`t return html code from PHP

ajax:
$.ajax({
type: "POST",
url: "calculator/panouri-simple/calcul-panouri-simple.php",
data: $("#formular_comanda").serialize(),
success: function(result)
{
document.getElementById("show_panels").innerHTML = result;
},
error: function(result)
{
console.log("Eroare:");
console.log(result);
}
});
HTML:
<div id="show_panels"></div>
when I look into "View page source" on browser, there is no html code between <div id="show_panels"> and </div>.
result from ajax is returning some inputs and I call those inputs with another ajax, but in html page source, those inputs are not there.
They are visually in browser, but the html code is not present in source code. I hope you understand what do I mean here. Look at the photos.
I am calling those inputs names in a php file and I get undefined variabile .... This is my problem. Visually, the inputs are there but no html code.
Debugger:

Can I ask why you're using the traditional JavaScript document.getElementById when you've loaded jQuery and are using the syntax for it? You use a jQuery selector $("#formular_comanda").serialize() when you send the data to .ajax. Why not do something like...
success: function(result) {
$("#show_panels").html(result);
},
Is your PHP file calculator/panouri-simple/calcul-panouri-simple.php expecting any GET parameters? Or anything in the POST that isn't being sent? Does the error appear in the console (you wrote with console.log), since the thing didn't go through?
Is your jQuery snippet, where you call the .ajax statement, inside of an event handler like
$(document).ready(function() {
// ...
});
or is it just in the source as it is?

Ajax Post request example

I was wondering if anyone could help me with a simple ajax request example just so I can wrap my head around the whole idea. I tried testing an ajax request to search the word "rails" on github. So my code looks something like this:
$.ajax({
url: 'www.github.com',
type: 'post',
contentType: 'application/x-www-form-urlencoded',
data: {
q: 'rails'
},
success: function(data) {
console.log(data);
}
});
This request is responding with a 404 response. So, I'm just curious how are you supposed to know what the key names for the "data" element should be? When I inspected the search bar on github, it told me the name of the element was q. Hence why I used the key "q" and I wanted to search for say "rails". If anyone could help me with this example or perhaps provide a better one that would be greatly appreciated. Thanks!

Try to add http in your url, but, for security reason you can't do Ajax Crossdomain request without autorisation of the github.com domain in your case.
http://api.jquery.com/jquery.ajax/

Ajax loading image error

my question is very simple. I have drafted the code as follow for showing the loading image when the form is being posted. The loading image can be shown properly. However, it cannot hide automatically after the result is returned. May i know what is the error?
HTML
<div id="loading"></div>
Ajax
function email_subscribe(){
$('#loading').html('<img src="loading.gif"> loading...');
$.ajax({
type: 'post',
url: 'index.php?subscribe',
dataType: 'html',
data:$("#subscribe").serialize(),
success: function (html) {
$('#loading').html();
eval(html);
}});
}

You're just calling the .html() method without any parameters (which serves as a getter). To achieve what you're looking for here, you need to at least pass in like an empty string to set and overwrite existing content.
$('#loading').html('');

I also think you should not use eval....
...and yes call .html() with an argument like:
$('#loading').html(" ");
or
$('#loading').html(" ");

How to refresh PHP file with AJAX

Okay, so I searched the web as much as I could and I couldn't find the solution on my problem. I also typed the question and searched for an answer as I saw similar questions to mine. Didn't help. I tried numerous solutions.
Well I have an index page that loads includes/data.php which loads the data from database and echo the .js format that is then loaded by function and display data on the page, so I have at the end of my index.php something like this:
<script type="text/javascript" src="includes/data.php"></script>
On the same index page I have a form that inserts data to database. If you refresh the page I will see refreshed includes/data.php along with new data I just inputted.
I am trying to implement AJAX so that when I click on the button I insert the data to database (already achieved this) and to refresh content of includes/data.php and index.php so it shows data right away without refreshing the index.php. This is my AJAX code:
$('#addtocal').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
data : $(this).serialize(),
success : function( data ) {
// This is the part where I am stuck.
},
error : function(){
$(".error").fadeIn(2000);
$(".error").fadeOut(2000);
}
});
return false;
});
Just to mention that #calendar is where main jquery function is loading the html content based on the info from /includes/data.php. Thank you in advance for any help you can provide and let me know if you need any other information from me in order to better assist me.
P.S. I saw many suggested using .load() to load content from includes/data.php but that is not working in my case as the content from includes/data.php needs to serve other jquery function that creates html on the fly and and place it in #calendar

I got it to work. What I did I inser aditional $.ajax inside the $.ajax and on completion and I called again again the jquery that uses /includes/data.php
so the code would be something like this:
$('#addtocal').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
data : $(this).serialize(),
success : function( data ) {
$.ajax({
url: "../includes/data.php",
dataType: "script",
cache: true
}).done(function() {
// Here I called other jquery function that uses ../includes/data.php
});
},
error : function(){
$(".error").fadeIn(2000);
$(".error").fadeOut(2000);
}
});
return false;
});
Thanks for your help anyway #Half Crazed gave me a clue so I get the $.getScript function and saw the way to call .js again so I tried and it worked.

table positioning with AJAX to PHP post

I have a jQuery script that sends POST data via AJAX to a php file that then creates a table. I have used firebug to check the console and everything gets created properly. On the success: I reload the window and the table isn't displayed.
I know the table html was created properly from the php file because I commented out the reload so I could see exactly what it created) I have lots of things displayed on my page and would like the table in a particular spot. How can I get the table to actually display where I want it to?
<script>
$(document).ready(function () {
$("#stayinfobutton").click(function () {
var id = $('#id').val();
var dataString = {
id: id
};
console.log(dataString);
$.ajax({
type: "POST",
url: "classes/table_auto_guests.php",
data: dataString,
cache: false,
/*success: function(html)
{
window.location.reload(true);
}*/
});
});
});
</script>

The window.location call will reload a new page in the browser window, this will loose the data returned to the ajax call by the server.
Usually the response to Ajax calls is loaded directly into your page, something like:
success: function(html)
{
$('#guestsTable').html(html);
$('userForm').hide();
}
I made up the guestsTable div and userForm names, ;).
The return data may need some coercing to make it into html (I'm assuming your using JQuery), hopefully the php script will set it to html/text in the header, also dataType: html can be passed in the $.ajax({...}) call.
Alternatively, if the classes/table_auto_guests.php returns a full page which you want to load in the browser, Ajax may not be what you are looking for. This post contains code on how to submit the data as a form, and load the result as a new page.