JQuery UI Tabs Won't Load Content via Ajax on iPad2 - javascript

I load a file called content.php into my browser. Content.php uses jquery to display some tabs for navigating between different types of content. The tabs are set up to load via Ajax.
Here is content.php:
<?php
include_once 'bin/Cookie.inc';
Cookie::check_auth();
$cookie = new Cookie();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Client Matters - Home</title>
<link type="text/css" href="css/pepper-grinder/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(function()
{
$( "#tabs" ).tabs();
});
</script>
<style type="text/css">
body{ font: 12pt "Trebuchet MS", sans-serif; margin: 0px;}
</style>
</head>
<body>
<div id="tabs">
<ul>
<li>Clients</li>
<li>Matters</li>
<li>Contacts</li>
<li>Calendar</li>
<li>Admin</li>
<li>Settings</li>
<li>Logout</li>
</ul>
</div>
</body>
</html>
When the user clicks on the "Clients" tab, clients.php is loaded. clients.php in turn makes an ajax query to the server to get the list of clients to display on it's page.
clients.php looks like this:
<?php
include_once 'bin/Cookie.inc';
Cookie::check_auth();
$cookie = new Cookie();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Client Matters - Home</title>
<link type="text/css" href="css/pepper-grinder/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(function()
{
$.ajax(
{
url: 'bin/getClientList.php',
type: 'post',
cache: false,
dataType: 'json',
success: function(data) {handleFormDataPostSuccess(data);},
error: function(data) {handleFormDataPostFailure(data);}
});
});
function handleFormDataPostSuccess(contacts)
{
$.each(contacts, function(index, contact)
{
var cname = "<tr><td>" + contact.lastName + ", " + contact.firstName + " " + contact.middleName + " " + contact.suffix + "</td>";
var phone1Link = "<td><a href='" + contact.voipDialString.replace("TO", contact.phone1) + "'>" + contact.phone1 + "</a></td>";
var phone2Link = "<td><a href='" + contact.voipDialString.replace("TO", contact.phone2) + "'>" + contact.phone2 + "</a></td>";
var emailLink = "<td>" + contact.email + "</td></tr>";
$('#contactTable tr:last').after(cname + phone1Link + phone2Link + emailLink);
});
$('#contactTable tr:odd').addClass("alt");
}
function handleFormDataPostFailure(error)
{
alert(error);
}
</script>
<style type="text/css">
body{ font: 12pt "Trebuchet MS", sans-serif; margin: 0px;}
td{padding:1em 1em 1em 1em; vertical-align:middle}
tr.alt {background: #D5D1B9}
table {border-width: 0px;border-spacing: 2px;border-style: none;border-collapse: collapse}
table th {border-width: 0px;border-style: none}
table td {border-width: 0px;padding:1em;border-style: none;}
tr:hover{background-color:yellow}
</style>
</head>
<body>
<table id="contactTable" width="100%">
<tr>
<th>Name</th>
<th>Phone 1</th>
<th>Phone 2</th>
<th>Email</th>
</tr>
</table>
</body>
</html>
This all works perfectly on IE, Firefox, Safari on my PC, and the browser on my Acer A500 Android tablet.
However, the tab/javascript interaction somehow fails when I'm running this on an iPad2 or an iPhone 3G (my only two Apple hardware products).
If I turn off the tabs (e.g. remove the in-line javascript from content.php) and just show a list of links for each segment of content, it looks ugly but works find on the iPad. If leave the tabs on, it looks great, but won't run the javascript inside clients.php.
Based on "error_log()" lines I've put in the PHP part of clients.php, I know the clients.php file is being loaded, but based on "alert()" lines I put in the javascript, none of the java script is running.
I enabled the debug console on the ipad2 and I don't get any errors. I even put some crazy lines of non-code inside the in-line javascript in clients.php. Firefox's error console complained out them, but the iPad2's error console remained empty.
Anyway, I'm just lost in terms of figuring out why this works on my other systems but not on an iPad or iPhone. Any pointers--even clues--will be greatly and deeply appreciated.

Could you try where clients.php dosent contain HTML structure markup.
The JQUERY-UI example only uses the HTML which needs to be listed inside the tab.
Which makes me think it loads your complete strcuture into the tab, and then have a body+head tag inside the tab, which is fair enough that IOS/Safari has trouble understadning.
Could you test it with just something like this:
<?php
include_once 'bin/Cookie.inc';
Cookie::check_auth();
$cookie = new Cookie();
?>
<script type="text/javascript">
$(function()
{
$.ajax(
{
url: 'bin/getClientList.php',
type: 'post',
cache: false,
dataType: 'json',
success: function(data) {handleFormDataPostSuccess(data);},
error: function(data) {handleFormDataPostFailure(data);}
});
});
function handleFormDataPostSuccess(contacts)
{
$.each(contacts, function(index, contact)
{
var cname = "<tr><td>" + contact.lastName + ", " + contact.firstName + " " + contact.middleName + " " + contact.suffix + "</td>";
var phone1Link = "<td><a href='" + contact.voipDialString.replace("TO", contact.phone1) + "'>" + contact.phone1 + "</a></td>";
var phone2Link = "<td><a href='" + contact.voipDialString.replace("TO", contact.phone2) + "'>" + contact.phone2 + "</a></td>";
var emailLink = "<td>" + contact.email + "</td></tr>";
$('#contactTable tr:last').after(cname + phone1Link + phone2Link + emailLink);
});
$('#contactTable tr:odd').addClass("alt");
}
function handleFormDataPostFailure(error)
{
alert(error);
}
</script>
<table id="contactTable" width="100%">
<tr>
<th>Name</th>
<th>Phone 1</th>
<th>Phone 2</th>
<th>Email</th>
</tr>
</table>
Since it's executed on your page, it should NOT be necessary to reload script files.
This soloution could of course be a problem if you access the page outside the tabs.

Related

Building a simple website that outputs results from a CSV using user’s input

https://levelup.gitconnected.com/building-a-simple-website-that-outputs-results-from-a-csv-using-users-input-bfcb782ced45
Hi, I am new to JavaScript. I came across this above tutorial and am trying to get it working so that i can then modify it for a little project i am working on. I hope to learn from it as I progress my project. I cant learn at the moment as I dont know whether its right or wrong.
I have created the html and JS file and have tested that they are linked. (I wrote an alert in the JS file that got triggered in the html file. I also added a quick script that gave a text alert when the button was pushed in html file).
I believe I have the same CSV file that the author was using but I cant be 100%. I can only assume I have introduced some error in the JS file and therefore its not reading the CSV file correctly. I have been at this for days and come up with nothing. Any help greatly appreciated.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
<div class=”container”>
<div class=”row”>
<div class=”col-md-12">
<h1 class=>Find Movies!</h1>
<h2 class=>Enter the name of an actor/actress to see his/her best movies!</h2>
<form id=”form”>
<input class=”form-control” id=”user-input” placeholder=”Enter actor/actress…”>
<button id=”button” class=”btn btn-secondary”>Find Movies!</button>
</form>
<table class="table" cellpadding="10">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Movie</th>
<th scope="col">Rating</th>
<th scope="col">Year</th>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
</div>
</div>
</div>
<script src="app.js" charset="utf-8"> </script>
</body>
</html>
JavaScript (app.js)
d3.csv("movies.csv").then(function (data) {
var movies = data;
var button = d3.select("#button");
var form = d3.select("#form");
button.on("click", runEnter);
form.on("submit", runEnter);
function runEnter() {
d3.select("tbody").html("")
d3.event.preventDefault();
var inputValue = d3.select("#user-input").property("value");
var filteredMovies =
movies.filter(movies => movies.actors.includes(inputValue));
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/0.10.0/lodash.min.js"></script>
var output = _.sortBy(filteredMovies, 'avg_vote').reverse()
for (var i = 0; i < filteredMovies.length; i++) {
d3.select("tbody").insert(“tr").html(
"<td>" + [i+1] + "</td>" +
"<td>" + (output[i]['original_title'])+”</a>”+“</td>” +
"<td>" + (output[i]['avg_vote'])+"</td>" +
"<td>" + (output[i]['year'])+"</td>" +
"<td>" + (output[i]['description'])+"</td" ) }
};
});
Extract from movies.csv

Modal Dialog Box Not Opening JQuery for Chatbox

I am trying to make a chatbox. Everything is working properly but when I click the "Start Chat" button, the alert shows "Object Object". Otherwise data fetching is perfect. I just can't see the modal chat box.
There is another almost similar example but in it the issue got solved by putting the <div id="user_model_details"></div> while that doesn't seem to be the case in this one.
<noscript><meta http-equiv="refresh" content="0; url=JSDisabled.html" /></noscript>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/User.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/User.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<div class="split Connect_Content" id="Connect_Cnt">
<div id="user_model_details"></div>
<script>
$(document).ready(function() {
fetch_user();
setInterval(function() {
fetch_user();
}, 5000);
function fetch_user() {
$.ajax({
url: "include/abcde.php",
method: "POST",
success: function(data) {
$('#Connect').html(data);
}
})
}
function make_chat_dialog_box(to_user_id, to_username) {
var modal_content = '<div id="user_dialog_' + to_user_id + '" class="user_dialog" title="Chat window with ' + to_username + '">';
//alert (modal_content);
modal_content += '<div style="height:30%; border:1px solid #ccc; overflow-y: scroll; margin-bottom:3%; padding:5%;" class="chat_history" data-toid="' + to_user_id + '" id="chat_history_' + to_user_id + '">';
modal_content += '</div>';
modal_content += '<div class="form-group">';
modal_content += '<textarea name="chat_message_' + to_user_id + '" id="chat_message_' + to_user_id + '" class="form-control"></textarea>';
modal_content += '</div><div class="form-group" align="right">';
modal_content += '<button type="button" name="send_chat" id="' + to_user_id + '" class="btn btn-info send_chat">Send</button></div></div>';
alert(modal_content);
var test = $('#user_model_details').html(modal_content);
alert(test);
}
$(document).on('click', '.start_chat', function() {
var to_user_id = $(this).data('toid');
var to_username = $(this).data('tousername');
//alert (to_user_id);
//alert (to_username);
make_chat_dialog_box(to_user_id, to_username);
$("#user_dialog_" + to_user_id).dialog({
autoOpen: false,
width: 400
});
$('#user_dialog_' + to_user_id).dialog('open');
});
});
</script>
</div>
Finally found the mistake in this one. Extreme silly mistake.I closed the </div> at the end of the page rather then closing it in the same line like this:
<div class="split Connect_Content" id="Connect_Cnt"></div>
</div> at end of page needs to be erased. It solved the problem. Sorry to disturb you guys.

$.ajax $ is not defined with json

So I'm just trying to get this to work
Javascript
$.ajax({
url: '/echo/json/', //Change this path to your JSON file.
type: "post",
dataType: "json",
//Remove the "data" attribute, relevant to this example, but isn't necessary in deployment.
data: {
json: JSON.stringify([
{
id: 1,
firstName: "Peter",
lastName: "Jhons"},
{
id: 2,
firstName: "David",
lastName: "Bowie"}
]),
delay: 3
},
success: function(data, textStatus, jqXHR) {
drawTable(data);
}
});
function drawTable(data) {
var rows = [];
for (var i = 0; i < data.length; i++) {
rows.push(drawRow(data[i]));
}
$("#personDataTable").append(rows);
}
function drawRow(rowData) {
var row = $("<tr />");
row.append($("<td>" + rowData.id + "</td>"));
row.append($("<td>" + rowData.firstName + "</td>"));
row.append($("<td>" + rowData.lastName + "</td>"));
return row;
}
the HTML
<!DOCTYPE html>
<html>
<head>
<title>kek</title>
<script src="js/kek.js"></script>
<link rel="stylesheet" type="text/css" href="css/kek.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<table id="personDataTable">
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</body>
</html>
I'm just trying to get this to post back, but every time i do it it just says "$" is not defined, i was hoping maybe it be the browser ( cause I've herd chrome does not like AJAX or JAON very much) so i changed it up. Still no good even Firefox is throwing this exception at me. So i went around looking in stackoverflow and i saw some solutions but i could come to understand how it could solve me problem. Im not too familiar with Js, AJAX, and JSON so i thought id post something and see if anyone could tell me what I'm doing wrong.
<!DOCTYPE html>
<html>
<head>
<title>kek</title>
<link rel="stylesheet" type="text/css" href="css/kek.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/kek.js"></script>
</head>
<body>
<table id="personDataTable">
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</body>
</html>

