Ajax multiple input not showing all data? - php

I'm stuck in multiple input. My code is not showing all data. below is the html I am using:
<form id="matkul" class="form-horizontal" method="POST">
<table class="table table-condensed">
<thead>
<tr>
<th>Matakuliah</th>
<th>Data Lain</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</form>
<button id="post" type="submit">Save</button>
<button id="get">Get Data!</button>
below is the code to get the data
<script>
$(document).ready(function() {
$("#get").click(function() {
var url = 'https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20html%20where%20url%3D%22https%3A%2F%2Funisys.uii.ac.id%2Fuii-ras%2Fmatakuliah.asp%3Fidx%3D1%26session_id%3DxxbKiKJawuyrbaaiJ3Kabybabi3JJiKJrJyb3wiuKbbry0JbKiKbKr0yyrKK15933511%26no_mhs%3D%22&format=json';
$.getJSON(url,
function(data) {
var id = data.query.results.body.table.tr.td.table.tr[2].td.table.tr;
for (var i = 1; i <= id.length; i++) {
$("<tr> <td> <input name='fmatakuliah' value='"+id[i].td[1].a.content+"'> </td> <td> <input name='fdata' value='" + id[i].td[1].a['href'] + "'> </td> </tr>").appendTo("#matkul tbody");
};
});
});
});
</script>
from the above code output will be
Matakuliah Data Lain
StringOne OtherData
StringTwo OtherData
below is the ajax post code, but when it is already sending the data, the alert does not show all the data
<script type="text/javascript">
$(document).ready(function(){
$("#post").click(function(){
string = $("form").serialize();
alert(string); // this alert is normal, show all data
$.ajax({
type: "GET",
url: "/save.php",
data: string,
success: function(data){
alert("Success!"+data); //this not normal, not show all data
}
});
});
});
</script>
below is the code on save.php
print_r($_GET);
The latest response is showing like this
Array
(
[fmatakuliah] => Wide Area Network
[fdata] => matakuliahdetail.asp?session_id=xxbKiKJawuyrbaaiJ3Kabybabi3JJiKJrJyb3wiuKbbry0JbKiKbKr0yyrKK15933511&mk=52323605&kur=2010
)
My question is how to show all data and save it to the database?

It looks like you need to change the AJAX type from GET to POST:
$.ajax({
type: "POST",
url: "/save.php",
data: string,
success: function(data){
alert("Success!"+data); //this not normal, not show all data
}
});

Related

How to run a first instance of ajax jquery when page loads

