Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2017
    Posts
    25
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Updating tab content on tab select

    My app has tabs across the top and every tab has an external HTML in it. The content is defined by divs whose conten is predifined within the div. What I am trying to solve is how to refresh/reload the content of the div when a tab is selected. See below for code.

    Code that handles tab selection:
    Code:
    	var loadPage = function (url, tabIndex) {
    		$.get(url, function (data) {
    			$('#content' + tabIndex).text(data);
    		});
    	}
    
    
    	$('#jqxTabs').on('selected', function (event) {
    		var pageIndex = event.args.item + 1;
    		loadPage(pageIndex + '.htm', pageIndex);
    	});
    Typical div content:

    Code:
    <div id="content1">
               <object type="text/html" data="schedule.htm" width="1855px" height="885px"  style="margin-top:10px; overflow:auto; border: none">	</object>			
             </div>
    Ideally in the on SELECTED something to force a refresh.

    Additionally, the tabs are located on a master HTML. All the content HTML are separate. So a location.reload will reload the master and not the individual page. The code above is on the master page.

    Tx.

  2. #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,889
    Thanks
    58
    Thanked 693 Times in 688 Posts
    Seems like a nasty way to be doing this (what's wrong with an iframe?) but if you do take this approach, can you leave the data attribute blank then set it once the tab is selected, thus ensuring a "fresh load"?

  3. #3
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,854
    Thanks
    36
    Thanked 1,047 Times in 1,043 Posts
    Just made two post about not using Iframes so you know I'd show up. Back in the day I did something like this with tabs and changing info:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <title>Page Title</title>
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: content-box;
        }
    
        #main {
          margin: 10px auto 0;
          width: 855px;
          height: 200px;
        }
    
        #sub1,
        #sub2,
        #sub3 {
          display: block;
          background-color: grey;
          width: 855px;
          height: 200px;
          padding: 20px;
          overflow: auto;
        }
        #sub2 {
          background-color: yellowgreen;
          display: none;
        }
        #sub3 {
          background-color: blueviolet;
          display: none;
        }
      </style>
    </head>
    
    <body>
      <div id="main">
        <button onclick="show(1)">Show 1</button>
        <button onclick="show(2)">Show 2</button>
        <button onclick="show(3)">Show 3</button>
    
        <div id="content1">
          <div id="sub1">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur officia ex harum explicabo debitis qui
            repellendus non soluta, totam nesciunt illo magnam ut hic minima optio suscipit accusamus quo sint alias porro
            labore fugiat excepturi expedita. Quos laborum iste architecto nobis vitae, delectus sed aperiam nulla, autem
            eligendi officia tempore soluta numquam sunt consectetur itaque, ut nisi illo? Maxime eveniet distinctio ullam
            cumque vel placeat dignissimos, sint rem odit aut labore, nostrum eos minima fugiat accusantium assumenda,
            soluta
            sequi cum. Repellendus, natus et. Quos obcaecati est aperiam laudantium placeat praesentium quod beatae quas
            illum veritatis at expedita, labore ipsam excepturi amet! Explicabo modi culpa alias optio nobis dolor hic eius
            laudantium corporis similique, inventore harum asperiores ullam fugit reprehenderit enim a aut, repudiandae,
            esse
            laborum? Numquam totam itaque pariatur error quas cumque, ipsum maxime dignissimos corrupti tempora sunt
            repellat
            accusantium blanditiis? Et, quas nobis! Incidunt adipisci ipsam laborum maxime fugit provident totam porro.
            Praesentium, dolorem.
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Libero corrupti, optio sequi deserunt aut architecto
            dolores commodi quo rem laboriosam tenetur officia debitis rerum officiis sint, fugit, atque deleniti. Optio,
            alias neque? Itaque, sapiente tempore, obcaecati doloremque voluptatum facilis ut ex voluptas necessitatibus
            fugiat consequatur rerum quos placeat tenetur sint illo. Illo impedit voluptas, ad temporibus ipsam et debitis
            voluptatem, veritatis omnis beatae corrupti facere recusandae repellendus optio qui labore enim id
            reprehenderit
            harum maiores. Cumque dolores facilis nisi accusantium obcaecati veritatis inventore quis cupiditate, explicabo
            odit dolore sapiente alias culpa ea delectus, non soluta quod magni saepe repudiandae dolorum reprehenderit!
            Impedit sit fugiat reiciendis accusantium necessitatibus facere provident tempore commodi maiores ab.
            Voluptatem
            alias accusantium deleniti totam, perspiciatis dolorum laborum vero explicabo nesciunt consequuntur harum est
            inventore quos magnam recusandae, mollitia assumenda eligendi non omnis qui iste quibusdam dicta blanditiis
            fugit? Quidem amet neque architecto necessitatibus alias, quam maxime fugit hic accusantium beatae recusandae
            ab
            magnam, suscipit totam facilis optio nostrum unde laborum voluptas aliquid libero aliquam iusto ipsa.
            Laudantium
            qui asperiores nobis similique doloribus aliquid ducimus architecto at soluta quo. Dolores numquam minus cum
            quas
            expedita perferendis quidem eaque sit, facilis id blanditiis delectus officiis ducimus mollitia rerum?
          </div>
          <div id="sub2">
            Ipsum dolor sit amet consectetur, adipisicing elit. Tenetur officia ex harum explicabo debitis qui repellendus
            non soluta, totam nesciunt illo magnam ut hic minima optio suscipit accusamus quo sint alias porro labore
            fugiat
            excepturi expedita. Quos laborum iste architecto nobis vitae, delectus sed aperiam nulla, autem eligendi
            officia
            tempore soluta numquam sunt consectetur itaque, ut nisi illo? Maxime eveniet distinctio ullam cumque vel
            placeat
            dignissimos, sint rem odit aut labore, nostrum eos minima fugiat accusantium assumenda, soluta sequi cum.
            Repellendus, natus et. Quos obcaecati est aperiam laudantium placeat praesentium quod beatae quas illum
            veritatis
            at expedita, labore ipsam excepturi amet! Explicabo modi culpa alias optio nobis dolor hic eius laudantium
            corporis similique, inventore harum asperiores ullam fugit reprehenderit enim a aut, repudiandae, esse laborum?
            Numquam totam itaque pariatur error quas cumque, ipsum maxime dignissimos corrupti tempora sunt repellat
            accusantium blanditiis? Et, quas nobis! Incidunt adipisci ipsam laborum maxime fugit provident totam porro.
            Praesentium, dolorem.
          </div>
          <div id="sub3">
            Dolor sit amet consectetur, adipisicing elit. Tenetur officia ex harum explicabo debitis qui repellendus non
            soluta, totam nesciunt illo magnam ut hic minima optio suscipit accusamus quo sint alias porro labore fugiat
            excepturi expedita. Quos laborum iste architecto nobis vitae, delectus sed aperiam nulla, autem eligendi
            officia
            tempore soluta numquam sunt consectetur itaque, ut nisi illo? Maxime eveniet distinctio ullam cumque vel
            placeat
            dignissimos, sint rem odit aut labore, nostrum eos minima fugiat accusantium assumenda, soluta sequi cum.
            Repellendus, natus et. Quos obcaecati est aperiam laudantium placeat praesentium quod beatae quas illum
            veritatis
            at expedita, labore ipsam excepturi amet! Explicabo modi culpa alias optio nobis dolor hic eius laudantium
            corporis similique, inventore harum asperiores ullam fugit reprehenderit enim a aut, repudiandae, esse laborum?
            Numquam totam itaque pariatur error quas cumque, ipsum maxime dignissimos corrupti tempora sunt repellat
            accusantium blanditiis? Et, quas nobis! Incidunt adipisci ipsam laborum maxime fugit provident totam porro.
            Praesentium, dolorem.
          </div>
        </div>
      </div>
    
      <script>
        function show(whatnumber) {
          var x = document.getElementById('sub1');
          var y = document.getElementById('sub2');
          var z = document.getElementById('sub3');
          x.style.display = 'none';
          y.style.display = 'none';
          z.style.display = 'none';
          document.getElementById('sub' + whatnumber).style.display = 'block';
    
        }
      </script>
    </body>
    </html>
    Does that help you at all? Could this be done in CSS?
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  4. #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,889
    Thanks
    58
    Thanked 693 Times in 688 Posts
    Quote Originally Posted by sunfighter View Post
    Just made two post about not using Iframes so you know I'd show up.
    Didn't see 'em. What's the problem?

  5. #5
    New Coder
    Join Date
    Jun 2017
    Posts
    25
    Thanks
    1
    Thanked 0 Times in 0 Posts
    xelawho: iFrames are annoying and restrictive. Inever use them.

    sunfighter: I don't see any code the reloads the content. How would that work.

  6. #6
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,854
    Thanks
    36
    Thanked 1,047 Times in 1,043 Posts
    I am not reloading the content, I have placed all the content in the HTML during first and only load.
    Easy to see how it works, just run it.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  7. #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Location
    Here
    Posts
    3,889
    Thanks
    58
    Thanked 693 Times in 688 Posts
    Well regardless, I would suggest seeing the data attribute on tab selection.

    There may be a prettier way to do this. I have never had much use for the object tag.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •