CODEWITHSUNDEEP
jquerytypo3fluidtypo3-6.2.x
Cold_Class
Cold_Class

Reputation: 3504

Add a dynamic parameter to <f:link.action>

EDIT: I made some changes to my question because I had the feeling I didn't make it clear what I'm trying to do - hopefully it makes more sense now.

I have a list of appointments that is grouped by their date and then by their lawyer.

My goal: I need a delete button next to each lawyer that deletes all the appointments of a lawyer on a specific date AND sends an e-mail to the lawyer after showing a dialog where the user can insert an optional info-msg.

Everything except the bold part already works.

When clicked I create a dialog with jQuery.
enter image description here
How do I get the info of the appointments (Lawyer and Day) in the dialog?

I tried to work with a form in my dialog, it seems fine but I still don't know how to insert the lawyer name and date in there and the appointments are not passed to the controller anymore, only the optional msg.

Here's my attempt after the first feedback of you guys (not working - appointments aren't coming through to the controller and I still don't know how to make the clicked lawyer's name and appointments' date appear):

<sp:groupedForDateTime each="{paginatedAppointments}" 
                       as="appointmentsByDay" 
                       groupBy="startDate"
                       format="d.m.Y"
                       groupKey="startDate">
Termine am {startDate->f:format.date(format:'d.m.Y')}
<f:groupedFor each="{appointmentsByDay}" 
              as="appointmentsByLawyer" 
              groupBy="lawyer.fullName"
              groupKey="lawyerName">
   <f:link.action class="lcapp-delete-link" action="deleteMultiple" arguments="{appointments: appointmentsByLawyer}">
     Termine löschen
   </f:link.action>
</f:groupedFor>
</sp:groupedForDateTime>

//How do I get information into the div after clicking on a "lcapp-delete-link"?
<div style="display:hidden">
<div id="lcapp-dialog-delete-msg" class="lcapp-dialog-delete-msg">
<f:form action="deleteMultiple" method="post" id="messageForm">
    //<h2>Termine für !!(Lawyer clicked: ){lawyer.fullName}!! am !!(Corresponding date: ){startDate->f:format.date(format:'d.m.Y')}!! löschen</h2>
    <p>Begründung (optional)</p>
    <f:form.textarea id="msg" name="msg"/>
</f:form>
</div>
</div>

<script>
$(document).ready(function (r) {
  $('.lcapp-delete-link').click(function (ev) {
    ev.preventDefault();
    ev.stopPropagation();
    var goto = this.href;

    $('.lcapp-dialog-delete-msg').dialog({
        resizable: false,
        height: 500,
        width: 430,
        modal: true,
        buttons: {
            'Löschen und Benachrichtigen': function () {
                $('#messageForm').attr('action', goto).submit();
            },
            'Abbrechen': function () {
                $(this).dialog("close");
                $(this).dialog("destroy");
            }
        }
    });
  });
});
</script>

Upvotes: 0

Views: 713

Answers (2)

Dimitri Lavren&#252;k
Dimitri Lavren&#252;k

Reputation: 4889

You should build a proper extbase form with <f:form action=""> and the message field inside.

<div id="lcapp-dialog-delete-msg" class="lcapp-dialog-delete-msg">
  <f:form action="deleteMultiple" method="post" id="messageForm">
    <h2>Termine für am löschen</h2>
    <p>
        Begründung (optional)
    </p>
    <f:form.textarea id="msg" name="msg"/>
  </f:form>
</div>

Then you can modify its action argument with jQuery and submit it. Since the urls of your delete links is build with a proper cHash there won't be any problems submitting the form.

$('.lcapp-delete-link').click(function (ev) {
    ev.preventDefault();
    ev.stopPropagation();

    var clicked = $(this);
    var goto = clicked.attr('href');
    $('.lcapp-dialog-delete-msg').dialog({
        resizable: false,
        height: 500,
        width: 430,
        modal: true,
        buttons: {
            'Löschen und Benachrichtigen': function () {
                $('#messageForm').attr('action', goto).submit();
            },
            'Abbrechen': function () {
                $(this).dialog("close");
                $(this).dialog("destroy");
            }
        }
    });
});

PS: you can use native JS to get the href of a link instead of jQuery what should lead to better performance:

// instead of
var goto = clicked.attr('href');
// you can use
var goto = this.href;

Upvotes: 1

Matthias Secker
Matthias Secker

Reputation: 116

If you want to modify or delete objects you should use HTTP-POST instead of GET. Therefore you can have a small form and submit the textarea. Don't forget to mention your field as an argument in your "deleteMultiple" action.

To prefill your textfield you can use the value attribute of the textfield viewhelper. (https://fluidtypo3.org/viewhelpers/fluid/master/Form/TextareaViewHelper.html)

Upvotes: 2

Related Questions