pass a href link value as variable to ajax

Question

is it possible to pass the link value of a hyperlink to ajax?

I'm quite new in this branch so maybe I'm doing actually wrong

so I would like to achieve the following:

echo '<ul><li class="all">alle</li>';     

foreach(range('a','z') as $i):{

echo '<li class = "searchAbc"><a class="button" href="#"/>'.$i.'</a></li> </ul>';

}
endforeach;

than the ajax

function ajax_abc() {
     var url = 'index.php?option=com_glossary&task=abc';
     var abc= $(this).attr('href');

//     data = 'format=raw'+ '&'+'val=' + $("#search").val();
     data = 'val=' +  abc + '&' + 'format=raw';






$(document).ready(function(){

   function showLoader(){

        $('.search-background').fadeIn(200);

    } 


   function hideLoader(){

        $('#sub_cont').fadeIn(1500);

        $('.search-background').fadeOut(200);

                        };

  $(" li.edit a").click(function(){



        ajax_redirect();

                });


  $(".searchBtn").click(function() {

                 ajax_search();

                });



 $('#search').keyup(function(e) {

                if(e.keyCode === 13) {


                ajax_search();
                }
                });

function ajax_search(search) {

     var url = 'index.php?option=com_glossary&task=getvalues';

     data = 'val=' +  $("#search").val() + '&' + 'format=raw';

            $('#sub_cont').fadeIn(1500);
     showLoader();





     $.ajax({
     type: "GET",
     url: url,
     data: data,
     success: function(data) {

     hideLoader();

     $('div.default_order').hide;
     $('#sub_cont').html(data);






   }
  }); // ajax

}


  function ajax_abc(abc) {

    var url = 'index.php?option=com_glossary&task=abc';
    data = 'val=' +  abc + '&' + 'format=raw';


  //... Add jQuery.load() codes here ...

     $.ajax({
     type: "GET",
     url: url,
     data: data,
     success: function(data) {

     hideLoader();

     $('div.default_order').hide;
     $('#sub_cont').html(data);






   }
  }); // ajax



    }


   $(".stripeMe tr").mouseover(function(){$(this).addClass("over");}).mouseout(function(){$(this).removeClass("over");});
   $(".stripeMe tr:even").addClass("alt");

});

Answer 1

do you mean something like this?

$('a.button', 'li.searchAbc').click(function(){
    var url = 'index.php?option=com_glossary&task=abc';
    var abc = $(this).attr('href');
    var ajaxParam = {
        val: abc,
        format: 'raw'
    };

    $.post(url, ajaxParam, function(result){
        //process result
    });

    // or using GET
    /*
    $.get(url, ajaxParam, function(result){
        //process result
    });
    // */

    return false;

})

note: attribute href of your <a> tag is '#'.

Answer 2

In my case this worked form me !!

        function deleteImage(data1,data2){
            $.ajax({
               type: "POST",
               url: "remove_unwanted_files.php",
               data: "nameImage="+data1+"&idImage="+data2,
               success: function(msg){
                alert( "Data Saved: " + data1 + " " + data2);

                            //Code for Anything you want

               }
             });

Answer 3

Ok try something like the following

Change

    echo '<li class = "searchAbc"><a class="button" href="#"/>'.$i.'</a></li> </ul>';

to

    echo '<li class = "searchAbc"><a class="button" href="#" onClick="ajax_abc(\''.$i.'\')"/>'.$i.'</a></li> </ul>';

Then put in your javascript

    function ajax_abc(abc) {

    var url = 'index.php?option=com_glossary&task=abc';
    data = 'val=' +  abc + '&' + 'format=raw';

    //... Add jQuery.load() codes here ...

    }