I have a page which has a dropdown box. On selection a value is sent to a php script (Ajax), based on the value a html table is created and sent back to the responseText. The table is output to the HTML page. I want the table to have sortable columns, so I have used jQuery datatables for this, but it is not working.
I have cut and pasted the exact table into the html and ran the page, and then sorting works.
Please can anyone help / advise to fix this?
Note the table output from the php is outputted inbetween:
<a div id="txtHint"> <table id="example"> <div>
Here is the rest of the code on the HTML page:
<script type="text/javascript" src="/js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('table#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );
</script>
<script type="text/javascript">
function selMetal(str,str2){
if (str==""){
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","sql.php?m="+str+"&s="+str2,true);
xmlhttp.send();
}
</script>
Where is #example defined? Are you recreating the html for the entire table in ajax?
If so, you are probably overwriting the #example dom element that jquery dataTable already manipulated. Try re-instantiating the data table after you set the table html, such as:
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
$('table#example').dataTable().fnDestroy(); // might need to destroy the old one first - not sure
$('table#example').dataTable( { "sPaginationType": "full_numbers" } );
}
}
Related
I just built a web site by using this script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
function loadpage(page)
{
document.getElementById("pageContent").innerHTML="Yükleniyor...";
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("pageContent").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET",page,true);
xmlhttp.send();
}
</script>
It can load any page thanks to AJAX. But yet there is a question: when I load any page containing any HTML form, when i click "submit", it leaves the main page, I mean I can't send form variables by AJAX. the only thing I need is to pass form variables by using "href" and the loadpage() function I mentioned above.
How can I do get form input's values and send to another PHP file?
you can use jQuery.
$(document).ready(function(){
$("#div_load").load("page.html");
});
whit this code you can open any page (Ex: page.html) in any div(Ex:div whit id=div_load).
and for sending data use it:
$(".class_div").click(function(){
$.post("ajax.php",
{
name:"naser",
age:"23"
},
function(data,status){
// do something when done
});
});
As you are using jQuery, you can do:
$('form').submit(funciton() {
var data = $(this).serialize();
// Call Ajax
return false;
});
I advice you to read about:
http://api.jquery.com/category/ajax/ and http://api.jquery.com/serialize/.
My problems is how can I make my java script run on the elements that returned by AJAX. The javascript does not work on the that returned by AJAX. In my script it suppose to pop out a dialog box with "Hello" but its not. How can I make it works or there are another ways for this? Thanks for the advice.
The below is my code...
index.html
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#box_1").on("click", function() {
alert("Hello!");
});
changeDisplay();
});
function changeDisplay() {
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("text").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","ajaxHandling.php",true);
xmlhttp.send();
};
</script>
</head>
<body>
<h1>Ajax Test</h1>
<div id="text">
</div>
</body>
</html>
ajaxHandling.php
<?php
echo '<div id="box_1" class="box">Click me</div>';
?>
A common problem, you need to use the correct on() syntax for future elements by binding it to a parent of the future element that exists at the time the script runs.
$(document).on("click", "#box_1", function() {
alert("Hello!");
});
I've used document, but using the closest existing parent is better. Example:
$("#wrapper").on("click", "#box_1", function() {
alert("Hello!");
});
My short answer is that you need to bind the click event slightly differently, using jQuery.on:
$('#text').on('click', '#box_1', function() {
alert('Hello!');
});
This binds the click event dynamically to any item within the #text element (or that is added later to the #text element) that matches your #box_1 selector.
My long answer is that if you are using jQuery, you should also take advantage of its AJAX library rather than roll your own.
$.ajax({
url: '/ajaxHandling.php',
}).done(function ( data ) {
$('#text').html(data);
});
I've build a small login system for a home project,so,when the user do the login,he is redirect to the userspage.php.In the page i get some data from my mysql table,but the problem is,one of the values i fetch is display to the user with a button near it,when the user press those button i need to perform an php action to increase the value which is display with the button(as an example==> myvalue = 10 | When the user clicks on the button: myvalue = 11 ).I've already build this part,it is working perfectly,but i need to increase the value and update the mysql column without refreshing the page?I know its possible but every tutorial from the web i've tried doesn't work.
Thanks is advance!
AJAX is what you're looking for. Best lib for that is jQuery with it's $.ajax() method http://api.jquery.com/jQuery.ajax/
The following code has a button which onclick calls updatedb.php and shows its output in div element called 'result'
<html>
<head>
<script type="text/javascript">
function UpdateDb()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("result").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","updatedb.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<button onclick='UpdateDb()'>Update</button>
<p> <span id="result"></span></p>
</body>
</html>
Then write updatedb.php
<?php
do mysql update here.
and echo the result you want to display.
?>
How can I use javascript to check, if the user clicks out of my text input class = "foo", and then, if the user has done so, execute a php file.
The easiest way to go about doing this, is to use jQuery.
First, include jQuery in your <head></head> section:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
Then add in the following Javascript:
$(document).ready(function() {
$('input.foo').blur(function(){
$.ajax('myScript.php');
});
});
This will setup the input (who's class is foo) to use ajax to run myScript.php whenever someone clicks out of it, which in development terms is called blurring.
Here an example with plain javascript.
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript">
function runAjax(){
if (str==""){
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","fooscript.php",true);
xmlhttp.send();
}
</script>
<form>
<input name="vorname" type="text" onblur="runAjax()">
</form>
</body>
</html>
Maybe it's a good idea to use a javascript framework like jQuery. I've stolen this example from here.
I am currently trying to build an Ajax / PHP grid based on a dropdown selection.
Firstly on the page I have a dropdown select box, on selection a variable is passed to a PHP page which executes a select statement, and I echo a table grid out to the page.
I have been using the library jquery / jquery.dataTables.js to make the table sortable and easy to navigate. The table / grid is outputted but sorting the columns and paging is not working can anyone help Ps. I have tried other grid libraries as well and the do not work????
Please see the code below thats being used:
<script type="text/javascript" src="/js/jquery-1.5.1.js"></script>
<script type="text/javascript" src="/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('table#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );
</script>
<script type="text/javascript">
function selMetal(str,str2){
if (str==""){
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","sql.php?m="+str+"&s="+str2,true);
xmlhttp.send();
}
</script>
Then the php script echos the table out inbetween
Thanks for you help in advance.
You need not use detect browser and make ajax call. Just use .ajax() method. You should use this code:
<script type="text/javascript">
function selMetal(str,str2){
if (str==""){
document.getElementById("txtHint").innerHTML="";
return;
}
$.ajax({
url: "sql.php",
data: {m:str, s:str2},
success: function(data) { $("#txtHint").html(data); },
dataType: "html"
});
}
</script>
Not sure this will solve your problem or not. Give a try :-)