I have a jquery and ajax that performs a query and shows a table when a button is clicked. The problem is that when the page loads for first time, the query not run and do not shows anything, so the button has to be clicked to start showing the query result.
Is there a way that the query runs when page loads? and then just use the button.
My code is:
$(document).ready(function() {
$("#display").click(function() {
$.ajax({ //create an ajax request to display.php
type: "GET",
url: "genquery.php",
dataType: "html", //expect html to be returned
success: function(response) {
$("#responsecontainer").html(response);
//alert(response);
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" align="center">
<tr>
<td> <input type="button" id="display" value="Buscar" /> </td>
</tr>
</table>
<div id="responsecontainer" align="center">
</div>
Thanks in advance!
Just call click() on the element to simulate a click.
$(document).ready(function() {
$("#display").click(function() {
$.ajax({ //create an ajax request to display.php
type: "GET",
url: "genquery.php",
dataType: "html", //expect html to be returned
success: function(response) {
$("#responsecontainer").html(response);
//alert(response);
}
});
}).click();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" align="center">
<tr>
<td> <input type="button" id="display" value="Buscar" /> </td>
</tr>
</table>
<div id="responsecontainer" align="center">
</div>
You could extract the function you're calling in the click handler and call it within ready.
$(document).ready(function() {
const displayContent = () => {
$.ajax({ //create an ajax request to display.php
type: "GET",
url: "genquery.php",
dataType: "html", //expect html to be returned
success: function(response) {
$("#responsecontainer").html(response);
//alert(response);
}
});
}
displayContent();
$("#display").click(displayContent());
});

Toggle Switch in ajax

I have written below code in PHP + Ajax
<table>
<tr><td data-id="1" onclick="showData(event);">ABC</td>
<tr style='display:none' data-fold='1'><td>ABC - 01</td>
<tr><td data-id="2" onclick="showData(event);">PQR</td>
<tr style='display:none' data-fold='2'><td>PQR- 01</td>
</table>
I need to show data-fold "tr" when someone click on data-id with respective id, that is when I click on data-id 1, then data-fold 1 should be visible.
Also, the content in data-fold is coming from AJAX..
Below is my AJAX code:
function showData(event){
var rowId = $(event.currentTarget).attr('data-id');
$.ajax({
type: "POST",
url: "ajax.php", //
data: 'type=viewOrder&rowId='+rowId,
success: function(msg){
$("tr").each(function(){
childId = $(this).attr('data-fold');
if(childId == rowId) {
$(this).toggle("slow");
$(this).html(msg);
}
});
},
error: function(){
alert("failure");
}
});
}
My code is working fine, but I need to close all other tr expect the one I clicked.

jquery post form

I have this code for send simple data using jquery , but no works , all time reload de page and no load contents i send by post
My code it´s this :
<script>
$(document).ready(function() {
$("#form_order").submit( function () {
$.ajax({
type: "POST",
data : $(this).serialize(),
cache: false,
url: "indexer_adm.php?send_order2=ok",
success: function(data){
$("#load_order").html(data);
}
});
return false;
});
</script>
<form name="forma" id="form_order" method="post" action="">
<table width="100%" border="1">
<tr>
<td height="30" align="center" valign="middle">
<select name="select_order">
<option value="articles">Articles</option>
<option value="blogs">Blogs</option>
<option value="products">Products</option>
</select>
<input type="submit" name="Submit" value="Acceder">
<input type="hidden" name="send_order2" value="ok">
<input type="hidden" name="action_load" value="<?php echo $_REQUEST['action_load'];?>">
</td>
</tr>
<tr>
<td height="30" align="center" valign="middle"> </td>
</tr>
</table>
</form>
<div id="load_order"></div>
In the div called load_order , it must load the result of this send by post from the form , but the page reload and no works , i see the code many times but i don´t understand what happen
Thank´s for All
There is a syntax error in your code, you haven't closed the submit handler.
$(document).ready(function() {
$("#form_order").submit( function () {
$.ajax({
type: "POST",
data : $(this).serialize(),
cache: false,
url: "indexer_adm.php?send_order2=ok",
success: function(data){
$("#load_order").html(data);
}
});
return false;
}); // <---
});
Try returning false inside of the submit block, rather than of the ready block.
You may have a syntax error since return false should stop the form from refreshing. I would use the post function instead:
<script>
$(function() {
$("#form_order").submit( function () {
$.post('indexer_adm.php?send_order2=ok', $(this).serialize(), function(data) {
$("#load_order").html(data);
});
return false;
});
</script>
Ok !!! , Thank´s everybody
The Right code :
<script>
$(document).ready(function() {
/*
$("#load_order").show(1000);
$("#load_order").load("<?php print "".$ruta_path_adm."".$ruta_modulos."/mod_order/indexer_adm.php?send_order2=ok";?>");
*/
$("#form_order").submit( function () {
$.ajax({
type: "POST",
data : $(this).serialize(),
cache: false,
url: "<?php print "".$ruta_path_adm."".$ruta_modulos."/mod_order/indexer_adm.php?send_order2=ok";?>",
success: function(data){
$("#load_order").html(data);
}
});
return false;
});
});
</script>
Thank´s for the help i put bad the script and no see this , thank´s

display a table of employees with delete button

I would like to know why my following code piece displays nothing in the browser (http://localhost/display.php). I would like to generate a template for my table to display all employees in my database (id, firstname, lastname) and use HTTP verb DELETE via jquery ajax method to delete a user if I click the delete button on the display table.
Here is my display.php
<table id="employees" border="1">
</table>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$document.ready(function()
{
var $employees = $("#employees");
$.ajax({
url: "delete.php",
contentType: "json",
success: function(data){
$.each(data, function(index, item){
var $row = $("#templates").find(".row-template").clone();
$row.find(".firstName").html(item.FirstName);
$row.find(".lastName").html(item.LastName);
$row.find(".delete").click(function() {
$.ajax({
url: "delaction.php" + item.Id,
type: "DELETE",
success: function()
{
$row.remove();
}
});
});
$employees.append($row);
});
}
});
});
</script>
<div id="templates" style="display: none">
<table>
<tr class="row-template">
<td class="firstName" style="width: 100px;"></td>
<td class="lastName" style="width: 100px;"></td>
<td>
<input type="button" value="X" class="delete" />
</td>
</tr>
</table>
</div>
and my delete.php looks like this
<?php
define('DB_HOST','localhost');
define('DB_ROOT','root');
define('DB_PASS','');
define('DB_NAME','employees');
$conn=mysqli_connect(DB_HOST,DB_ROOT,DB_PASS) or die("Unable to connect to your selected db.Error ".mysqli_error());
if(null!=$conn)
{
mysqli_select_db($conn,DB_NAME);
$query=("SELECT * FROM empl");
$result=mysqli_query($query);
foreach($result as $res)
{
}
mysqli_close($conn);
}
?>
Thank you a lot.
What's in 'delaction.php'?
Anyway, to pass itemId to delaction.php with the item to delete, change:
url: "delaction.php" + item.Id,
to:
url: "delaction.php?itemId=" + item.Id,

Issues submitting form with jquery

I have been trying to submit a form with jquery ajax but have been having issues.
When i check through firebug i see the value posted but it shows error from the url. I have this html
<form method="post" name="tForm" id="tForm">
<table>
<tr>
<td>Age</td>
<td><input name="age" id="age" value="" /></td>
</tr>
<tr>
<td><input type="button" id="submit" value="submit"/></td>
</tr>
</table>
</form>
</body>
My js file that submits the form has this piece of code
$(document).ready(function() {
$('#tForm').submit(function(){
var age = $('#age').val();
var msg ='';
$.ajax({
url:'testp.php',
type:'post',
data: {age:age},
beforeSend:function(){
alert(age);
},
success:function(data){
msg=data;
alert(msg);
},
complete:function(){
alert(msg);
}
})
})
});
My testp.php file just has this
<?php
echo 'ok';
?>
You need to stop the event from propogating. Your form attempts to submit in the standard method and since your form doesn't have an action you receive the error.
$(document).ready(function() {
$('#tForm').submit(function(){
var age = $('#age').val();
var msg ='';
$.ajax({
url:'testp.php',
type:'post',
data: {age:age},
beforeSend:function(){
alert(age);
},
success:function(data){
msg=data;
alert(msg);
},
complete:function(){
alert(msg);
}
})
return false;
})
});
Use $('#tForm').submit(function(e){ ... and then call e.preventDefault(); to prevent the form from being submitted in a regular (non-ajax) request.
However, I'd suggest you to have a look at the jQuery form plugin which saves you some work.

Categories