0

I am trying to retrieve text from a .txt file using jQuery (I am also using Bootstrap). I am very new to web design but I am familiar somewhat with coding. I have the following button in my HTML:

<button type="button" class="btn btn-primary-outline-btn text-btn" data-toggle="modal" data-src="test.txt" data-target="#textModal"><img class="video_icon" src="assets/icons/parchment_icon.png" alt="text"</button>

As you can see, the target of the button is a modal which loads up text like so:

<!-- Text Modal -->
      <div class="modal fade" id="textModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">×</span>
              </button>
            </div>
            <div class="modal-body">
              <p id="outputText">File not found.</p>
            </div>
          </div>
        </div>
      </div>

My JS file looks like this (changed following one of the answers):

$(".text-btn").on("click", textFunction);

function textFunction() {
  var el = document.getElementById('test');
  console.log(el.getAttribute('data-src'));
  jQuery.get(el.getAttribute('data-src'), function(data) {
    $( '#outputText' ).html(data.replace('n',''));
  });
}

Whilst the filepath outputs to the console correctly, I am unsure how to use jQuery to utilise this so that it will input the file contents into the modal-body. Additionally, my issue is now how to make the variable assigned through getElementById correctly correspond to the button pressed. Moreover, I am not sure how to use getAttribute or attr in jQuery to obtain the data source in javascript.

This is an issue as I will have multiple buttons with multiple file sources so I would like the jQuery to retrieve from each button's respective data source. Is there a way in which I can do this...?

Improve this question
6
  • Does this answer your question? How to get the value of an attribute in Javascript Commented Aug 27, 2020 at 21:55
  • Hi @HereticMonkey. Thank you for your reply but I think not as it appears the values passed in are strings and I am hoping to retrieve data from a text file. I may be incorrect but I was led to believe this entails a slightly different process? Commented Aug 27, 2020 at 22:10
  • You're looking to get the value of data-src attribute into the URL argument of the jQuery.get call, right? The linked question's answers describe how to get the value of the data-src attribute, just as both of the current answers do. Commented Aug 28, 2020 at 0:39
  • Hi @HereticMonkey. Perhaps I misunderstood. Just to be clear, is the value of data-src when put into jQuery.get equivalent to jQuery.get('test.txt' ... );? I am trying to get the text from test.txt into the modal-body. With respect to the current answers you refer to, do you mean the ones below? Unfortunately I keep pulling the entire page source instead of just the data-src value. I will attempt again with this change and report back. Commented Aug 28, 2020 at 1:21
  • Hi @HereticMonkey. Thanks so much. You were correct. It logs the file path to the console when I have console.log(el.getAttribute('data-src')). For the jQuery.get, I am not sure how to formulate this as jQuery.get($(el.getAttribute('data-src')) ... ); does not work. Apologies for the questions. Commented Aug 28, 2020 at 1:44

2 Answers 2

Reset to default
0

You have to set the full file url in data-src then use:

$('.text-btn').on('click', function() {
    $.get($(this).data('src'), function(data) {
        $('#outputText').html(data);
    });
});

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Hi @Ibrahim El Hajj. Thank you for your reply. I have this set currently as test.txt is in the same directory as index.html. Would I still need to make it explicit?
Hi @jsaider, this will work for you but we use the full url to avoid any broken ones cause I usually use frameworks and url will be relative to the route
Hi @Ibrahim El Hajj. I attempted with the full URL and I got a CORS issue (I am running the site via Github pages currently). I then removed the URL and simply used the filepath but this also did not work and gave me a 404 error.
Hi @Ibrahim El Hajj. My apologies. I made some changes (so as the file is the same directory, I simply point to the filename itself) and it works. Thank you so much. I will mark this as the answer.
0

For the case of multiple buttons, you can use an onclick event on each, which will fire textFunction. Then, inside the text function, you can retrieve the correct button's data-src using jQuery's data() function:

//assuming all your relevant buttons have class `text-btn`
//call textFunction on button click
$(".text-btn").on("click", textFunction);

function textFunction() {
  //inside event handler, `this` points to the button that triggered the event
  jQuery.get($(this).data('src'), function(data) {
    alert(data);
    $( '#outputText' ).html(data.replace('n',''));
  });
}
Improve this answer

1 Comment

Hi @Anis R. I attempted this but I seem to be getting the entire source code for the webpage here. I tried both removing and including the call to the function in $document.ready but to no avail, unfortunately.