Hi,
I have table with some records I want to update or delete. I have separate snippet to delete record (by $_POST) and snippet to update record.
What is the best method to run selected snippet by button?
So far I only came with separate form for each line and each button. That makes a lot of forms on page which doesnt seems right…
Use Javascript to make the request when a button is clicked.
Can you please write a sample code?
It’s hard to give some specific sample code because I lack all the necessary information.
But if for example you decide to use jQuery for your site, then you could add a click-handler to the buttons with code like
$(".my-button-class").click(function() {
...
});
and then in the function use $.post(...) or $.ajax({ type: "POST", ...}); to make the request.
This is all Javascript (and independent of MODX) and there are a lot of sources on the internet with example code.
Doest it mean to have on each table line one javascript request?
<tr><td><button class="my-button-class">Delete</button>
<javascript>
$(".my-button-class").click(function() {
value1= 3; value2 ="name"...
});
</javascript></td></tr>
<tr><td><button class="my-button-class">Delete</button>
<javascript>
$(".my-button-class").click(function() {
value1= 4; value2 ="age"...
});
</javascript></td></tr>
You could create a specific function for every button. But then you have to give the button a specific ID and use that for the handler ( → $("#my-button-id").click(function() { ... });)
But it’s usually simpler to have one function and then collect the data using $(this) (a reference to the clicked button) in the function.
For example in this code, the value of the data attribute data-id of the clicked button gets logged:
<tr><td><button data-id="1" class="my-button-class">Delete</button></td></tr>
<tr><td><button data-id="2" class="my-button-class">Delete</button></td></tr>
<script>
$(".my-button-class").click(function() {
console.log($(this).data("id"));
});
</script>
If you’re looking to run your Update and Delete snippets when the buttons are clicked, I think you’ll need to set up a page for each snippet to use as your AJAX / XMLHttpRequest target.
So create a page, Update Page and in there run just [[!your-update-snippet]]
And in your new Delete Page, run only [[!your-delete-snippet]]
Now you can use Javascript or JQuery to run these snippets on the fly, when the button is clicked.
Why not just put both snippets on same page as buttons?
If you add your snippets [[!your-update-snippet]] [[!your-delete-snippet]] to the page where the buttons are, those snippets will be executed once, when that page is loaded.
If I understand your question, you need the snippets to run every time the buttons are clicked.
This can be achieved by making a listener in Javascript for each your buttons as @halftrainedharry suggested - and then telling Javascript to send the record ID of your item to either the Update or Delete page.
Your snippets will update / delete the record as required and you’ll likely want them to send back a response with new HTML to update your table of items on the fly.
If you’re already using JQuery, you can do this using a JQuery AJAX call.
Or you can use plain Javascript.
Ok, I understand, but thats not what I want. I need to stay on the same page and maybe reload the page . Thats why I used forms…
AJAX requests happen in the background - so although you’d be requesting info from another page [Update or Delete], that exchange would happen in the background and you’d stay on the original page with your table of items.
Only your table of items would change, with the updated information.
Your Update and Delete pages would never be seen by the user and you wouldn’t have to reload the page.