I pull out from the base (the site on joomla) in the links the headlines of the last 10 news. For links I prescribe a class, for example, title. It is necessary to do so that when you click on a link without reloading, the full news of the corresponding title is loaded. How to implement it on ajax in asynchronous mode?

  • And what is the problem? You transfer to the handler via ajax, say, the article id, get the article pulled out from the database and place it in the necessary block. There are more articles about this in the internet than parnuhi. )) - Deonis
  • We look here - Deonis
  • How can I get the value of its id parameter when clicking on one of the links? <a id="1" class="title"> Link 1 </a> <a id="2" class="title"> Link 2 </a> <a id = "3" class = "title" > Link 3 </a> <a id="4" class="title"> Link 4 </a> - vinnie
  • one
    I came here for help, not for sending me to look for this information on the Internet. - vinnie


2 answers 2

Well ... Help and “do it for me” are different things. Okay, your business.

How can I get the value of its id parameter when clicking on one of the links?

See an example here.

Js

window.onload = function(){ var elem = document.getElementsByClassName('title'), i = elem.length; while(i--){ elem[i].onclick = function(i){ return function(){ alert( this.id ) }; }(i); } };

HTML

 <a id="10" class="title">Статья про Ajax</a><br /> <a id="30" class="title">Статья про JavaScript</a><br /> <a id="100500" class="title">Статья про еще что-то</a>

Only instead of alert (), we pass the parameter to the function that sends the ajax request. Further, see an example in the article.

    With jQuery:

     <a href="/article/1" class="title">Статья про Ajax</a> <a href="/article/2" class="title">Статья про JavaScript</a> <a href="/article/3" class="title">Статья про еще что-то</a> <div id="content"></div> <script> $(document).ready(function(){ $('.title').click(function(){ $.ajax({ url: $(this).prop('href'), data: {}, success: $('div.content').html, onerror: $('div.content').html }); return false; }); }); </script>

    To get the id attribute of the tag with the title class, use the construct:

     <a href="" id="1">Link</a> <script> $(document).ready(function(){ $('.title').click(function(){ var id = $(this).prop('id'), }); }); </script>

    Well, in general it is worth saying that implementing ajax on bare js should not be attempted. In the internet there are a lot of libraries. Learn and use.