How to make jquery table which is refreshing itself in every 10 secs?

I am making admin portal, where admin can see the total number of current booking, for this we have to refresh table every 10 sec automatically and there will be also refresh button, which updates the table, I am using the JQuery, Ajax, Json, Spring MVC, Here is also one problem when I click on button It repeats the information. So please help me making these two things automatically refreshing Jquery table form database and Button which also refresh information without repeating the information, Thanks in advance for help and any suggestion,
Note: This is working code, thanks to Prog and ChrisH619
<!DOCTYPE html>
<html>
<head>
<title>Service for home - New Page - Next Generation of Service Provider - Admin Home Page</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="assets/styles.css" rel="stylesheet" media="screen">
<link href="assets/DT_bootstrap.css" rel="stylesheet" media="screen">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="vendors/flot/excanvas.min.js"></script><![endif]-->
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function fetchData(){
$(".data-contacts-js tbody").empty();
$.get("http://www.service4homes.com:8080/HomeServiceProvider/booking/getAllBookingDetails", function(data) {
$.each(data, function(i, contact) {
$(".data-contacts-js").append(
"<tr><td>" + contact.custId + "</td>" +
"<td>" + contact.custName + "</td>" +
"<td>" + contact.custMobile + "</td>" +
"<td>" + contact.custEmail + "</td>" +
"<td>" + contact.custAddress + "</td>" +
"<td>" + contact.Date + "</td>" +
"<td>" + contact.Time + "</td></tr>"
);
});
});
}
$(document).ready(function(){
$("#data-contacts-js > tbody").html("");
setInterval(function(){
fetchData();
},10000); // this will call your fetchData function for every 5 Sec.
});
$(document).ready(function(){
$("#data-contacts-js > tbody").html("");
$('#fetchContacts').click(function() {
fetchData();
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<!--/span-->
<div class="span9" id="content">
<div class="row-fluid">
<!-- block -->
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="muted pull-left">Carpenter Services</div>
</div>
<div class="block-content collapse in">
<div class="span12">
<table class="data-contacts-js table table-striped" >
<thead>
<tr>
<th>ID</th>
<th>Customer Name</th>
<th>Customer Mobile</th>
<th>Customer Email</th>
<th>Address</th>
<th>Date</th>
<th>Time</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<button id="fetchContacts" class="btn btn-default" type="submit">Refresh</button>
</div>
</div>
<!-- /block -->
</div>
</div>
</div>
</div>
<!--/.fluid-container-->
<script src="vendors/jquery-1.9.1.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/datatables/js/jquery.dataTables.min.js"></script>
<script src="assets/scripts.js"></script>
<script src="assets/DT_bootstrap.js"></script>
<script>
$(function() {
});
</script>
</body>
</html>
Change your jQuery:
$(".data-contacts-js").append(
to
$(".data-contacts-js tbody").append( /*This nests properly in html*/
and before your
$.each(
remember to remove all the children :)
$(".data-contacts-js tbody").empty();
$.each(
If you then want to use exactly the same code to run (on a refresh, not just a fetch) with an abort:
$(document).ready(function(){
var getDataTimeoutId = null,
refetchTime = 10 /* time in seconds */
isFetching = false,
getData = function(){
if (isFetching) {return;}
if (getDataTimeoutId !== null){
window.clearTimeout(getDataTimeoutId);
getDataTimeoutId = null;
}
isFetching = true;
$.get(
/* ajax get */
).success(function(){
setDataTimeout(); /* Only auto re-get if there wasn't an error */
}).always(function(){
isFetching = false; /* always clear the status */
});
},
setDataTimeout = function(){
getDataTimeoutId = window.setTimeout(function(){
getData();
}, refetchTime * 1000);
};
$('#fetchContacts').click(function(){
getData();
);
setDataTimeout();
});
This means that the code will run every 10s, or a click. But won't hammer the server for multiple pending requests.
:)
Try below code: - Use setInterval
1st Step :
You should create one common function which will fetch all data form Database as below.
function fetchData(){
$(".data-contacts-js tbody").empty(); // this will remove all <tr>.
$.get("http://localhost:8080/Hotels/reservation/getAllBookingDetails", function(data) {
$.each(data, function(i, contact) {
$(".data-contacts-js").append(
"<tr><td>" + contact.custId + "</td>" +
"<td>" + contact.custName + "</td>" +
"<td>" + contact.custMobile + "</td>" +
"<td>" + contact.custEmail + "</td>" +
"<td>" + contact.custAddress + "</td>" +
"<td>" + contact.Date + "</td>" +
"<td>" + contact.Time + "</td></tr>"
);
});
});
}
Step 2:
Make function which will call function automatically in every 10 sec. using SetInterval as below.
$(document).ready(function(){
setInterval(function(){
fetchData();
},10000); // this will call your fetchData function for every 10 Sec.
});
Step 3:
Make one event function for refresh button click event and put this function in .ready() function.
$('#fetchContacts').click(function() {
fetchData();
});
You could simply use jQuery datatables. This is a fully featured jQuery plugin for tables with huge data sets, which supports things like refreshing in a given time interval. See here

JQuery Tablesorter not a function

I am parsing an XML file into a table and want to use the jquery tablesorter. I've tried many things, of which none have worked. I was parsing the XML file first via AJAX and then calling tablesorter on my table. The way I have my code now, I'm calling tablesorter on my table, running AJAX, and then updating the table with $("#table).trigger("update"). I am getting this error no matter whether I have it the first way or the second way: "$(#table).tablesorter() is not a function". Any ideas? Code is listed below for JS and HTML.
HTML:
<html>
<head>
<title>Read XML</title>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="jquery-latest.js"</script>
<script type="text/javascript" src="jquery.tablesorter.js"</script>
<script type="text/javascript" src="custom.js"></script>
</head>
<body>
<table id="table" border="1">
<thead>
<tr>
<th>Item #</th>
<th>Shape</th>
<th>Weight</th>
<th>Color</th>
<th>Clarity</th>
<th>Price($)</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
JS:
$(document).ready(function() {
$("#table").tablesorter();
$.ajax({
type: "GET",
url: "tutorial.xml",
dataType: "xml",
success: parseXml
});
$("#table").trigger("update");
});
function parseXml(xml)
{
$(xml).find("diamond").each(function()
{
$("#table tbody").after("<tr><td>" + $(this).find("id").text() +
"</td><td>" + $(this).find("shape").text() + "</td><td>" + $(this).find("weight").text() +
"</td><td>" + $(this).find("color").text() + "</td><td>" + $(this).find("clarity").text() +
"</td><td>" + $(this).find("price").text() + "</td></tr>");
});
}
You are missing a closing >
<script type="text/javascript" src="jquery.tablesorter.js"</script>
should be
<script type="text/javascript" src="jquery.tablesorter.js"></script>
Edit:
As Marek Karbarz points out below, you're also missing a closing > on this line:
<script type="text/javascript" src="jquery-latest.js"</script>
Not sure why you're including jQuery twice, however.

Categories