How to optimize my loading JQuery function?

Question

I have sidebar which contains a lot of titles. I don't want to write for all of them a function. Here is a code for one :

$("#menu_documentations").click(function () {
$("#sites").load("documentations/documentations_doc.php");
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
 });

The sidebar's id always look like "#menu_xyz" and the loading php using the same "xyz_doc.php".

How can I avoid to write one by one ?!

use a class and a data attribute for the url – madalinivascu Sep 09 '16 at 11:33 — madalinivascu, Sep 09 '16 at 11:33

madalinivascu · Accepted Answer · 2016-09-09T11:43:48.950

3

use a class and a data attribute for the url html:

<a class="load-ajax" href="#" data-url="coustom-page-name.html">Link</a>

or

<a class="load-ajax" href="coustom-page-name.html">Link</a>

js:

$(".load-ajax").click(function () {
var url = $(this).attr('data-url');//$(this).attr('href');
$("#sites").load(url);
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
 });

edited Sep 09 '16 at 11:43

answered Sep 09 '16 at 11:35

madalinivascu

32,064
4
39
55

dont forget the `event.preventDefalt()` if we use an `a` tag. – Wesley Smith Sep 09 '16 at 11:56
1

@DelightedD0D http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false – madalinivascu Sep 09 '16 at 12:00
Ah, honestly I'm so used to `preventDefault()` I didnt even notice the `return false` :) – Wesley Smith Sep 09 '16 at 13:53

score 0 · Answer 2 · answered Sep 09 '16 at 11:39

The below would work (same as madalin's except I would just use the data attribute itself to target the elements rather than adding another class):

HTML:

 <button data-get-page="documentations/documentations_doc.php">click me </button>

JS:

$(document).on('click','[data-get-page]',function() {
  var $this=$(this);
  var url=$this.data('get-page');
  $("#sites").load(url);
  $("html, body").animate({
    scrollTop: 0
  }, "slow");
  return false;
});

How to optimize my loading JQuery function?

2 Answers2