I have created dynamic table inside div.
<div id="data"></div>
Script to load data
<script>
$.ajax({
url:"<?php echo base_url().'input_real/getDetReal';?>",
cache:false,
type:"POST",
data:{id:id},
success:function(msg){
$("#data").html(msg);
}
});
Content HTML:
<table id="datatable2" class="table table-bordered" style="width: 100%">
<thead >
<tr>
<th>#</th>
<th>Code</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td id="dt1"></td>
</tr>
<tr>
<td></td>
<td></td>
<td id="dt2"></td>
</tr>
</tbody>
</table>
How to change value of td with id=dt1
I try
$("#dt1").html("New data"); //not work
$("#dt1").text("New data"); //not work
$("#data #dt1").html("New data"); // not work
Since you said that:- I have created dynamic table inside div
So you need to do like below:-
$('#data').find('#dt1').html("New data");
i.e. - reference dynamically created element with it's imidiate static parent (find by traversing up-side).
Note:- Multiple same id for different elements are incorrect, when you are trying to use those id in jQuery. Use class instead of id for this purpose.
You have to put your $("#dt1").html("New data"); code into success function like that :
$.ajax({
url:"<?php echo base_url().'input_real/getDetReal';?>",
cache:false,
type:"POST",
data:{id:id},
success:function(msg){
$("#data").html(msg);
$("#dt1").html("New data");
}
});
Related
I want to Show data from API JSON to html table
this is the link
https://openexchangerates.org/api/latest.json?app_id=c8e005009e5946f58356aa9a5fa7f5dd
<html>
<body>
<table>
<thead>
<tr>
<th>Currency</th>
<th>Value</th>
<th>selling rate</th>
<th>buying rate</th>
</tr>
</thead>
<tbody>
<tr>
<td>data from api</td>
<td>data from api</td>
</tr>
</tbody>
</body>
</html>
All I want to know is how to get data from API
Thanks
Make an ajax call to the above the API using
$.ajax({
type: "Get",
url: 'https://openexchangerates.org/api/latest.jso',
data: {app_id:c8e005009e5946f58356aa9a5fa7f5dd}
success:function(data){
//do something like this
var tbody_str="";
$(data.rates).each(function(key,value){
tbody_str = tbody_str + "<tr><td> data.key</td><td>data.value</td></tr>
});
});
If you are using simple jquery. So I prefer constructing your tablerows as string and append it to table body.
Without Jquery:
https://blog.garstasio.com/you-dont-need-jquery/ajax/
With Jquery:
How to parse JSON data with jQuery / JavaScript?
I have a table with dynamic values example below. I want to use the url in my dynamic url in my a tag with AJAX request base on what ID the user clicks on. When user clicks on ID 1 in the table below I want to pass the url in that a tag to my script in the AJAX url section. I would be thankful for any help
<table >
<thead>
<th data-field="status">ID</th>
<th data-field="actions">action</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a id="test" href="test.php?id=1" >1</a></td>
</tr>
<tr>
<td>2</td>
<td><a id="test" href="test.php?id=2" >2</a></td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$("#test").click(function(){
$.ajax({url: "", success: function(result){
$("#div1").html(result);
}});
});
});
</script>
NOTE: You shouldn't use the same id for multiple elements on the same page. I changed your ID to use class instead
I also added a preventDefault() to prevent the link from doing its normal job (unless you want to in which case remove that line)
$(document).ready(function(){
$(".test").click(function(e){
theURL = $(this).attr('href');
console.log(theURL); // can be removed just included for testing
e.preventDefault();
$.ajax({url: theURL, success: function(result){
$("#div1").html(result);
}});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
<thead>
<th data-field="status">ID</th>
<th data-field="actions">action</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a class="test" href="test.php?id=1" >1</a></td>
</tr>
<tr>
<td>2</td>
<td><a class="test" href="test.php?id=2" >2</a></td>
</tr>
</tbody>
</table>
change ID to class - IDs need to be unique <a class="test" href="test.php?id=1">...
prevent the link from being followed
use load - it is simpler
Like this
$(function(){
$(".test").click(function(e){
e.preventDefault();
$("#div1").load(this.href); // or if you insist: $.ajax({url: this.href,...
});
});
PS: If the links are inserted by script, you need to delegate - here I assume the table had an ID and exists at page load
$("#tableId").on("click",".test",function(e){
How to apply jquery after Ajax Calling in codeigniter
my code of ajax calling
function load_data_ajax(type){
$.ajax({
'url' : '/index.php?compose/get_list',
'type' : 'POST', //the way you want to send data to your URL
'data' : {'type' : type.value},
'success' : function(data){ //probably this request will return anything, it'll be put in var "data"
var container = $('#container'); //jquery selector (get element by id)
if(data){
$('#container').html(data);
}
}
});
}
My Html
<table align="center">
<tr>
<td>
<font class="formpromp">Select Category: </font>
<SELECT name="crs" onchange='load_data_ajax(this)'>
<?php
foreach($query as $rowcrs):
echo "<OPTION value='".$rowcrs['CD']."'>".$rowcrs['TITLE1']."</OPTION>\n";
endforeach;
?>
</SELECT>
</td>
</tr>
</table>
<div id="container">
<table id='table1' border='1' cellspacing='0' cellpadding='0'><thead><tr>
<th align='left'><input type='checkbox' value='' />Code</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>huzefa</td>
</tr>
<tr>
<td>2</td>
<td>husain</td>
</tr>
</tbody>
</table>
</div>
I am using Table filtergrid for table
<script type="text/javascript" language="javascript" id="t3">
var tf = setFilterGrid('table1', props);
</script>
ITS properly load First time, but i cant understand how to load java script after Ajax Data load.
Please any one help me.
Thanks
I have a select dropdown and I can display/remove the condition outputs from my script except for one. What I'm having trouble is removing/deleting the rows created by the $.each. I'm still new with js and I've searched for solutions online but I still couldn't get it to work. Here's my code so far.
<table id="view_programs" class="table table-striped table-bordered">
<thead>
<tr>
<th>Year</th>
<th width="12%">Action</th>
</tr>
</thead>
<tbody>
<tr id="toBeRemoved">
<td colspan="2">No program selected.</td>
</tr>
</tbody>
</table>
script
if(selectedValue == '') {
$("#delbutton").hide();
$("#toBeRemoved td").remove();
$("#toBeRemoved").append(
$("<td colspan='2'>").html("No program selected.")
).appendTo('#view_programs');
}
else {
$.ajax({
url: '<?php echo site_url("query.php");?>',
type: 'post',
data: {option: selectedValue},
dataType: 'json',
success: function(response) {
$("#delbutton").show().attr("href", "delete/program/"+encodeURIComponent(selectedValue));
if(jQuery.isEmptyObject(response)) {
$("#toBeRemoved td").remove();
$("#toBeRemoved").append(
$("<td colspan='2'>").html("No records found.")
).appendTo('#view_programs');
}
else {
var trHTML = '';
$.each(response, function(key, value) {
trHTML += "<tr><td>"+value+"</td><td>"+value+"</td></tr>";
});
$('#view_programs').append(trHTML);
}
console.log(response);
}
});
}
Update:
Achieved what I wanted thanks to Mr. Simon for shedding me some light. I doubt that my code could be better so I'm open to any suggestions.
changed this
<tbody>
<tr id="toBeRemoved">
<td colspan="2">No program selected.</td>
</tr>
</tbody>
into this
<tbody class="toBeRemoved">
<tr>
<td colspan="2">No program selected.</td>
</tr>
</tbody>
and this
$('#view_programs').append(trHTML);
into this
$('.toBeRemoved').append(trHTML);
and turned all the #toBeRemoved into .toBeRemoved
you append your table rows to the end of #view_programs, which means after the </tbody> element... so they don't have a #toBeRemoved id which you want to remove i guess?
If you want to remove multiple rows, make sure to use a class (i.e. .toBeRemoved) instead of an id. Ids are unique identifiers for one element only.
I have a php file that is reaching out and touching a mongo db and building a bunch of table tags. When I replace the script tag code below with the php code it works fine and builds out the table.
When I try to get the php results from the called page I manage to get the table text into the data variable ... if I alert it I see all the table tags and data that is generated from my .php page ... but I'm not sure how to embed that code inline in the HTML right after the th tags ... if I do a document.write(data) inside the script it seems to overwrite the whole page with just the data that was generated from the .php page ... it doesn't append it after the th row. Thank you in advance for any advice.
<table class="table table-striped table-hover">
<tr>
<th>Agency</th>
<th>POC</th>
<th>POC Phone</th>
<th>Address</th>
</tr>
<script>
var data_from_ajax;
$.get('build-agency-table.php', function(data) {
data_from_ajax = data;
alert(data);
});
</script>
</table>
And this is returned by the php script
<tr><td>BACODA</td><td>Kristi Smith</td><td>211.444.2222</td>
I think the script tag belong outside of the table.
And using the tbody thead will help you to differentiate the static (heading) and dynamic (from ajax) content.
<table>
<thead>
<tr>
<th>Agency</th>
<th>POC</th>
<th>POC Phone</th>
<th>Address</th>
</tr>
</thead>
<tbody id="to_fill">
</tbody>
</table>
<script>
var data_from_ajax;
$.get('build-agency-table.php', function(data) {
data_from_ajax = data;
$("#to_fill").html(data_from_ajax);
});
</script>
Try this
<table class="table table-striped table-hover">
<tr>
<th>Agency</th>
<th>POC</th>
<th>POC Phone</th>
<th>Address</th>
</tr>
<tbody id="tablebody"></tbody>
<script>
var data_from_ajax;
$.get('build-agency-table.php', function(data) {
data_from_ajax = data;
$('#tablebody').html(data);
alert(data);
});
</script>
</table>
You need to add the html content to a container using javascript.
<table>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
<tr id="myRow"></tr>
</table>
<script>
$.get('build-agency-table.php', function(data) {
$("#myRow").html(data); //Add the html content into "myRow"
});
</script>