Javascript/AJAX - TABS - href info based on function() calls

pizzipie · 01-03-2014, 12:59 PM

Hi, My goal is to create a tabbed document. The information to be used in the content <div>'s comes from a MySql database. Here is the html and js code I've used.

1. The base html to create the tab code. Code is in progress until I can get the data problem solved. (I'm hoping this isn't some embarrassing simple problem to solve !!!!)
2. The html code necessary to call the functions to provide the data from
MySql database. Since URL's can't get info from functions, this is the problem..
3. The functions in a .js file that actually get the data.

When I use 2. to call the functions the data returned will only show up in that page. Therefore, page 1. will never get the content to show in the tabs. See comments in html's for problem area.

1. ============= sagleTableData.html ===========================

Code:

<!DOCTYPE HTML >
               
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>sagleTableData.html-Jan2014</title>
	
<!--  =================  scripts  ==================-->

	<script src="../jquery/jquery-1.9.1.js"></script>
	<script src="sagle-tabs.js"></script>

</head>

<body>

<p><h2>This is trial coding to create tabs for codes that comprise Sagle Improvements. Data in MySql 'sagle' database.</h2></p>

<div style="width:300px;">

<!-- FORM NOT USED - Testing Only

<form method="get" action="#">
        <fieldset>
           <legend>Pick a Category.</legend>
                 <input type="button" size="30" id="workcodes" onclick='getCode("workcodes")' size="35" >Work Codes<br />
                 <input type="button" size="30" id="projects" onclick='getCode("projects")' size="35" />Projects<br />
                 <input type="button" size="30" id="vendors" onclick='getCode("vendors")' size="35" />Vendors<br />
        </fieldset>
</form>
-->
	<div id="tabset">
		<ul>
			<li><a href="sagleShowCodes.html?table=workcodes" >TabWork</a></li>	
			<li><a href="sagleShowCodes.html?table=projects" >TabProj</a></li>
			<li><a href="sagleShowCodes.html?table=vendors" >TabVend</a></li>	
		</ul>
	</div>
</div>

<div id="wbox"> </div> <!-- PROBLEM AREA - Can't get data back here -->

<div id="pbox"> </div> <!-- These <div>'s will be converted to -->

<div id="vbox"> </div> <!-- proper content <div>'s when data problem can be solved and data brought here -->

</script>

</body>
</html>

2. ============= sagleShowCodes.html =========================

Code:

<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>sagleShowCodes.html-Jan2014</title>
	
<!--  =================  scripts  ==================-->

	<script src="../jquery/jquery-1.9.1.js"></script>
	<script src="../jquery/getHtmlParams.js"></script>
	<script src="sagle-tabs.js"></script>

</head>

<body>

<script type="text/javascript">

	var myCode = getUrlParametersVals()["table"]; 
	
	getCode(myCode);

</script>

<div id="wbox"> </div> <!-- I've put these <div>'s here only to see -->

<div id="pbox"> </div> <!-- the data returned from the function call -->

<div id="vbox"> </div> <!-- It is data destined for the content of the Tabs -->

</body>
</html>

3. ============= sagle-Tabs.js ==============================

Code:

 // ==========  getCode()  =============

function getCode(x) {

	switch(x) {
	
		case "workcodes":
   	showWorkCodes(x);
   	break;
   			
		case "projects":
		showProjects(x);
   	break;
 
 		case "vendors":
   	showVendors(x);
   	break;
   	  	
   	default:
   	alert("doesn't work");	
	}
}


// ==========  showWorkCodes()  =============


function showWorkCodes(table) {
		
		$.getJSON('sagleTableData.php?tbl='+table, function(invData) {

			content="<table class='center' id='invTbl' border='3' cellpadding='5' bgcolor='#fedde3'> \n"  
			+"<caption><big><b>Work Codes</b></big></caption>"
			+"<tbody><tr> <th class='headId' >Code Id</th> <th class='headId' >Description</th></tr> \n"
			
			$.each(invData, function(key, val) {
				content+="<tr><td>"+val.codeid+"</td><td>"+val.code+"</td></tr>";			
			});

			content+="</tbody></table>";
	
			$("#wbox").empty();
			$("#pbox").empty();			
			$("#vbox").empty();			
			$(content).appendTo("#wbox");	
			
        

	});	// getJSON 
};

// code for Projects and Vendors - similar

piyush.sharma · 01-09-2014, 12:06 AM

Hope this sample can help you
index.jsp : Main page

Code:

<%-- 
    Document   : index
    Created on : Jan 9, 2014, 11:12:18 AM
    Author     : root
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <script src="sample.js"></script>
        <style>
		ul.tab li
		{
        		cursor: pointer;
		}
	</style>

    </head>
    <body>
        <div>
		<ul class="tab">
			<li onclick="getContent(1);">One</li>
			<li onclick="getContent(2);">Two</li>
		</ul>
	</div>
	<div id="divContent">
	</div>

    </body>
</html>

sample.js : Javascript

Code:

var READY_STATE_UNINITIALIZED = 0;
var READY_STATE_LOADING = 1;
var READY_STATE_LOADED = 2;
var READY_STATE_INTERACTIVE = 3;
var READY_STATE_COMPLETE = 4;

function initXMLHttpRequest()
{
    var xRequest = null;
    if(window.XMLHttpRequest)
    {
        xRequest = new XMLHttpRequest();
    }
    else if(window.ActiveXObject)
    {
        xRequest = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else
    {
        alert("browser not supporting Ajax");
    }
    return xRequest;
}
var req = initXMLHttpRequest();

function getContent(arg)
{
    var url="data.jsp?arg="+arg;
    if(req)
    {
        req.onreadystatechange = setContent;
        req.open("GET",url,true);
        req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        req.send(null);
    }
    document.getElementById("divContent").innerHTML = "";
}
function setContent()
{
    var ready = req.readyState;
    var data = null;
    if(ready == READY_STATE_COMPLETE)
    {
        data = req.responseText;
    }
    else
    {
        data = "";
    }
    document.getElementById("divContent").innerHTML = data;
}

data.jsp : page to fetch data from mysql

Code:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%
int arg = Integer.parseInt(request.getParameter("arg").toString());
switch(arg)
{
case 1:
	out.print("Fetch content of First tab");
	break;
case 2:
	out.print("Fetch content of Second tab");
	break;
default:
	out.println("Not decided yet");
}
%>

fhleung · 06-16-2015, 08:51 PM

I forgot the reference of the following...

Code:

<script type="text/javascript">
var reader = new XMLHttpRequest() || new ActiveXObject('MSXML2.XMLHTTP');

function loadDataFile() {
    reader.open('get', 'PATH_TEXTFILE.txt', true); 
    reader.onreadystatechange = displayContents;
    reader.send(null);
}

function displayContents() {
    if(reader.readyState==4) {
        var el = document.getElementById('main');
        el.innerHTML = reader.responseText;
    }
}
</script>

fhleung · 06-16-2015, 09:00 PM

http://www.w3schools.com/ajax/ajax_examples.asp