6 Replies - 325 Views - Last Post: 30 June 2017 - 12:02 PM

#1 dday9  Icon User is offline

  • D.I.C Regular

Reputation: 94
  • View blog
  • Posts: 495
  • Joined: 17-April 13

Get Function Refreshes Page

Posted 29 June 2017 - 03:49 PM

I'm trying to dynamically load DOM elements into a div element by reading a file that contains markup. The JQuery that I'm using is:
jQuery.get('lessons/basics/indroduction.html', function(data) {
    // append the file to the content area
    $('#content').append(data);
});


But whenever I use this code, it refreshes the entire page. How can I read the file without having to refresh the whole page?

Is This A Good Question/Topic? 0
  • +

Replies To: Get Function Refreshes Page

#2 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1789
  • View blog
  • Posts: 5,702
  • Joined: 15-January 14

Re: Get Function Refreshes Page

Posted 29 June 2017 - 04:25 PM

That code won't refresh the page. You're probably using it in a way where you're not canceling another event, like a click event on a link or a form submission, which is causing the page to refresh.
Was This Post Helpful? 0
  • +
  • -

#3 dday9  Icon User is offline

  • D.I.C Regular

Reputation: 94
  • View blog
  • Posts: 495
  • Joined: 17-April 13

Re: Get Function Refreshes Page

Posted 29 June 2017 - 05:44 PM

I do have it in a links click event, however, I also have it when the page loads. So right now when I load the page it is just constantly refreshing.
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1789
  • View blog
  • Posts: 5,702
  • Joined: 15-January 14

Re: Get Function Refreshes Page

Posted 30 June 2017 - 09:56 AM

The code you showed isn't refreshing the page, neither an ajax request nor appending content to the page will trigger a refresh. The code to do that has to be somewhere else. When you load the page are you just firing the click event for the link? That would cause a refresh.
Was This Post Helpful? 0
  • +
  • -

#5 dday9  Icon User is offline

  • D.I.C Regular

Reputation: 94
  • View blog
  • Posts: 495
  • Joined: 17-April 13

Re: Get Function Refreshes Page

Posted 30 June 2017 - 10:54 AM

This is my entire code file:
$(document).ready(function(){
    // by default show the first lesson
    jQuery.get('lessons/basics/indroduction.html', function(data) {
        // append the file to the content area
        $('#content').append(data);
    });
    
    $('.panel .panel-body ol li a').on('click', function() {
        // get the root, directory, and file values
        var root = 'lessons';
        var directory = $(this).parent().parent().parent().parent().data('directory');
        var file = $(this).parent().data('file');
        var path = root + '/' + directory + '/' + file + '.html';

        // clear any existing lesson content
        $('#content').empty();

        // read the lesson file
        jQuery.get(path, function(data) {
            // append the file to the content area
            $('#content').append(data);
        });
    });
});


As far as i can tell, I'm not firing the click event. What makes it more difficult is that I can't really debug my code either because whenever I load the webpage it automatically starts refreshing the page.
Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1789
  • View blog
  • Posts: 5,702
  • Joined: 15-January 14

Re: Get Function Refreshes Page

Posted 30 June 2017 - 11:54 AM

Yeah nothing sticks out at me. Do you have a meta refresh tag on the page?
Was This Post Helpful? 1
  • +
  • -

#7 dday9  Icon User is offline

  • D.I.C Regular

Reputation: 94
  • View blog
  • Posts: 495
  • Joined: 17-April 13

Re: Get Function Refreshes Page

Posted 30 June 2017 - 12:02 PM

Nope, the only two meta tags that I have are:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


However, I just inspected my source (because I'm using Bootstrap Studio to develop the website) and I noticed that it is including a JQuery file that I was unaware of:
<script id="bs-live-reload" data-sseport="54695" data-lastchange="1498849088490" src="/js/livereload.js"></script>

The name suggests that this is what is causing the problem, so for now I'm going to mark this thread as resolved unless something else changes.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1