I was trying to intergrate jQuery.Tabledit (https://markcell.github.io/jquery-tabledit/) to my table. While it worked for one table, the other one didn't work. After lots of trial, I found out something weird when changing url.
Basic structure of my table:
index.php
<script type="text/javascript" src="tabledit.js"></script>
<table id="testing">
<thead>
<tr id="head">
<th>id</th>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr id="1">
<th>1</th>
<td>a</td>
<td>b</td>
</tr>
<tr id="2">
<th>2</th>
<td>c</td>
<td>d</td>
</tr>
</tbody>
</table>
<?php var_dump($_SESSION); ?>
tabledit.js
$(document).ready(function(){
$('#testing').Tabledit({
columns: {
identifier: [0, 'id'],
editable: [[1, 'Column 1'], [2, 'Column 2']]
},
onSuccess: function(data, textStatus, jqXHR) {
console.log('Success');
},
onFail: function(jqXHR, textStatus, errorThrown) {
console.log('Fail');
},
onAjax: function(action, serialize) {
console.log('onAjax');
console.log(action);
console.log(serialize);
},
hideIdentifier: false,
url: '../../database/test.php',
});
});
test.php
<?php
session_start();
$_SESSION['test'] = 'heya';
?>
Now, if I put the file test.php next to tabledit.js and change url code to
url: 'test.php',
, the session variable won't change, which means test.php isn't running at all.
If I put it to one folder above tabledit.js (ex: project/table/tabledit.js and project/test.php) and change url code to
url: '../test.php',
, it won't work either.
However, if I put it 2 folders above, like this:
url: '../../test.php',
, it works.
Same thing happens with
url: '../../database/test.php',
I had pull an all-nighter for this and still couldn't figure out why. Any suggestion is appreciated.
Related
I have a table which generated by PHP and MySql. One of the column will have buttons which will have values which will be used for sending a data to another PHP file using AJAX. But I am now facing a problem that id(s) can have only unique value.
Will it be possible to use same ID for buttons with different values.
Here is a dummy data of HTML (Output given by PHP).
<table>
<tr>
<th>Serial No.</th><th>File Name</th><th>Action</th>
</tr>
<tr>
<td>1</td><td>Physics Notes</td><td><button id="request" value="1">Download</button></td>
<tr>
<tr>
<td>2</td><td>Chemistry Notes</td><td><button id="request" value="2">Download</button></td>
<tr>
<tr>
<td>3</td><td>Mathematics Notes</td><td><button id="request" value="3">Download</button></td>
<tr>
</table>
Now I want when any of the buttons in the 3rd columns are clicked, their values to be receive in the jQuery variable "file".
And then the values will be sent to a PHP file via AJAX.
Here is my jQuery and AJAX code.
<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#request").on("click",function(e){
e.preventDefault();
var file = $(this).val();
$.ajax({
url : "downloadfile.php",
type : "POST",
data : {file:file},
success : function(data){
alert("Thank you for using our service");
}
});
})
});
</script>
As said in Comment, an ID shall always be unique. So use class in your case.
<td><button class="request" value="2">Download</button></td>
and
$(".request").on("click", function(e) {
Note Please note that you haven't closed your tr they are missing /
Demo
$(document).ready(function() {
$(".request").on("click", function(e) {
e.preventDefault();
var file = $(this).val();
$.ajax({
url: "downloadfile.php",
type: "POST",
data: {
file: file
},
success: function(data) {
alert("Thank you for using our service");
}
});
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Serial No.</th>
<th>File Name</th>
<th>Action</th>
</tr>
<tr>
<td>1</td>
<td>Physics Notes</td>
<td><button class="request" value="1">Download</button></td>
</tr>
<tr>
<td>2</td>
<td>Chemistry Notes</td>
<td><button class="request" value="2">Download</button></td>
</tr>
<tr>
<td>3</td>
<td>Mathematics Notes</td>
<td><button class="request" value="3">Download</button></td>
</tr>
</table>
I'm trying to use this for my class homework, I am still learning.
This script is made to check if a site down or not.
What I'm trying to achieve is to use this same script and get statuses for every website on the table without using script all over again all 3 websites.
I added classes but I do not know how to get them to script. I commented on script so it will be easier for you to understand. Any solution for this? Any input would be appreciated.
<table>
<thead>
<tr>
<th style="width:250px">Website</th>
<th style="width:250px">Is it live</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td>
<td id="website"></td> <!-- This is already working. -->
</tr>
<tr>
<td>Twitter</td>
<td id="website" mywebsite="https://Twitter.com"></td> <!-- This is what I'm trying to achive. -->
</tr>
<tr>
<td>Facebook</td>
<td id="website" mywebsite="https://Facebook.com"> <!-- This is what I'm trying to achive. -->
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
var site = 'https://google.com';
// var site = 'https://google.com';
$.ajax
({
url: site,
dataType: "jsonp",
statusCode: {
200: function (response) {
$('#website').html('yes');
console.log(response);
},
404: function (response) {
$('#website').html('no');
console.log(response);
}
}
});
</script>
<table>
<thead>
<tr>
<th style="width:250px">Website</th>
<th style="width:250px">Is it live</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td>
<td class="website" data-mywebsite="https://google.com"></td> <!-- This is already working. -->
</tr>
<tr>
<td>Twitter</td>
<td class="website" data-mywebsite="https://twitter.com"></td> <!-- This is what I'm trying to achive. -->
</tr>
<tr>
<td>Facebook</td>
<td class="website" data-mywebsite="https://facebook.com"> </td>
</tr>
</tbody>
</table>
$(document).ready(function(){
$(".website").each(function(){
var site = $(this).attr("data-mywebsite");
var thissr = $(this);
$.ajax
({
url: site,
dataType: "jsonp",
statusCode: {
200: function (response) {
thissr.html('yes');
},
404: function (response) {
thissr.html('no');
}
}
});
});
});
Try this code. Here is a fiddle
You need to use class and loop through each of them to send AJAX request.
As you know Ajax is an asynchronous call to server,
So if you want to execute ajax call in loop and want to update something based on your ajax call, then you must need a context for which you are calling ajax,
Try something like below,
<table>
<thead>
<tr>
<th style="width:250px">Website</th>
<th style="width:250px">Is it live</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td>
<td class="website" data-mywebsite="https://google.com"></td> <!-- This is already working. -->
</tr>
<tr>
<td>JQuery</td>
<td class="website" data-mywebsite="http://jquery.com/"></td> <!-- This is what I'm trying to achive. -->
</tr>
<tr>
<td>Stackoverflow</td>
<td class="website" data-mywebsite="https://stackoverflow.com/"> <!-- This is what I'm trying to achive. -->
</tr>
</tbody>
</table>
$(document).ready(function(){
$(".website").each(function(){
var site = $(this).attr("data-mywebsite");
var thissr = $(this);
$.ajax
({
url: site,
dataType: "jsonp",
context : thissr,
statusCode: {
200: function (response) {
$(this.context).html('yes');
},
404: function (response) {
$(this.context).html('no');
}
}
});
});
});
https://jsfiddle.net/cdL997a6/1/
I'm trying to use this for my class homework, I am still learning.
This is a simple script that check if a site down or not.
What I'm trying to achieve is to use this same script and get statuses for every website on the table without using script all over again. Any solution for this? Any input would be appreciated.
<table>
<thead>
<tr>
<th style="width:250px">Website</th>
<th style="width:250px">Is it live</th>
</tr>
</thead>
<tbody>
<tr>
<td>Google</td> <!-- This is already working. -->
<td id="website"></td>
</tr>
<tr>
<td>Twitter</td>
<td id="website" mywebsite="https://Twitter.com"></td> <!-- This is what I'm trying to achive. -->
</tr>
<tr>
<td>Facebook</td>
<td></td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
var site = 'https://google.com';
// var site = 'https://google.com';
$.ajax
({
url: site,
dataType: "jsonp",
statusCode: {
200: function (response) {
$('#website').html('yes');
console.log(response);
},
404: function (response) {
$('#website').html('no');
console.log(response);
}
}
});
</script>
Instead of using id="website" because an id is an unique value, use class="website" in your html.
<td class="website"></td>
IN your jQuery the change is simple instead of using # use . is used for references to classes (ie. website), like so:
$(".website").html("yes");
Don't forget to modify all locations. This will execute for all places where class="website" is defined.
Put your url on data attribute and loop to get value from td like this.
$('table > tbody > tr').find('td').each(function() {
var site = $(this).data('url');
$.ajax({
url: site,
dataType: "jsonp",
statusCode: {
200: function(response) {
$('#website').html('yes');
console.log(response);
},
404: function(response) {
$('#website').html('no');
console.log(response);
}
}
});
});
<table>
<thead>
<tr>
<th style="width:250px">Website</th>
<th style="width:250px">Is it live</th>
</tr>
</thead>
<tbody>
<tr>
<td data-url='https://google.com'>Google</td>
<!-- This is already working. -->
</tr>
<tr>
<td data-url="https://twitter.com/">Twitter</td>
<!-- This is what I'm trying to achive. -->
</tr>
<tr>
<td data-url="https://www.facebook.com/">Facebook</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
Getting error "DataTables warning: table id=example - Requested unknown parameter '1' for row 1, column 1. For more information about this error, please see http://datatables.net/tn/4" while loading the data from ajax api call the json received from the back end is as below
[{"CustomerName":"Dinesh","product":"23234","perticulars":"wrwer","AddressOfCustomer":"wrew`","ContactNumbers":"jhkjhb"}, {"CustomerName":"dd","product":"dfsdfs","perticulars":"fsdfs","AddressOfCustomer":"sdfsdf","ContactNumbers":"fsfsf"}, {"CustomerName":"Pratik","product":"toothbrush","perticulars":"6 inch","AddressOfCustomer":"shreedhama white rose","ContactNumbers":"9949634396"}]
Snippet of HTML div tag for which table data is being populated is as below.
<table id="example" class="display" align="center" vertical-align="middle"; cellspacing="0" width="100%">
<thead>
<tr>
<th>Customer Name</th>
<th>Product</th>
<th>Perticulars</th>
<th>Address of customer.</th>
<th>Contact number</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Customer Name</th>
<th>Product</th>
<th>Perticulars</th>
<th>Address of customer.</th>
<th>Contact number</th>
</tr>
</tfoot>
</table>
Below is the ajax call I am doing and in success function trying to populate data from the json
$.ajax({
url:'AddQuotation',
type:'get',
success:function(data){
alert(data);
var resultTable = $('#example').DataTable({
"columns": [
{ data: "CustomerName" },
{ data: "product" },
{ data: "perticulars" },
{ data: "AddressOfCustomer" },
{ data: "ContactNumbers" }
],
"destroy": true,
"dom": 'lrtip'
} );
resultTable.rows.add(data1).draw();
dataSet = data;
},
error:function(){
alert('error');
}
});
You need to have data object that includes your array of objects.
{"data": [{"CustomerName":"Dinesh","product":"23234","perticulars":"wrwer","AddressOfCustomer":"wrew`","ContactNumbers":"jhkjhb"}, {"CustomerName":"dd","product":"dfsdfs","perticulars":"fsdfs","AddressOfCustomer":"sdfsdf","ContactNumbers":"fsfsf"}, {"CustomerName":"Pratik","product":"toothbrush","perticulars":"6 inch","AddressOfCustomer":"shreedhama white rose","ContactNumbers":"9949634396"}]}
A working DEMO.
In my case I just changed the following in my code and the error
DataTables warning: table id=bootstrap-data-table2 - Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables.net/tn/4
was gone:
From:
<tbody>
#foreach (var item in Model.HRMS_Tbl_ExpenseClaimModelList)
{
<tr>
#if (item.Approved == "1")
{
<td>#item.Date</td>
<td>#item.Date</td>
<td>#item.Type</td>
<td>#item.Amount</td>
}
</tr>
}
</tbody>
To:
<tbody>
#foreach (var item in Model.HRMS_Tbl_ExpenseClaimModelList)
{
if (item.Approved == "1")
{
<tr>
<td>#item.Date</td>
<td>#item.Date</td>
<td>#item.Type</td>
<td>#item.Amount</td>
</tr>
}
}
</tbody>
I have a table and one search fields, based on what is entered in the search fields the contents of the table are refreshed and if nothing is entered in the search fields the full table is loaded. Here when the user clicks on Go button the ajax call is made.
Currently, I have two jsp as below:
MAIN JSP
<script type="text/javascript">
$(document).ready(function() {
$( "#go-user" ).click(function() {
var userId = $('#usrId').val();
alert(userId);
$.ajax({
url: 'popUserSelect', // action to be perform
type: 'POST', //type of posting the data
data: { userId: userId }, // data to set to Action Class
dataType: 'html',
success: function (html) {
alert(html);
$('#load-user').html(html);
//document.getElementById("leftDiv").innerHTML=html; //set result.jsp output to leftDiv
},
error: function(xhr, ajaxOptions, thrownError){
alert('An error occurred! ' + thrownError);
}
});
return false;
});
});
</script>
<s:form theme="simple">
User Id : <s:textfield name="userId" id="usrId" theme="simple"/>
<s:submit action="popUserSelect" key="Go"></s:submit>
</s:form>
<div id="load-user">
<table width="100%">
<thead>
<tr>
<th>Select</th>
<th>ID</th>
<th>Name</th>
<th>Role</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<s:iterator value="userSupList" >
<tr>
<td><input type="radio" class="RadioButton" name="userRadio" value='<s:property value="USR_AMLUSERNAME"/>' /></td>
<td><s:property value="USR_AMLUSRID"/></td>
<td><s:property value="USR_AMLUSERNAME"/></td>
<td><s:property value="USR_ROLEID"/></td>
<td><s:property value="USR_LOCATIONID"/></td>
</tr>
</s:iterator>
</tbody>
</table>
</div>
<input type="button" value="Submit" onclick="buttonClick('SubmitUser')"/>
<input type="button" value="Cancel" onclick="buttonClick('Close')"/>
Refresh Jsp:
<table width="100%">
<thead>
<tr>
<th>Select</th>
<th>ID</th>
<th>Name</th>
<th>Role</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<s:iterator value="userSupList" >
<tr>
<td><input type="radio" class="RadioButton" name="userRadio" value='<s:property value="USR_AMLUSERNAME"/>' /></td>
<td><s:property value="USR_AMLUSRID"/></td>
<td><s:property value="USR_AMLUSERNAME"/></td>
<td><s:property value="USR_ROLEID"/></td>
<td><s:property value="USR_LOCATIONID"/></td>
</tr>
</s:iterator>
</tbody>
</table>
Is there any way that I can avoid using two jsp for refreshing and refresh the jsp on the same main jsp itself?
You have to give your table an ID:
<table width="100%" id="myTable">
...
</table>
And adapt your AJAX call:
$.ajax({
url: 'originalPage', // use original page here
type: 'POST',
data: { userId: userId },
dataType: 'html',
success: function (html) {
// get the content of #myTable from the AJAX result
var tableContent = $("#myTable", html).html();
// set the content of #myTable to the result of the AJAX call
$('#myTable').html(tableContent);
},
error: function(xhr, ajaxOptions, thrownError){
alert('An error occurred! ' + thrownError);
}
});
jQuery can take the target to use as second parameter, which is used in $("#myTable", html). This way, it does not search the current document for #myTable, but the document returned from the AJAX call.
The disadvantage of this that the whole original page needs to be loaded through AJAX, although only one minor part of it is used.