I'm very new to JScript, Ajax and Google Graphs. But I'm trying to combine everything, I've coded them all separately and got them working but having a lot of issues bringing it all together.
Google Graph Part of my code(Form does nothing here):
<html>
<head>
<title>Dashboard Application</title><meta name=keywords content=Dashboard Application, some of my best frieds are search engines/><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="https://www.google.com/jsapi"></script><link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" /><script type="text/javascript" src="jquery.simple-dtpicker.js"></script><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" />
<!---->
<style type="text/css">
body { background-color: #ffffff; padding-left: 1%; padding-bottom: 100px; }
footer{font-size:small;position:fixed;right:5px;bottom:5px;}
</style>
<style>h1 {color:white; font-size:24pt; text-align:center;font-family:arial,sans-serif }.menu {color:white; font-size:12pt; text-align:center;font-family:arial,sans-serif; font-weight:bold }table2 {background:black }p {color:black; font-size:12pt; text-align:justify;font-family:arial,sans-serif }p.foot {color:white; font-size:9pt; text-align:center;font-family:arial,sans-serif; font-weight:bold }a:link, a:visited, a:active {color:white} </style></head>
<body>
<table width=100% cellpadding=12 cellspacing=0 border=0><tr bgcolor=black><td align=left><img src="logo.png" width=150 height=150/></td><td><h1>Engineering Dashboard</h1></td><td align=right><img src=logo.png width=150 height=150/> </td></tr> </table><table class='table2' width=100% border=0 bgcolor=black cellpadding=4 cellspacing=0>
<tr>
<td width=50%><a href=googletestform.php><img src=as-logo.png width=20 height=20 alt=Google Graphs+Form border=0 /></a><a href=googletestform.php><span class=menu>Google Graphs+Form</span></a></td><td width=50%><a href=logout.php><img src=as-logo.png width=20 height=20 alt=Log Out border=0 /></a><a href=logout.php><span class=menu>Log Out</span></a></td></tr>
</table>
<form id="graphinput" method=POST>
<table width="100%" cellpadding="1" cellspacing="1" border="0"><tr>
<td width="10%">Start Date:</td>
<td width="20%">
<input type="text" name="startDateTime" value="">
<script type="text/javascript">
$(function(){
$('*[name=startDateTime]').appendDtpicker();
});
</script></td>
<td width="10%">End Date:</td>
<td width="20%">
<input type="text" name="endDateTime" value="">
<script type="text/javascript">
$(function(){
$('*[name=endDateTime]').appendDtpicker();
});
</script></td><td width="30%" ><select name="table"><option value="PHY_Short_CHA_ESW">PHY_Short_CHA_ESW</option><option value="PHY_Short_Cache_Usage_Rate">PHY_Short_Cache_Usage_Rate</option><option value="PHY_Short_DKA_ESW">PHY_Short_DKA_ESW</option><option value="PHY_Short_ESW_Cache">PHY_Short_ESW_Cache</option><option value="PHY_Short_MP">PHY_Short_MP</option><option value="PHY_Short_MPPCB_ESW">PHY_Short_MPPCB_ESW</option><option value="PHY_Short_PG">PHY_Short_PG</option><option value="PHY_Short_Write_Pending_Rate">PHY_Short_Write_Pending_Rate</option><option value="Port_IOPS">Port_IOPS</option><option value="Port_Initiator_IOPS">Port_Initiator_IOPS</option><option value="Port_Initiator_KBPS">Port_Initiator_KBPS</option><option value="Port_Initiator_Response">Port_Initiator_Response</option><option value="Port_KBPS">Port_KBPS</option><option value="Port_Response">Port_Response</option></select></td><td width="10%" ><select name="graph"><option value="ALL">ALL</option><option value="AVG&MAX">AVG&MAX</option></select></td></tr></table><table><tr><td width=100%><input type="submit" value="Submit"></td></tr></table></form><div id="response"></div>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load("visualization", "1", {"packages":["corechart"]});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
url: "get_sql_data.php",
//type: "POST",
dataType: "json",
success: function (phpdata) {
// Create our data table out of JSON data loaded from server.
var chartdata = new google.visualization.DataTable(phpdata);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById("chart_div"));
chart.draw(chartdata, {width: 1600, height: 500});
}
});
}
</script>
<!--this is the div that will hold the pie chart-->
<div id="chart_div"></div><table width=100% bgcolor=black cellpaddin g=0 border=0><tr><td><p class=foot>© root Dashboard</p><p class=foot>Please see our <a href=legal.php>Legal Information Page</a></p></td></tr></table></body>
</html>
The Text only version(Want to take the data from the form returned in a string here and graph it):
<html>
<head>
<title>Dashboard Application</title><meta name=keywords content=Dashboard Application, some of my best frieds are search engines/><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script type="text/javascript" src="https://www.google.com/jsapi"></script><link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" /><script type="text/javascript" src="jquery.simple-dtpicker.js"></script><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link type="text/css" href="jquery.simple-dtpicker.css" rel="stylesheet" />
<!---->
<style type="text/css">
body { background-color: #ffffff; padding-left: 1%; padding-bottom: 100px; }
footer{font-size:small;position:fixed;right:5px;bottom:5px;}
</style>
<style>h1 {color:white; font-size:24pt; text-align:center;font-family:arial,sans-serif }.menu {color:white; font-size:12pt; text-align:center;font-family:arial,sans-serif; font-weight:bold }table2 {background:black }p {color:black; font-size:12pt; text-align:justify;font-family:arial,sans-serif }p.foot {color:white; font-size:9pt; text-align:center;font-family:arial,sans-serif; font-weight:bold }a:link, a:visited, a:active {color:white} </style></head>
<body>
<table width=100% cellpadding=12 cellspacing=0 border=0><tr bgcolor=black><td align=left><img src="logo.png" width=150 height=150/></td><td><h1>Engineering Dashboard</h1></td><td align=right><img src=logo.png width=150 height=150/> </td></tr> </table><table class='table2' width=100% border=0 bgcolor=black cellpadding=4 cellspacing=0>
<tr>
<td width=50%><a href=googletestform.php><img src=as-logo.png width=20 height=20 alt=Google Graphs+Form border=0 /></a><a href=googletestform.php><span class=menu>Google Graphs+Form</span></a></td><td width=50%><a href=logout.php><img src=as-logo.png width=20 height=20 alt=Log Out border=0 /></a><a href=logout.php><span class=menu>Log Out</span></a></td></tr>
</table>
<form id="graphinput" method=POST>
<table width="100%" cellpadding="1" cellspacing="1" border="0"><tr>
<td width="10%">Start Date:</td>
<td width="20%">
<input type="text" name="startDateTime" value="">
<script type="text/javascript">
$(function(){
$('*[name=startDateTime]').appendDtpicker();
});
</script></td>
<td width="10%">End Date:</td>
<td width="20%">
<input type="text" name="endDateTime" value="">
<script type="text/javascript">
$(function(){
$('*[name=endDateTime]').appendDtpicker();
});
</script></td><td width="30%" ><select name="table"><option value="PHY_Short_CHA_ESW">PHY_Short_CHA_ESW</option><option value="PHY_Short_Cache_Usage_Rate">PHY_Short_Cache_Usage_Rate</option><option value="PHY_Short_DKA_ESW">PHY_Short_DKA_ESW</option><option value="PHY_Short_ESW_Cache">PHY_Short_ESW_Cache</option><option value="PHY_Short_MP">PHY_Short_MP</option><option value="PHY_Short_MPPCB_ESW">PHY_Short_MPPCB_ESW</option><option value="PHY_Short_PG">PHY_Short_PG</option><option value="PHY_Short_Write_Pending_Rate">PHY_Short_Write_Pending_Rate</option><option value="Port_IOPS">Port_IOPS</option><option value="Port_Initiator_IOPS">Port_Initiator_IOPS</option><option value="Port_Initiator_KBPS">Port_Initiator_KBPS</option><option value="Port_Initiator_Response">Port_Initiator_Response</option><option value="Port_KBPS">Port_KBPS</option><option value="Port_Response">Port_Response</option></select></td><td width="10%" ><select name="graph"><option value="ALL">ALL</option><option value="AVG&MAX">AVG&MAX</option></select></td></tr></table><table><tr><td width=100%><input type="submit" value="Submit"></td></tr></table></form><div id="response"></div><div id="response"></div>
<script>
$(document).ready(function(){
$("#graphinput").submit(function(){
// show that something is loading
$("#response").html("<b>Loading response...</b>");
/*
* "post_receiver.php" - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.ajax({
type: "POST",
url: "get_sql_data.php",
data: $(this).serialize()
})
.done(function(data){
// show the response
$("#response").html(data);
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
<table width=100% bgcolor=black cellpaddin g=0 border=0><tr><td><p class=foot>© root Dashboard</p><p class=foot>Please see our <a href=legal.php>Legal Information Page</a></p></td></tr></table></body>
</html>
When I try and combine the two as soon as I press the submit button it just opens a new page and keeps saying connecting to www.google.com. Any ideas on how I can graph the txt data?
Here is my attempt that doesn't work:
$(document).ready(function(){
$("#graphinput").submit(function(){
// show that something is loading
$("#response").html("<b>Loading response...</b>");
/*
* "post_receiver.php" - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.ajax({
type: "POST",
url: "get_sql_data.php",
data: $(this).serialize()
})
.done(function(data){
// show the response
// Load the Visualization API and the piechart package.
google.load("visualization", "1", {"packages":["corechart"]});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
function drawChart() {
// Create our data table out of JSON data loaded from server.
var chartdata = new google.visualization.DataTable(data);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById("response"));
chart.draw(chartdata, {width: 1600, height: 500});
}
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
</script>
Thanks in advance for any help.
Saw my error, I was trying to graph using the wrong data type:
My Current working code:
<script>
//Load core chart visualization package
google.load("visualization", "1", {packages: ["corechart"]});
//On load call back initiate function
google.setOnLoadCallback(getData);
function getData() {
$(document).ready(function(){
$("#graphinput").submit(function(){
// show that something is loading
$("#response").html("<b>Loading response...</b>");
/*
* "post_receiver.php" - where you will pass the form data
* $(this).serialize() - to easily read form data
* function(data){... - data contains the response from post_receiver.php
*/
$.ajax({
type: "POST",
url: "get_sql_data.php",
dataType: "json",
data: $(this).serialize()
})
.done(function(data){
// show the response
//$("#response").html(data);
var chartdata = new google.visualization.DataTable(data);
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById("response"));
chart.draw(chartdata, {width: 1600, height: 500});
})
.fail(function() {
// just in case posting your form failed
alert( "Posting failed." );
});
// to prevent refreshing the whole page page
return false;
});
});
}
</script>
Related
I have a script given to me by another developer to send push messages to my Apps.
I want to be able to send them from one page to both App types but cannot figure how.
Problem is I do not have any control over the pages on the server they are sent to.
If you look at the code the only differences in the two critical pieces of code are the Form action to send them to each Server page and the name of the App Id's...the other info remains the same.
I also found a piece of javascript to submit to two places from one button but could not get it working with both...
I know from reading that I probably need an array...Could someone please show me some code with these in an array with a submit button to send them to their respective pages.
Thanks in advance...
EDITED
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="../../ScriptLibrary/jquery-latest.pack.js"></script>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<form name="push" method="post" >
<input name="pushmessage" type="hidden" value="HAIR EXTENSIONS ">
<p align="center">Notification Message:<br />
<textarea style="width: 280px; height: 150px; margin-bottom: 30px; font-family: Verdana, Geneva, sans-serif; border-color: #000; border- width: 1px; resize: none;" name="pushmessage" id="push-message"> </textarea><br />
<input type='button' class="inputbtn" name='Submit' value='Push' onclick='sendFormData()' />
<form/>
<script type="text/javascript">
function sendFormData() {
var formURL1 = 'http://apple/iPhone-message';
var formURL2 = 'http://google/android-message';
var postData1 = {'publishersid':'appdeveloper','username':'myself','pass':'mypassword','appid':' CommunityApp-i','topics':'test'};
var postData2 = {'publishersid':'appdeveloper','username':'myself','pass':'mypassword','ap pid':'CommunityApp','topics':'test'};
submitForm(formURL1, postData1);
submitForm(formURL2, postData2);
};
function submitForm(formURL, postData) {
$('#push-message').append('sending data to url : '+formURL+'\n');
$.ajax(
{
url: formURL,
type: "POST",
data: postData,
success: function (data, textStatus, jqXHR) {
$('#push-message').text('success');
},
error: function (jqXHR, textStatus, errorThrown) {
$('#push-message').append('oops:error occured'+errorThrown+'\n');
}
});
}
</script>
</body>
</html>
You should not use native submit button (that triggers a page change) but use a ajax submit method using XHR object.
You can take a look to this jquery plugin: http://jquery.malsup.com/form/
you dont need to html form tag, you can do that with this piece of this code:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<form name="push" method="post" >
<input name="pushmessage" type="hidden" value="HAIR EXTENSIONS ">
<p align="center">Notification Message:<br />
<textarea style="width: 280px; height: 150px; margin-bottom: 30px; font-family: Verdana, Geneva, sans-serif; border-color: #000; border- width: 1px; resize: none;" name="pushmessage" id="push-message"> </textarea><br />
<input type='button' class="inputbtn" name='Submit' value='Push' onclick='sendFormData()' />
<script type="text/javascript">
function sendFormData() {
var formURL1 = 'http://apple/iPhone-message';
var formURL2 = 'http://google/android-message';
var postData1 = {'publishersid':'appdeveloper','username':'myself','pass':'mypassword','appid':' CommunityApp-i','topics':'test'};
var postData2 = {'publishersid':'appdeveloper','username':'myself','pass':'mypassword','ap pid':'CommunityApp','topics':'test'};
submitForm(formURL1, postData1);
submitForm(formURL2, postData2);
};
function submitForm(formURL, postData) {
$('#push-message').append('sending data to url : '+formURL+'\n');
$.ajax(
{
url: formURL,
type: "POST",
data: postData,
success: function (data, textStatus, jqXHR) {
$('#push-message').text('success');
},
error: function (jqXHR, textStatus, errorThrown) {
$('#push-message').append('oops:error occured'+errorThrown+'\n');
}
});
}
</script>
Hi currently i'm working on a html form with some fields, what all I need is to get a print preview of that form with the filled answers and later it should be printed on clicking on a print button. Can any one please help me out with this, I would be very thankful to you if you can.
Here is the example you can refer this.
Html code :
<html>
<body id="printarea">
<table class="tble">
<tr>
<td>
Student Name
</td>
<td>
John Sypon
</td>
</tr>
<tr>
<td>
Student Rollnumber
</td>
<td>
R001
</td>
</tr>
<tr>
<td>
Student Address
</td>
<td>
132 Kane Street Toledo OH 43612.
</td>
</tr>
<tr>
<td>
<input type="button" value="Print" class="btn" onclick="PrintDoc()"/>
</td>
<td>
<input type="button" value="Print Preview" class="btn" onclick="PrintPreview()"/>
</td>
</tr>
</table>
</body>
</html>
And include this css link:
<link rel="stylesheet" type="text/css" href="print.css" />
<link rel="stylesheet" type="text/css" href="Style.css" />
now print.css file :
#media print /*--This is for Print--*/
{
.btn
{
display: none;
}
.tble
{
background-color: #CD853F;
border:1px solid green;
-webkit-print-color-adjust: exact
/*above line of codes will set the table background-color and change the border color when we give the print and preview (print preview only when we see on print preview via browser) command*/
}
}
#media screen /*--This is for Print Preview Screen--*/
{
.btn
{
display: none;
}
.tble
{
background-color: #CD853F;
border:1px solid green;
}
}
and style.css
#media screen /*--This is for Screen--*/
{
.btn
{
background-color: #AFAFAF;
display: block;
}
.tble
{
background-color: #E5E5E5;
border: 1px solid #CD853F;
}
}
Now include this javascript code :
<script type="text/javascript">
/*--This JavaScript method for Print command--*/
function PrintDoc() {
var toPrint = document.getElementById('printarea');
var popupWin = window.open('', '_blank', 'width=350,height=150,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><title>::Preview::</title><link rel="stylesheet" type="text/css" href="print.css" /></head><body onload="window.print()">')
popupWin.document.write(toPrint.innerHTML);
popupWin.document.write('</html>');
popupWin.document.close();
}
/*--This JavaScript method for Print Preview command--*/
function PrintPreview() {
var toPrint = document.getElementById('printarea');
var popupWin = window.open('', '_blank', 'width=350,height=150,location=no,left=200px');
popupWin.document.open();
popupWin.document.write('<html><title>::Print Preview::</title><link rel="stylesheet" type="text/css" href="Print.css" media="screen"/></head><body">')
popupWin.document.write(toPrint.innerHTML);
popupWin.document.write('</html>');
popupWin.document.close();
}
</script>
I hope this answer help!!!
Try,
$('button').on('click',function(){
print();
});
For print preview you can try Print and Print Preview separately using HTML, CSS and JavaScript
You can use javascript method window.print()
i am trying to print full page but it doesn't work tried different codes but no success
here is tried code.
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
if (window.print) {
document.write('<form><input type=button name=print value="Print" onClick="window.print()"></form>');
}
</script>
<style type="text/css" media="all">
body{font-size:1em;}
table{font-size:0.9em;}
.price{text-align:right;padding-right:5px;}
.center{text-align:center;}
table tr{height:20px;}
#media print {body, html{width: 100%;}}
#top, #bottom {display: none;}
</style>
</head>
<body style="width:100%;">
<table width="94%" style="margin-left:2%;">
<tr>
<td width="100%" colspan="3" class="center" style="height:35px;"> <span style="text-transform:uppercase;"><b>ORDER TYPE </b></span></td>
</tr>
<tr></table>
</body></html>
please help me with it.
thanks
are you trying to render your page through javascript? If yes the following tutorial may help.
http://www.w3schools.com/js/js_htmldom_html.asp
Recommend reading the following API of the tutorial
document.getElementById(id).innerHTML = new HTML
Hope this helps.
this should work for you:
<html>
<head>
<style type="text/css" media="all">
body{font-size:1em;}
table{font-size:0.9em;}
.price{text-align:right;padding-right:5px;}
.center{text-align:center;}
table tr{height:20px;}
#media print {body, html{width: 100%;}}
#top, #bottom {display: none;}
</style>
</head>
<body style="width:100%;">
<input type=button name=print value="Print" onClick="window.print()">
<table style="margin-left:2%;width:94%;">
<tr>
<td width="100%" colspan="3" class="center" style="height:35px;"> <span style="text-transform:uppercase;"><b>ORDER TYPE </b></span></td>
</tr>
<tr></table>
</body></html>
note: always construct you html properly. width is a part of style tag it is not a tag itself.
Im having a few problems (I've highlighted them in the code):
Problem 1: I don't know how to get the #dl_buttn centred - (45% is nearest) - is there any way to 'Align:centre'?
Problem 2: Im trying to display a content locker onClick - However my locker isn't popping up? - is the code wrong to display a javascript content locker?
Problem/Question 3: Instead of displaying a message on the second click, i would like to display a java alert - I have tried to do this, but failed - could anyone help me out? - (the id for it is 'message')
<html>
<head>
<title>Passupload Passowords - Get the Passwords for your .RAR Files Here!</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#dl_buttn {
position:absolute;
left: 45%;
top: 280px;
}
-->
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js">
</script>
</head>
<center>
<body bgcolor="#3c3c3c" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<input type="image" id="dl_buttn" src="images/GETRARPASS.png" alt="Submit Form" position:absolute; onClick="imageClick()" />
<span id="message" style="display:none">You have completed this part!</span>
<script type="text/javascript"> // --------------PROBLEM 3
/* <![CDATA[ */
var count = 0;
function showMessage () {
if (count++ > 0) {
document.getElementById("message").style.display="block";
}
}
function changeImage() {
document.getElementById("dl_buttn").src = "images/REVEALPASS.png"
}
function imageClick() {
var fileref = document.createElement('script');
fileref.setAttribute('type','text/javascript');
fileref.setAttribute('src', 'http://tvserieslink.com/CLP/locker.js?guid=44f3fa3f991e9a34');
showMessage();
setTimeout(changeImage, 3000);
}
/* ]]> */
</script>
<!-- Save for Web Slices (Puloaaa.psd) -->
<table id="Table_01" width="1100" height="800" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/Pulo_01.gif" width="1100" height="150" alt=""></td>
</tr>
<tr>
<td><img src="images/Pulo_02.gif" width="1100" height="650" alt="">
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</center>
</html>
Sorry I'm a noob & Sorry for posting the whole code - Thanks
Problem 1:
a) You have improper syntax for your input, remove the position:absolute css as it doesn't belong there:
<input type="image" id="dl_buttn" src="images/GETRARPASS.png" alt="Submit Form" onClick="imageClick()" />
b) use margin: 0 auto; to center your dl_buttn and get rid of the absolute positioning.
Problem 2:
You are creating a script element in the DOM but you are not attaching it anywhere. You need to use document.body.insertBefore or insertAfter or similar to attach it to the document.
Problem 3:
To display a javascript alert use alert('Your message here.');
I am loading another page into an el via XHR. The loaded page has js on it that throws an error and fails unless the required dom element is loaded on the page. As it's XHR .ready et. al. won't work.
I have it working with a 500 ms timeout, but that's not OK; there has to be a better way. With timeout, the dom el doesn't always load and the page fails.
There is a table hard-coded on the page with an id. The script in the page is a jquery plugin (datatables) and won't init unless the table is loaded.
I've thought about having a function that inits the datatables stuff and calling that repeatedly while $('#tableID') is null but not sure that's correct.
<div id="contactQueue">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="contactsQueueTable">
<thead>
<tr>
<th class="" rowspan="1" colspan="1" style="width: 185px; ">Contact Name</th>
<th class="" rowspan="1" colspan="1" style="width: 148px; ">Bus. Name</th>
<th class="" rowspan="1" colspan="1" style="width: 116px; ">Is Client</th>
<th class="" rowspan="1" colspan="1" style="width: 165px; ">Remove</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<?php echo form_open('',array('id'=>'step2form','name'=>'step2form'));?>
<input type="hidden" name="clientID" value="<?php echo $clientID; ?>">
<?php echo form_close();?>
<script type="text/javascript" charset="utf-8">
console.log(jq('#currentContactsTable'))
while(jq('#currentContactsTable').html()==null){
initXHRPage();
console.log(jq('#currentContactsTable')+' not ready');
}
function initXHRPage(){
//init tables stuffs
}
EDIT;
The issue was something else, kinda. The script for Datatables is being loaded via getScript(). The element was being loaded normally, but initDatatables() was firing before getScript() was done loading, not before the el was loaded.
The solution was to call the initDatatables() function in the getScript() success callback:
<script type="text/javascript" charset="utf-8">
var jsf = '/js/jquery.dataTables.js';
jq.getScript(jsf, function(data, textStatus){
console.log('Loaded:'+jsf+" From: <?php echo $this->uri->uri_string(); ?>");
initDatatable();
});
</script>
Have you tried $(el).ready(...)? That certainly ought to work. If it isn't, something else is going wrong.
Edit
Sorry, that should have been $("#your_xhr_loaded_content").ready()....
I do this type of thing all the time and it works, I think the key is that I am loading a document.
Main HTML document, index.html:
...
<body>
...
<div id="activity_content">
</div>
...
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
main.js:
...
function ruleManagement.loadContent() {
$.ajax({
url: "subdocs/ruleMgmt.html",
cache: false,
success: function(html) {
$("#activity_content").html(html);
}
}
}
ruleManagement.onReady = function(event) {
// Init contents of the rule_management_pane
...
}
HTML Sub-Document, ruleMgmt.html
<div id="rule_management_pane">
<!-- Content here -->
...
</div>
<script type="text/javascript" language="JavaScript">
jQuery("#rule_management_pane").ready(ruleManagement.onReady);
</script>
If I invoke ruleManagement.loadContent(), then ruleManagement.onReady() is called after div#rule_management_pane has been successfully loaded. I cannot say for sure that onReady is invoked before div#rule_management_pane is inserted into #activity_content, but I think that is the case.
how I understand your html/js is getting loaded:
containerPage --> $.get(/ajax/getMiddlePage.php)
middle XHR page --> $.get(/ajax/getContactQueue.php)
middle XHR page --> $.get(/ajax/getCurrentContactsTable.php)
rough. ok, here is what i think you need:
<html>
<!---CONTAINER PAGE--->
<head>
<script type="text/javascript">
//this .ready is to register events we need to catch the '#currentContactsTable' load event
$(document).ready(function(){
//ajaxSuccess is a global ajax function, you need to check ajaxOptions object to ensure you have the correct 'ajaxSuccess' you thought you did.
$.ajaxSuccess(function(event, XMLHttpRequest, ajaxOptions){
if (ajaxOptions.url == '/ajax/getCurrentContactsTable.php') {
$('#currentContactsTable').trigger('initDataTables');
}
});
// .live() does not need the element to exist on document.ready()
$('#currentContactsTable').live('initDataTables', function(event){
var dataTables = $(this).datatables({options:here});
});
});
</script>
</head>
<body></body>
</html>
This is what I came up with. Thx to respondents for help.
initPage();
function initPage(){
if(jq('#currentContactsTable').length==1){
initDatatable();
}else{
window.setTimeout(function(){
initPage();
},250);
}
}
function initDatatable(){
jq('#currentContactsTable').dataTable( {
//REST OF DATATABLE STUFF...
It may not be super pretty as it still is relying on a timeout, but at least this timeout it a bit more robust...
^^^^ BZZZZZZZZZ
The issue was something else, kinda. The script for Datatables is being loaded via getScript(). The element was being loaded normally, but initDatatables() was firing before getScript() was done loading, not before the el was loaded.
The solution was to call the initDatatables() function in the getScript() success callback:
<script type="text/javascript" charset="utf-8">
var jsf = '/js/jquery.dataTables.js';
jq.getScript(jsf, function(data, textStatus){
console.log('Loaded:'+jsf+" From: <?php echo $this->uri->uri_string(); ?>");
initDatatable();
});
</script>