Solved

create tabs dynamically, issues with href

Posted on 2013-05-13
5
417 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

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

792 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