Codeigniter run jquery function again after ajax call - javascript

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

Related

Show Data From JSON to HTML Table

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?

Refresh table which contain a php code

I have a PHP code, which is in a table tag.It shows a text from database. I want to refresh this table, to load updated text from database in every - let's say - 1 minute without refreshing the whole page. I've found several solutions to reload table without refreshing a page and it seems it can be done with AJAX or JS, but they only refresh it with a specific content or a specific file, however, I can't figure out how to refreshed.
<table class="table table-striped">
<thead>
<tr>
<th>Department</th>
<th class="col_small col_center">Employees</th>
<th class="col_small col_center">% Percentage</th>
</tr>
</thead>
<tbody>
<?php $employeeslist=$emp_departmentObj->selectorgall();
foreach($employeeslist as $list)
{
$total=$emp_regObj->selectorgall();
$totalemp=count($total);
$deptemp=$emp_regObj->selectemployee($list->id);
$totaldeptemp=count($deptemp);
$percentage=($totaldeptemp/$totalemp)*100;
?>
<tr>
<td><?php echo $list->department ?></td>
<td class="col_center">
<?php echo $totaldeptemp; ?>
</td>
<td class="col_center">
<?php echo number_format($percentage,1).'%'; ?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
You can define a function in document ready like this
$(document).ready(function() {
setInterval(function() { rebindTable() }, 3000);
function rebindTable() {
$.ajax({
url: "http://localhost:80/data.php",
success: function(result) {
var data = result;
$('#td-1-data').html(data.param1);
$('#td-2-data').html(data.param2);
}
});
}
})
this way you can use an setInterval method and re-bind the data in the table using ajax , in this i assume your http://localhost:80/data.php is returning some data which your are binding to the td of the table you have defined

Change td value on dynamic div content

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");
}
});

Use link found in the a tag to make an AJAX request on click

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){

Send html table data & form data without leaving page

I have to code to do both of these functions, however, when I try to integrate them its either one or the other. (either the email is sent with the name / email & lands on server.php, or the email is sent with the data & none of the inputs are sent). I want to be able to send both the html table data as well as the users name & email inputs. The code below will simply echo the html data or the users inputs.
This code sends data to the server:
Jquery / Html
<script language="javascript" type="text/javascript" src="jQuery.js">
</script>
<script language="javascript" type="text/javascript">
$(function(){
var dataArr = [];
$("table").each(function(){
dataArr.push($(this).html());
});
$('#sendServer').click(function(){
$.ajax({
type : "POST",
url : 'server.php',
data : "content="+dataArr,
success: function(data) {
alert(data);// alert the data from the server
},
error : function() {
}
});
});
});
</script>
<table id="table" border=1>
<thead> <tr>
<th>First</th>
<th>Last</th>
<th>Date of birth</th>
<th>City</th>
</tr></thead>
<tbody>
<tr>
<td>TEXT1</td>
<td>TEXT2</td>
<td>TEXT3</td>
<td>TEXT4</td>
</tr>
<tr>
<td>TEXT5</td>
<td>TEXT6</td>
<td>TEXT7</td>
<td>TEXT8</td>
</tr>
<tr>
<td>TEXT9</td>
<td>TEXT10</td>
<td>TEXT11</td>
<td>TEXT12</td>
</tr>
</tbody>
</table>
<input id="sendServer" name="sendServer" type="button" value="Send to Server" />
Server.php
<?php
echo $_REQUEST['content'];
?>
This form send data using ajax
<div style="padding:3px 2px;border-bottom:1px solid #ccc">Ajax Form</div>
<form id="ff" action="test.php" method="post">
<table>
<tr>
<td>Name:</td>
<td><input name="name" type="text"></input></td>
</tr>
<tr>
<td>Email:</td>
<td><input name="email" type="text"></input></td>
</tr>
<tr>
<td>Phone:</td>
<td><input name="phone" type="text"></input></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Submit"></input></td>
</tr>
</table>
</form>
The jquery script
$('#ff').form({
success:function(data){
$.messager.alert('Info', data, 'info');
}
});
And the php
$name = $_POST['name'];
$email = $_POST['email'];
$phone = $_POST['phone'];
echo "Your Name: $name <br/> Your Email: $email <br/> Your Phone: $phone";
I'm sure that I'm just missing something small. When I implement these into my code, an email is sent. The email contains either the name & email, or the html table data. The difference in code is putting a button action="submit" on my code. Whenever the email sent displays the name & email, the page also redirects to the blank php page. Hopefully I'm being clear enough.
Cheers.
Just add a e.preventDefault(); to your submission javascript inside #sendServer's click handler. This will prevent the form from submitting traditionally like it's doing now.
You'll also need to add the parameter e to that function:
$('#sendServer').click(function(e){
// ajax call
e.preventDefault();
}
Or return false; in the same place as was commented below.

Categories

Resources