Can you ajax post a single input from a form with a seperate form ajax function than the forms submit? I am trying to delete a table row within a form, without submitting the entire form.
particular Row hide from table... Display wise that row is removed..
$("#row"+i).animate({"height": "toggle"}, { duration: 1000 });
Next ajax function calls for deletion..
You need to access the row in jQuery and call remove on its object.
Live Demo
$('#rowId').remove();
You can use jQuery ajax to call php function with javascript, this post shows how to do it.
Yes you can send ajax post request via jquery.
Guidance code is as below.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.delete_link').click(function(e){
e.preventDefault();
var href = $(this).attr('href');
var main_selector = $(this);
$.ajax({
url : href,
type : 'post',
dataType : 'json',
beforeSend : function()
{
//code before ajax send
},
success : function(response)
{
if(response)
{
main_selector.parent().remove();
}
}
});
});
});
</script>
<table>
<tr>
<td>Data1</td>
<td></td>
</tr>
<tr>
<td>Data2</td>
<td></td>
</tr>
<tr>
<td>Data3</td>
<td></td>
</tr>
</table>
Related
The image below depicts how the table looks like right now, with some test data. Under "IMAGE" will be (thumbnails of) images of invoices and bills. The page is going to be used for accounting.
In <td> I put:
echo '<td><div id="currency" onclick="refreshClick()">'. $currency . '</div></td>';
This is the script itself:
<script>
function refreshClick() {
$.ajax({
url: "assets/scripts/php/currency.php",
success: function(data){
$('#currency').html(data);
}
});
}
</script>
so the data is loaded from a php script. But this solution doesn't work. Any suggestions?
Try somthing like this:
Your table:
the id should be unique and it wont be on multiple rows, so use a class and target that td div with $(this) in jQuery.
<td><div class="currency">'. $currency . '</div></td>
jQuery:
<script>
$(document).ready(function(){
$(document).on('click', '.currency', function(e){
$.ajax({
url: "assets/scripts/php/currency.php",
success: function(data){
$(this).html(data);
}
});
}
}
</script>
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.
So I have a function like this, it is not done yet:
function viewTestimonials(){
$sql=mysql_query("");
$msg="
<table class=\"tftable\" border=\"1\">
<tr><th>Testimonials</th></tr>
";
while($ressult=mysql_fetch_array($sql))
{
$msg=$msg."
<tr><td> </td></tr>
<tr><td> </td></tr>
";
}
$msg=$msg."
</table>
";
return $msg;
}
Then I have a link to call the function:
View Testimonials
so basically the page will reload and I have a condition like this to call my function:
if($_GET['control']=='viewTestimonial'){
$control=viewTestimonials();
}
My question is: Is there a way to call the function just using AJAX so the page don't need to reload to show the output into the div?
yes.
javascript: AJAX, like asked.
$.ajax({
url: "some_page.php",
type : 'POST',
data : {control : 'hi'},
datatype: 'json',
success : function (resp){
var resp = $.parseJSON(resp);
// do stuff with resp
},
error: function(jqXHR, textStatus, ex) {
console.log(textStatus + "," + ex + "," + jqXHR.responseText);
}
});
php
echo json_encode($_POST);
You cant simply call the function from ajax, you can make a page which will run your function and you can call that page from ajax and display the output.
so in your page you can have ajax call something like this.
<html>
<body>
<div id="myID"></div>
</body>
</html>
<script>
$.ajax({
url: "getdata.php",
context: document.body
}).done(function(data) {
$('#myID').html( data );
});
</script>
and for the ajax call page getdata.php you can have something like.
$sql=mysql_query("");
$msg="
<table class=\"tftable\" border=\"1\">
<tr><th>Testimonials</th></tr>
";
while($ressult=mysql_fetch_array($sql))
{
$msg=$msg."
<tr><td> </td></tr>
<tr><td> </td></tr>
";
}
$msg=$msg."
</table>
";
echo $msg;
YES, there is a way using AJAX. But I recommend using JQuery POST.
Description: Load data from the server using a HTTP POST request.
So your code should look like:
<html>
<head>
<script>
function viewTestimonials(){
$.post( "controls.php", {control: viewTestimonial}, function( data ) {
$( "#div_name" ).html( data );
});
}
</script>
</head>
<a href='#' onclick='viewTestimonials()'>View Testimonials</a>
</html>
You need to install JQuery. Instruction is here from w3schools which i think is correct: http://www.w3schools.com/jquery/jquery_install.asp
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 using jquery tabs..
i'm use tabs-1 as input form and tabs-2 as show input data...
i want after submit..all value inside textfield which have been type at tabs-1 can copy into textfield at tabs-2...
where part that i must modify?at form or at process page?what's code that can make it works?
<script type="text/javascript">
$(document).ready(function() {
$("#input").click(function() {
if($("#submit").valid()) {
var params=$("#submit").serialize();
$.ajax({
type:"post",
url:"process1.php",
data:params,
cache :false,
async :false,
success : function() {
that is for submitting form inside tabs-1...at tabs-2:
<tr>
<td width="100"><input type="text" id="showline" name="showline"<? echo "$_postVar('line')" ?>/></td>
<td width="100"><input type="text" id="showmodel" name="showmodel"<? echo "$_postVar('model')" ?>/></td>
<td width="100"><input type="text" id="showNIK" name="showNIK"<? echo "$_postVar('id')" ?>/></td>
</tr>
Well, if I understand this correctly, you can use the callback on the AJAX function to do that (so that the submitted info is only displayed if the request was successful):
[...]
success : function() {
$('#showline').val($('#faline').val());
$('#showmodel').val($('#modelnm').val());
$('#showNIK').val($('#NIK').val());
};
[...]
assuming that #faline, #modelnm and #NIK are the IDs of the input fields in the form from which the data is being submitted.
Also, in the HTML you don't need to echo anything anymore (which has incorrect syntax - it would be value="<? echo ... ?>" anyways) since the values will be added by jQuery.
Hope this helps !
$("#model").change(function() {
var barcode;
barCode=$("#model").val();
var data=barCode.split(" ");
$("#model").val(data[0]);
$("#serial").val(data[1]);
var str=data[0];
var matches=str.match(/[T|EE|EJU].*D/i);
$("#input").click(function() {
if($("#submit").valid()) {
var params=$("#submit").serialize();
$.ajax({
type:"post",
url:"process1.php",
data:params,
cache :false,
async :false,
success : function() {
$('#showline').val($('#line').val());
$('#showmodel').val($('#model').val());
$('#showNIK').val($('#id').val());
$("#model").val("");
$("#serial").val("");
$("#line").val("");
i put freekOne code before set .val("");