CODEWITHSUNDEEP
javascriptjqueryhtmlcss
toni
toni

Reputation: 43

How to load a txt file into div tab using Jquery

I want to load a txt file into a div tab-content. In the below code I used a paragraph inside the tab-content. Instead of that paragraph, I want to display information of a text file. How can I do that using jquery?

<div class="create">
    <ul class="nav nav-tabs" id="myTab" style="width: 22%">
        <li class="active"><a href="#cpp">C++</a></li>
        <li><a href="#java">Java</a></li>
        <li><a href="#python">Python</a></li>
    </ul>
    <div class="tab-content">
        <div id="cpp" class="tab-pane fade in active">
            <h3>#Creating an array in C++</h3>
        </div>
        <div id="java" class="tab-pane fade">
            <h3>#Creating an array in Java</h3>
        </div>
        <div id="python" class="tab-pane fade">
            <h3>#Creating an array in Python</h3>
        </div>
    </div>
</div>
<!--#End of create div-->
<div class="insert">
    <ul class="nav nav-tabs" id="myTab2" style="width: 22%">
        <li class="active"><a href="#myTab2-cpp">C++</a></li>
        <li><a href="#myTab2-java">Java</a></li>
        <li><a href="#myTab2-python">Python</a></li>
    </ul>
    <div class="tab-content">
        <div id="myTab2-cpp" class="tab-pane fade in active">
            <h3>#Inserting an array in C++</h3>
        </div>
        <div id="myTab2-java" class="tab-pane fade">
            <h3>#Inserting an array in Java</h3>
        </div>
        <div id="myTab2-python" class="tab-pane fade">
            <h3>#Inserting an array in Python</h3>
        </div>
    </div>
</div>

Upvotes: 0

Views: 799

Answers (3)

Rana Ghosh
Rana Ghosh

Reputation: 4674

First you need to add jQuery ajax and then You need to add a dataType option in that Ajax request. Please follow below code::

$.ajax({
    url : "helloworld.txt", // your txt file path
    dataType: "text",
    success : function (data) {
        $(".tab-content").html(data); // replace .tab-content if you want to put .txt file's data in other place.
    }
});

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Use Jquery ajax like:

$.ajax({
    url : "helloworld.txt",
    dataType: "text",
    success : function (data) {
        $("#destination").html(data);
    }
});

Upvotes: 1

enno.void
enno.void

Reputation: 6579

Pretty Easy:

$.get( "your.txt", function( data ) {
  $( ".yourDestinationDivClass" ).html( data );
});

Upvotes: 0

Related Questions