AJAX via Unordered List (Dropdown menu)

0
votes

I want to know if i can tranfer a value to my ajax/php call, without using forms/select. Can it be done through an ul or li ?

My code:

<script>
function showUser(str)
{
    if (str=="")
    {
        document.getElementById("activities").innerHTML="";
        return;
    } 
    if (window.XMLHttpRequest)
    {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("activities").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","branch.php?q="+str,true);
    xmlhttp.send();
}
</script>
<nav class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-list"></i><span id="Branch">&nbsp;Activites</span></a>
    <ul class="dropdown-menu">
        <li>Option1</li>
        <li>Option2</li>
        <li>Option3</li>
        <li>Option4</li>
    </ul>
</nav>

Select menu is working, but i want a menu like this: http://twitter.github.com/bootstrap/components.html#dropdowns

<select onchange="showUser(this.value)">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
<option value="Option4">Option4</option>
</select>
1
phpjavascriptajaxhtml

1 Answers

2
votes

Consider using jQuery to speed up your development, but until then you can use something like

<ul id="myMenu">
  <li>content</li>
  ...
</ul>

<script>
document.getElementById('myMenu').addEventListener('click', function(event) {
  if ('li' != event.target.tagName) {
    return;
  }

  var str = event.target.innerText;
  showUser(str);
}, false);
</script>

Ofcourse using jQuery would be neater

$("#myMenu > li").click(function (ev) {
  var str = $(this).html();
  showUser(str);
});