Using dynamic links to trigger ajax

Question

I have a couple of links that I want to trigger operations through ajax from, but I dont know how to continue on this matter. I've kind of solved it for static links but my links are dynamic and there will be different amount of links at different stages.

I have a index.php that looks like this:

<script src="../jquery-3.1.0.min.js"></script>
<script>
$(document).ready(function() {
  $("#link1").click(function(e) {
     e.preventDefault();
     $('#result').empty().text('Executing command...'); 
     $('#result').load('ajax.php?op=edit&id=4', function(){         
        $('#result').before("The server answered:");
        $('#result').after("The operation was a success<br>");
    }); // end load
  }); //end click
}); //end ready()
</script>

<div id='result'></div>
<a id='link1' href='#'>Link 1</a><br>
<a id='link2' href='#'>Link 2</a><br>
<a id='link3' href='#'>Link 3</a><br>
<a id='link4' href='#'>Link 4</a><br>
<a id='link5' href='#'>Link 5</a><br>
<a id='link6' href='#'>Link 6</a><br>

And the "ajax" file looks like this:

<?php
if(isset($_GET['op']) && isset($_GET['id'])) {
    $op = $_GET['op'];
    $id = $_GET['id'];
    switch($op) {
        case "edit":
            // do operations here
            echo $id;
            break;
        case "doSomethingElse":
            // do other operations here
            echo $id;
            break;
    }
}
?>

So what I struggle with now is: How do I solve this so I don't have to define each link within the jquery ready() function?

Edit: Basicly I need to trigger an operation in the ajax.php file depending on what link I click.

Any ideas?

This is a little confusing, are you just asking how to concatenate the ID into the URL, or how to make the event handlers work with dynamic elements (event delegation) ? — adeneo
– adeneo, Commented Jul 27, 2016 at 9:44
You need to take a step back from this first and take note of what the common logic is between the button click actions is and then write the code to repeat that action. You've not really given enough information for someone to help you - we need to see a couple of example of the requests you're sending to see what's the same/different between them — Rory McCrossan
– Rory McCrossan, Commented Jul 27, 2016 at 9:45
I'm sorry, I thought I could add one question in the end and ask both. I'll go ahead and remove it. — DaveLar
– DaveLar, Commented Jul 27, 2016 at 9:45
Possible duplicate of Get parameter values from href in jquery — jeanj
– jeanj, Commented Jul 27, 2016 at 9:46
@RoryMcCrossan I'm new to this ajax technology. I don't understand what you're asking for. I was under the impression that "$('#result').load" was the ajax call — DaveLar
– DaveLar, Commented Jul 27, 2016 at 9:49

Satpal · Accepted Answer · 2016-07-27 09:46:42Z

1

I would recommend, You to use data-* prefixed custom attributes to store arbitrary information with the element which can be used later.

<a class='link' href='#' data-key="1">Link 1</a>

Then using your existing click handler, You can use Element.dataset property to access the data. Using jQuery the same result can be achieved using .data('key') method.

$(document).ready(function() {
  //Use common class to bind the event handler
  $(".link").click(function(e) {
    var id = this.dataset.key;
    e.preventDefault();
    $('#result').empty().text('Executing command...'); 
    $('#result').load('ajax.php?op=edit&id='+id, function(){         
        $('#result').before("The server answered:");
        $('#result').after("The operation was a success<br>");
    }); // end load

  }); //end click
}); //end ready()

answered Jul 27, 2016 at 9:46

Satpal

134k13 gold badges168 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jayesh Chitroda · Accepted Answer · 2016-07-27 09:45:54Z

1) Add class to each link

2) Take click event for that class

$(".lnk").click(function(e) { // take click event for link
     e.preventDefault();
     var id = $(this).attr("id").match(/\d+/); // get integer value from id so you will get id
     alert(id)
     $('#result').empty().text('Executing command...'); 
     $('#result').load('ajax.php?op=edit&id='+id, function(){         
        $('#result').before("The server answered:");
        $('#result').after("The operation was a success<br>");
    }); // end load
  }); //end click

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='result'></div>
<a id='link1' href='#' class="lnk">Link 1</a><br>
<a id='link2' href='#' class="lnk">Link 2</a><br>
<a id='link3' href='#' class="lnk">Link 3</a><br>
<a id='link4' href='#' class="lnk">Link 4</a><br>
<a id='link5' href='#' class="lnk">Link 5</a><br>
<a id='link6' href='#' class="lnk">Link 6</a><br>

Julien · Accepted Answer · 2016-07-27 09:50:02Z

0

You can map events to dynamically loaded elements with on :

$("#staticParentContainer").on("click", "#dynamicElement", function() {
    // up to you
});

see http://api.jquery.com/on/

answered Jul 27, 2016 at 9:50

Julien

2,7662 gold badges35 silver badges47 bronze badges

Comments

Yosvel Quintero · Accepted Answer · 2016-07-27 10:08:56Z

0

You can use jQuery starts with attribute selector:

$('[id^="link"]')

$('[id^="link"]').click(function(e) {
  e.preventDefault();
  console.clear();  
  console.log('$(this).html():', $(this).html());
  // Your code...
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<div id='result'></div>
<a id='link1' href='#'>Link 1</a><br>
<a id='link2' href='#'>Link 2</a><br>
<a id='link3' href='#'>Link 3</a><br>
<a id='link4' href='#'>Link 4</a><br>
<a id='link5' href='#'>Link 5</a><br>
<a id='link6' href='#'>Link 6</a><br>

edited Jul 27, 2016 at 10:08

answered Jul 27, 2016 at 9:48

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

Comments

Adam Azad · Accepted Answer · 2016-07-27 09:47:21Z

-1

Try this selector;

$('[id^="link"]')

$(document).ready(function() {
  $('[id^="link"]').click(function(e) {
     e.preventDefault();
     $('#result').empty().text('Executing command...'); 
     $('#result').load('ajax.php?op=edit&id=4', function(){         
        $('#result').before("The server answered:");
        $('#result').after("The operation was a success<br>");
    }); // end load
  }); //end click
}); //end ready()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div id='result'></div>
<a id='link1' href='#'>Link 1</a><br>
<a id='link2' href='#'>Link 2</a><br>
<a id='link3' href='#'>Link 3</a><br>
<a id='link4' href='#'>Link 4</a><br>
<a id='link5' href='#'>Link 5</a><br>
<a id='link6' href='#'>Link 6</a><br>

answered Jul 27, 2016 at 9:47

Adam Azad

11.3k5 gold badges31 silver badges74 bronze badges

1 Comment

DaveLar Over a year ago

Excellent answer my friend!

Collectives™ on Stack Overflow

Using dynamic links to trigger ajax

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related