23

I want to pass <li> id or value in onclick event. here is my exiting code.

<li onclick="getPaging(this.value)" id="1" value="1">1</li>
<li onclick="getPaging(this.value)" id="2" value="2">2</li>

here is the javascript code

function getPaging(str)
{
$("#loading-content").load("dataSearch.php?"+str, hideLoader);
}
Zuul
  • 15,767
  • 6
  • 58
  • 86
Sasindu H
  • 1,430
  • 7
  • 24
  • 40
  • 1
    If you're going to use jQuery, there is no excuse/reason to have javascript in your markup. All of your events should be attached outside of the HTML. – Justin Johnson Jun 08 '11 at 09:47
  • @JustinJohnson But why? using onclick seems much more natural and convenient. – Dmitry Ryadnenko Aug 28 '15 at 07:04
  • @nickes TLDR: because of separation of concerns. Here's a couple reasons off the top of my head. Intermingling behavior (JS) with content (HTML) might seem convenient, but in projects of non-trivial size, it quickly becomes a detriment. It creates a mess when attaching event handlers of multiple types. It often forces you into storing state in the DOM. http://stackoverflow.com/q/5871640/126562 – Justin Johnson Aug 30 '15 at 06:43

4 Answers4

27

Try like this...

<script>
function getPaging(str) {
  $("#loading-content").load("dataSearch.php?"+str, hideLoader);
}
</script>

<li onclick="getPaging(this.id)" id="1">1</li>
<li onclick="getPaging(this.id)" id="2">2</li>

or unobtrusively

$(function() {
  $("li").on("click",function() {
    showLoader();
    $("#loading-content").load("dataSearch.php?"+this.id, hideLoader);
  });
});

using just

<li id="1">1</li>
<li id="2">2</li>
mplungjan
  • 134,906
  • 25
  • 152
  • 209
Anish
  • 2,859
  • 1
  • 18
  • 40
  • Thanks for the answer. However, I would look into using [HTML data-* Attributes](https://www.w3schools.com/tags/att_global_data.asp) instead of "id". – Pranav Shah Aug 21 '18 at 16:07
11

<li>s don't have a value - only form inputs do. In fact, you're not supposed to even include the value attribute in the HTML for <li>s.

You can rely on .innerHTML instead:

getPaging(this.innerHTML)

Or maybe the id:

getPaging(this.id);

However, it's easier (and better practice) to add the click handlers from JavaScript code, and not include them in the HTML. Seeing as you're already using jQuery, this can easily be done by changing your HTML to:

<li class="clickMe">1</li>
<li class="clickMe">2</li>

And use the following JavaScript:

$(function () {
    $('.clickMe').click(function () {
        var str = $(this).text();
        $('#loading-content').load('dataSearch.php?' + str, hideLoader);
    });
});

This will add the same click handler to all your <li class="clickMe">s, without requiring you to duplicate your onclick="getPaging(this.value)" code for each of them.

David Tang
  • 86,742
  • 28
  • 159
  • 145
2

I prefer to use the HTML5 data API, check this documentation:

A example

$('#some-list li').click(function() {
  var textLoaded = 'Loading element with id='
         + $(this).data('id');
   $('#loading-content').text(textLoaded);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id='some-list'>
  <li data-id='1'>One </li>
  <li data-id='2'>Two </li>
  <!-- ... more li -->
  <li data-id='n'>Other</li>
</ul>

<h1 id='loading-content'></h1>
fitorec
  • 2,547
  • 2
  • 15
  • 12
1

Try this:

<li onclick="getPaging(this.id)" id="1">1</li>
<li onclick="getPaging(this.id)" id="2">2</li>


function getPaging(str)
{
    $("#loading-content").load("dataSearch.php?"+str, hideLoader);
}
Hasan Fahim
  • 3,817
  • 1
  • 27
  • 51