create tabs dynamically, issues with href
I found code to create tabs dynamically. I have "sections" that have ids like "FC", "CC", and such. I am trying to get the tabs to have the ID/href structure like:
But using the code below, the hfef for the tab is the url + parameters + #FC.
How do I just get the FC?
<div id="tabs">
<ul>
<li> <a href="#FC"> tab header here </a></li>
</ul>
<div id="FC"> here is tab content </div>
</div>But using the code below, the hfef for the tab is the url + parameters + #FC.
How do I just get the FC?
function createTabs(){
var tabs = $("#tabs").tabs();
var tabTemplate = "<li><a href='#{href}'>#{label}</a></li>",
tabCounter = 0;
var varParams = "" ;
$.getJSON( 'DynamicReturn.asp',{proc:"GetPMSections",params: varParams}, function (data) {
$.each(data, function (key, value) {
var label = value.ButtonText,
id = value.HeaderID ,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.append( "<div id='" + id + "'></div>" );
tabs.tabs( "refresh" );
tabCounter++;
fillTab(value.HeaderID);
});
tabs.tabs('select', 0);
//startCheck=true;
});
} $(function() {
$("#tabs" ).tabs({
beforeActivate: function(event,ui){
alert('current: ' + currTab);
if (startCheck){return (saveForm()==1);}
},
select: function( event, ui ) {
currTab=$(ui.tab).attr('href');
}
})
});
leakim971
please provide a link to your page
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
if it's intranet, right click on the page, choose view source to post it here
remove/replace any sensitive data (but not the tags) if needed
remove/replace any sensitive data (but not the tags) if needed
ASKER
<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/cupertino/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">
// get querystring as an array split on "&"
var querystring = location.search.replace( '?', '' ).split( '&' );
var urlParams = {};
// loop through each name-value pair and populate object
for ( var i=0; i<querystring.length; i++ ) {
var name = querystring[i].split('=')[0];
var value = querystring[i].split('=')[1];
urlParams[name] = value;
}
//get paramaters from URL
var programID = urlParams["programID"];
var fiscalStart = urlParams["fy"];
var qtrNumber = urlParams["qtr"];
var leaderID = urlParams["leaderID"];
var rFlag = urlParams["rFlag"];
var answerHeaderID = urlParams["ahID"];
function newWindow() {
if (saveForm()) {
var rndNum=Math.floor(Math.random()*100000);
window.location.href = 'PMQtrProgressReport.asp?rnum=' + rndNum + '&id=' + urlParams["leaderID"];
}
}
var currTab="";
var startCheck=false;
$(function() {
$("#tabs" ).tabs({
beforeActivate: function(event,ui){
if (startCheck){return (saveForm()==1);}
},
select: function( event, ui ) {
currTab=$(ui.tab).attr('href');
var n = currTab.lastIndexOf("#");
currTab = currTab.substring(n+1);
}
})
});
function createTabs(){
var tabs = $("#tabs").tabs();
var tabTemplate = "<li><a href='#{href}'>#{label}</a></li>",
tabCounter = 0;
var varParams = "" ;
$.getJSON( 'DynamicReturn.asp',{proc:"GetPMSections",params: varParams}, function (data) {
$.each(data, function (key, value) {
var label = value.ButtonText,
id = value.HeaderID ,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.append( "<div id='" + id + "'></div>" );
tabs.tabs( "refresh" );
tabCounter++;
fillTab(value.HeaderID);
});
tabs.tabs('select', 0);
startCheck=true;
});
}
function fillTab (strSection){
var strHTML="", strTable="", strTH="", strTR="", strRows="", strTD="",strForm="";
var varParams = '"' + strSection + '"' + ',' + answerHeaderID;
var randomnumber=Math.floor(Math.random()*100000);
$.ajaxSetup({ cache: false });
$.getJSON( 'DynamicReturn.asp?rn='+ randomnumber,{proc:"GetPMSurveyResponses",params: varParams}, function (data) {
if (data) {
strForm = '<form id="form' +strSection+ '" method="post">'
strTable ='<table border = "1" width="100%" id="Table1' +strSection+ '">' +
'<col width="50%"/>' +
'<col width="50%"/>'
$.each(data, function (key, value) {
strHTML = '<center><h3>' + value.HeaderText + '</h3></center>'
if (strTH == "") {strTH = '<tr><th id="th1' +strSection + '">' + value.Question1 + '</th><th id="th2' +strSection + '">' + value.Question2 + '</th></tr>'};
strTR = "<tr>"
strTD = "";
if (value.TableGroupID=="1"){
for (var intColumnLoop=1;intColumnLoop<3;intColumnLoop++) {
if (value["AnswerType" + intColumnLoop] == "checkbox") {
strTD+= "<td class='Side" + intColumnLoop + "'> <input type = 'checkbox'"; //we can add up #table1 class=Side1 to see if side was answered
strTD += " name='" + value["QuestionID" + intColumnLoop] + "' value=1 '";
if (value["ItemResponse" + intColumnLoop] == "1") {
strTD+= " checked "
}
strTD+= "'/>";
strTD+= value["OptionText" + intColumnLoop] + '</td>' ;
}
else if (value["AnswerType" + intColumnLoop] == "Memo") {
strTD = "<td>" + value["OptionText" +intColumnLoop];
strTD += "<textarea ";
strTD += " name='" + value["QuestionID" + intColumnLoop] + "'";
strTD += " cols='80' rows='5'>"
if (value["ItemResponse" + intColumnLoop] != null) {
strTD += value["ItemResponse" + intColumnLoop];
}
strTD += "</textarea></td>";
}
}
if (value["OptionSortOrder1"] != "99") {
strTR += strTD + "</tr>";
strRows += strTR
}
else
(
strRows += '</table>' +
'<table border = "1" cellpadding="0" cellspacing="0" width="100%" id="Table99' +strSection + '">' +
'<tr align="center" border="0" ><td>' + strTD + '</td></tr>'
)
}
else {
strTD = value.Question1 + "</br>";
strTD += "<textarea ";
strTD += " name='" + value.QuestionID1 + "'";
strTD += " cols='80' rows='5'>";
if (value.ItemResponse1 != null) {
strTD += value.ItemResponse1
}
strTD += "</textarea></td>";
strRows += '</table>' +
'<table border = "0" width="100%" id="TableMemo' +strSection + '">' +
'<tr><td>' + strTD + '</td></tr>'
}
}); // end each
strHTML += strForm + strTable + strTH + strRows + '</table>'
strHTML += '<input name="sHeaderID" id="sHeaderID" type="hidden" value="' + strSection + '" />';
strHTML += '</form>';
$('#'+strSection).html(strHTML);
}
else
{
$('#grid1').append( 'There was no data to display' );
}
}) //end getJSON
.fail ( function( jqxhr, textStatus, error ) {
var err = textStatus + ', ' + error;
$('#grid1').append( err );
$('#btnSave').hide;
}); //end fail
}
function saveForm() {
var canContinue = 1;
var n
$('#th1'+currTab).css("background-color","");
$('#th2'+currTab).css("background-color","");
n = $('#Table99'+currTab).find(":checkbox:checked").size();
if (n == 0) {
n = $('.Side1', '#Table1'+currTab).find(":checkbox:checked").size();
if (n == 0) {
$("#th1"+currTab).css("background-color","red");
canContinue = 0;
}
n = $('.Side2', '#Table1'+currTab).find(":checkbox:checked").size();
if (n == 0) {
$("#th2"+currTab).css("background-color","red");
canContinue = 0;
}
}
if (canContinue==0){
alert('If not fully explored/implemented, then you need to select at least one item in the first and second column');
}
else {
var formData = $('#constants,#form'+ currTab).serialize();
$('#outputArea').html('http://bhrsweb:8080/QtrProgressReports/savePMSurvey.asp?' + formData); //just to make sure formData is correct
$.get('savePMSurvey.asp',formData, function(data){
answerHeaderID = data;
$('#answerHeaderID').val(data);
}); //end get
}
return canContinue;
}
$(document).ready( function(){
createTabs();
var strHeader = "Program: " + "</br>"; //GetProgramName value.id
var dtFY = new Date(fiscalStart).getFullYear()
strHeader += "Fiscal Year: " + dtFY + "/" + (dtFY+1) + "</br>";
strHeader += 'Quarter: ' + qtrNumber + '</br></br>';
strHeader += '<input type="button" name="btnDone" value="Submit" onClick="newWindow()" />'
$('#headerArea').html(strHeader);
$('#constants').html(
'<input name="programID" id="programID" type="hidden" value="' + programID + '" />' +
'<input name="fiscalStart" id="fiscalStart" type="hidden" value="' + fiscalStart + '" />' +
'<input name="leaderID" id="leaderID" type="hidden" value="' + leaderID + '" />' +
'<input name="rFlag" id="rFlag" type="hidden" value="' + rFlag + '" />' +
'<input name="answerHeaderID" id="answerHeaderID" type="hidden" value="' + answerHeaderID + '" />' +
'<input name="qtr" id="qtr" type="hidden" value="' + qtrNumber + '" />'
);
}); // end ready
</script>
<body>
<div id="headerArea"></div>
<div id="tabs">
<ul></ul>
<div id="tabContent"></div>
</div>
<form id="constants" method="post"></form>
<div id="grid1"></div>
<div id="outputArea"></div>
</body>
</html>ASKER
I guess the URL is part of the hfref and my work_around was needed.