Solved

create tabs dynamically, issues with href

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Suggested Solutions

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 Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
The viewer will learn how to dynamically set the form action using jQuery.
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)

707 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

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now