• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 178
  • Last Modified:

updating content of tabs to show changed variables, jquery & javascript

once this is loaded on the site, the vars e.g. x2, sc_name will be updated,

i would like to be able to update  the whole 'tabs' element, (meaning its text shows the new vars)
without re-loading the whole page... preferably

i would be calling/triggering the refresh from an onclick event, not a timer.


from my reading jquery should be able to do it, but i have not been able to get it working.
any help / advice on doing this would be appreciated - im quite new to all this.
thanks!
<html>                                                                  
 <head>                                                                  
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title> testing </title>
    	<link type="text/css" href="jq/css/south-street/jquery-ui-1.8.16.custom.css" rel="stylesheet" media="all" /> 
    	<script type="text/javascript" src="jq/js/jquery-1.6.2.min.js"></script>   <!-- jquery -->
   		<script type="text/javascript" src="jq/js/jquery-ui-1.8.16.custom.min.js"></script>    
                             
 
     <script type="text/javascript">
		//jquery tools functions.
		$(function(){
	
				// Tabs
				$('#tabs').tabs();
				})
			
var sc_name, x2 = "origtext";			
			
			
	 $(document).ready(function() {
   $("a").click(function() {
     x2 = "fun";
     sc_name = "newstuff";


   });
 });

                                         
 </script>                                                               
 </head>                                                                 
 <body>                                                                  
  
    <a href="">clickme</a>


 <div id="tabs" > <!--style="visibility:Hidden;"> -->
      <ul>
        <li><a href="#tab-1"><span>>Summary</span></a></li>
        <li><a href="#tab-2"><span>two</span></a></li>
        <li><a href="#tab-3">Info</span></a></li>
        <li><a href="#tab-4">Picture gallery</span></a></li>
      </ul>
      <div id="tab-1">
        <p>summary of the  stats</p>
		<script type="text/javascript">
		document.write("sc name:" + sc_name + "<br>");
		document.write("Number: " +x2 + "<br>");
		
		</script>
      </div>
      <div id="tab-2">
       <p>Summary & links to relevant resources</p>

	     </div>
      <div id="tab-3">
        <p>here will be hotdogs...</p>
	
      </div>
       <div id="tab-4">	
		<div Id="picdiv" style="height:200px;">

		click to upload new picture...[link to upload]
		</div>
      </div>
      </div>
                                   
 </body>                                                                 
 </html>

Open in new window

0
weaverk
Asked:
weaverk
1 Solution
 
leakim971PluritechnicianCommented:
Check this : http://jsfiddle.net/QSk5Y/
var sc_name, x2 = "origtext";

$(document).ready(function() {
    $('#tabs').tabs();
    $("a").click(function(e) {
        e.preventDefault();
        x2 = "fun";
        sc_name = "newstuff";
        $("#tab-1").html("<p>summary of the  stats</p>sc name:" + sc_name + "<br>Number: " +x2 + "<br>");
    });
});

Open in new window

0
 
weaverkAuthor Commented:
i  made into a function so i can call the refresh on demand and it works suberbly.
many thanks!
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now