CODEWITHSUNDEEP
javascriptjqueryajaxwebsocket
Voctor
Voctor

Reputation: 57

WebSocket connection failed Insufficient resources

I am actually learning to code and I'm trying to make a table with tabs linking to each others through ajax (I'm planning to add some transition between them to avoid the blinking caused by classic hyperlinks and it seemed to be the best thing to do, if you think not, please tell me).

But I have a trouble I don't really understand yet : each time I click one of the tabs to navigate, it gets slower and slower to load until I get this error in the console :

WebSocket connection to 'ws://127.0.0.1:5500/index.html/ws' failed: Insufficient resources

I'm thinking that's because something is stacking until it's too much, but I don't what's causing this.

$(function() {
  $("#Tab1").click(function(e) {
    e.preventDefault();
    $("#mytable").load("../ajax/tab1.html", function() {
      // do stuff when new HTML is loaded in `document.body`
      // for example, load CSS
      $.when($.getScript("../voctor.js"), $.get("../css/style.css")).then(function() {
        // do stuff when script and CSS is loaded
      })
    });
  });
});

$(function() {
  $("#Tab2").click(function(e) {
    e.preventDefault();
    $("#mytable").load("../ajax/tab2.html", function() {
      // do stuff when new HTML is loaded in `document.body`
      // for example, load CSS
      $.when($.getScript("../voctor.js"), $.get("../css/style.css")).then(function() {
        // do stuff when script and CSS is loaded
      })
    });
  });
});

$(function() {
  $("#Tab3").click(function(e) {
    e.preventDefault();
    $("#mytable").load("../ajax/tab3.html", function() {
      // do stuff when new HTML is loaded in `document.body`
      // for example, load CSS
      $.when($.getScript("../voctor.js"), $.get("../css/style.css")).then(function() {
        // do stuff when script and CSS is loaded
      })
    });
  });
});

Upvotes: 0

Views: 2556

Answers (1)

Voctor
Voctor

Reputation: 57

If that can ever be useful to someone else, I've found the solution by adding .unbind() to my function. I've also DRY'd it up so here's the final code :

$('.tab').unbind().on('click', function(e) {
  e.preventDefault();
  var tabHref = $(this).attr('href');
  $("#content").load(tabHref, function() {
    // do stuff when new HTML is loaded in `document.body`
    // for example, load CSS
    $.when($.getScript("../voctor.js"), $.get("../css/style.css"))
      .then(function() {
        // do stuff when script and CSS is loaded
      })
  });
});

I realized that each click doubled the previous request, so first click was 1 request, then 2, then 4, then 8 etc... The unbind() avoids that.

Upvotes: 0

Related Questions