Load text file content using ajax

Question

I have a HTML and CSS tab where i want to load the text content under each tab using ajax request from a .txt file. It means when we click on any tab then it loads the text content from .txt file. Content will be loaded first time a tabs get activated. First tab is already activated and text content loaded and showing under first tab but my issue is but when i click on second or third tab then it doesn't load the text content. Code is live here: http://testweb.epizy.com/ajax-load/index.html

Edit your question and add the relevant code to your question. — WillardSolutions, Jun 03 '17 at 20:52

score 1 · Answer 1 · answered Jun 03 '17 at 21:50

If you set IDs of the radio buttons the same as file names, i.e. tab1, tab2 and tab3, the result JavaScript code can look like:

$(document).ready(function () {
  const SELECTOR = '[type=radio]';

  function loadData(tabId) {
    $.ajax({
      url: `${tabId}.txt`,
      dataType: "text",
      async: false,
      success: (data) => {
        $(`.${tabId}`).html(data);
      }
    });
  }

  const checkedTabId = $(`${SELECTOR}:checked`).prop('id');
  loadData(checkedTabId);

  $(SELECTOR).change(function () {
    if (this.checked) {
      loadData(this.id);
    }
  });
});

It's just a brief example of how your code could be improved.

JSFiddle example

Marko Mackic · Answer 2 · 2017-06-03T21:18:24.450

Look at JQuery load function . Since you haven't supplied any code, I'm unable to help you better.

Here is your code :

 $(document).ready(function() {
      if ($("#one").is(":checked")){
          $.ajax({
              url : "tab1.txt",
              dataType: "text",
              async:false,
              success : function (data) {
                  $(".tab1").html(data);
              }
          });
      };
      if ($("#two").is(":checked")){
          $.ajax({
              url : "tab2.txt",
              dataType: "text",
              async:false,
              success : function (data) {
                  $(".tab2").html(data);
              }
          });
      };
      if ($("#three").is(":checked")){
          $.ajax({
              url : "tab3.txt",
              dataType: "text",
              async:false,
              success : function (data) {
                  $(".tab3").html(data);
              }
          });
      };
    });

You should do it like this, add:

  $(document).ready(function(){
    function loadText(){
      if ($("#one").is(":checked")){
           $.ajax({
             url : "tab1.txt",
             dataType: "text",
             async:false,
             success : function (data) {
               $(".tab1").html(data);
            }
         });
       }
       if ($("#two").is(":checked")){
          $.ajax({
            url : "tab2.txt",
            dataType: "text",
            async:false,
            success : function (data) {
              $(".tab2").html(data);
            }
         });
      }
      if ($("#three").is(":checked")){
          $.ajax({
          url : "tab3.txt",
          dataType: "text",
          async:false,
          success : function (data) {
              $(".tab3").html(data);
          }
        });
      }
    }
    $('input[type="radio"]').change(loadText);
  });

I didn't want to shorten your code and waste my time :) so here is solution using your code — Marko Mackic, Jun 03 '17 at 21:19

score 0 · Answer 3 · answered Jun 03 '17 at 21:16

Looking at your source code, I see that your JavaScript is supposed to run when the "checked" attribute of buttons 2 and 3 is set, but the checked attribute is meant for the default option in a radio selection--not for the currently selected option. When you change the tab the first button will still have the checked attribute because it is always the default. See this link for some more info on that.

I'd change your javascript to something like this:

<script>
    $(document).ready(function() {
        if ($("#one").is(":checked")){
            $.ajax({
                url : "tab1.txt",
                dataType: "text",
                async:false,
                success : function (data) {
                    $(".tab1").html(data);
                }
            });
        };
    });
    function loadOne() {
        $.ajax({
            url : "tab1.txt",
            dataType: "text",
            async:false,
            success : function (data) {
                $(".tab1").html(data);
            }
        });
    }
    function loadTwo() {
        $.ajax({
            url : "tab2.txt",
            dataType: "text",
            async:false,
            success : function (data) {
                $(".tab2").html(data);
            }
        });
    }
    function loadThree() {
        $.ajax({
            url : "tab3.txt",
            dataType: "text",
            async:false,
            success : function (data) {
                $(".tab3").html(data);
            }
        });
    }
</script>

And then adding an onclick event to the three buttons (not positive if this would go on the <input> or the <label>), so add onclick=loadOne() for the first button, loadTwo() for the second, and loadThree() for the third.

My code is probably a little redundant, I'm a bit of a beginner, but hopefully this helps.

Load text file content using ajax

3 Answers3