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.
Related
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());
});
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
}
});
I'm working on the index.php. In the index page, my php code is generating Columns and Row(Table) in html. I am new to Jquery.
PHP generated table example
ID | Username | Status | Action
1 Demo No Install button
2 Smith No Install button
3 Edward No Install button
4 Admin No Install button
In the Action column , I've added Install button. So , my plan is to call update.php using Jquery AJAX POST when Install button is clicked.
Update Page Having POST variable :
1) id
2) action
3) flag
Now, what I've done so far.
Following code is generated by my PHP code (RAW code, for understanding)
<input type='hidden' name='id' id='1' value='1'>
<a href class='blue' href='' id='1'>Install</a>
<input type='hidden' name='id' id='2' value='2'>
<a href class='blue' href='' id='2'>Install</a>
<input type='hidden' name='id' id='3' value='3'>
<a href class='blue' href='' id='3'>Install</a>
<input type='hidden' name='id' id='4' value='4'>
<a href class='blue' href='' id='4'>Install</a>
Issue is how I can generate Jquery AJAX POST url, which will send data like
update.php?id=1&action=install&flag=1
Please suggest me.
Say this is your button
<input type="button" id="my_button" value="1">
$(document).ready(function () {
$("#my_button").on('click',function () {//Your install button click
var btInd = $(this).attr('value');
$.ajax({
type: "POST",
url: "update.php",
data: {"id":btInd,"action":"install","flag":1}, //You need to make changes if your values will change since i have hard coded the values
success: function(response) {
alert('Success');
}
});
});
Catch the request in update.php and do the rest.
Try like this
Script
$(document).ready(function () {
$("button").click(function () { // install button
var id = $(this).attr("id");
var action = "install";
var flag = "1";
$.ajax({
type: "POST",
url: "update.php",
data: {"id":id,"action":action,"flag":flag},
success: function(response) {
// do something
}
});
});
});
Sample PHP
<?php
include('config.php');
if($_POST["action"]=="install"))
{
$id = $_POST['id']; //Here posted id
$flag = $_POST['flag'];
}
?>
try this,
$.ajax({
type: 'POST',
url: 'update.php',
data: {
id:1,
action:xx,
flag:ff
},
success: function(response){
console.log(response);
}
});
for more information see this link
$.post( "update.php", { id: "John", action: "delete",flag :"abc" })
.done(function( data ) {
alert( "Data Loaded: " + data );
});
you can use jquery GET method to post data using get ..
$.get("update.php?id=1&action=install&flag=1",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
or you can send data by
$.get("update.php",{id=1,action=install,flag=1},function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
$("#buttonID").live('click',function(){
$.ajax({
url: "../update.php",
type: 'POST',
data: { id: myId, action: myAction ,flag: myflag},
dataType: 'xml',
success: function (data) {
alert("Great success");
}
});
});
I am working on a login form that gets loaded inside a div (parent of .messageboxcontent) with .load on a button press. It all works till the 3rd time I press submit where the div disappears again (I guess by reload of the page and the div CSS is hidden). The URL has the $_POST data added after the 3rd submit (?username=<whatever_I_Fill_In_As_3rd>).
<div class="messageboxcontent">
<form id="ajaxform">
<table>
<tr>
<td>Gebruikersnaam: </td><td><input type="text" name="username" /></td><td>
</tr>
</table>
<input type="submit" value="Registreer" id="submit" />
</form>
</div>
<script>
$('form').on('submit', function( event )
{
var dataString = $(this).serialize();
event.stopPropagation();
//event.preventDefault();
$.ajax(
{
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$('.messageboxcontent').html(response);//FIXED by changing .messageboxcontent to parent.
}
});
return false;
});
</script>
I tried different kind of approaches like:
$('form').submit(function(event) {
//..
}
//
$('#ajaxform').submit(function(event) {
//..
}
//
$(document).ready(function()
{
$("#ajaxform").on("submit", function( event )
{
var dataString = $(this).serialize();
//event.stopPropagation();
event.preventDefault();
$.ajax(
{
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$("div.messageboxcontent").html(response);
}
});
return false; //with and without this.
});
});
Be consistent with quotes. Also close your div (<div class="messageboxcontent"></div>)
Try this:
$(document).ready(function(){
$("#ajaxform").on("submit", function( event ){
var dataString = $(this).serialize();
event.preventDefault();
$.ajax({
type: "POST",
url: "register.php",
data: dataString,
success: function(response)
{
$("div.messageboxcontent").html(response);
}
});
return false;
});
});
Hope that helps.
return false; or event.preventDefault(); inside your ajax function would stop the page from reloading.
Secondly, jQuery works with selector methods via class or id - so, in your case, you will want to use $('#ajaxform').
Lastly, the possible reason why you are facing with unexpected result like after 3rd time is because your form is wrapped inside a div that you want to manipulate the result. So, try rewrapping your DIV element to this: <div class="messageboxcontent"></div> and have your <form> stand on its own separately from messageboxcontent div.
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