Solved

create tabs dynamically, issues with href

Posted on 2013-05-13
5
413 Views
Last Modified: 2013-05-26
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:
<div id="tabs">
     <ul>
         <li> <a href="#FC"> tab header here </a></li>
     </ul>
      <div id="FC"> here is tab content </div>
</div>

Open in new window


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;
        });
    }

Open in new window

or if better, I am trying to assign the 'FC'  to currTab by using the code below:
  $(function() {
    $("#tabs" ).tabs({
        beforeActivate: function(event,ui){
            alert('current: ' + currTab);
            if (startCheck){return (saveForm()==1);}
        },
        select: function( event, ui ) {
            currTab=$(ui.tab).attr('href');
        }
    })
  });

Open in new window

0
Comment
Question by:KCTechNet
  • 3
  • 2
5 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39163506
please provide a link to your page
0
 

Accepted Solution

by:
KCTechNet earned 0 total points
ID: 39163602
Sorry This is an intranet page but pretty much all the tab generating code is shown in the post.

I did come up with a work around by getting everything after the last pound sign, but I gotta keep the question open because I would like to know why the attrib is returning the url.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39163609
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
0
 

Author Comment

by:KCTechNet
ID: 39165068
<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>

Open in new window

0
 

Author Closing Comment

by:KCTechNet
ID: 39197437
I guess the URL is part of the hfref and my work_around was needed.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question