Ajax and the panel window (but also the modal one)

[Federico]

Hi there,

no post all over the forum, which seems strange to me given the relevance. I have a custom admin process module with a need of displaying in panel window the form submitted values trough ajax.

in essence the pw-panel and pw-modal windows when opened they only read non-ajax conditional, therefore the following code in pw-panel will output only "no ajax"

$out .= '';
if ($this->wire('config')->ajax) {
  foreach($this->input->post->ClickedRepeaterID as $key => $value){
    $p = $this->pages->get($value);
    $out .= $p->title;
    $out .= "yuppy, Ajax here!";
  }
}
else{
  $out .= "I am afraid, no ajax here";
}
return $out;

 Do I miss something?

thank you very much

[BitPoet]

6 hours ago, Federico said:

in essence the pw-panel and pw-modal windows when opened they only read non-ajax conditional

I might be misunderstanding your issue, but it sounds like you are using the pw-modal/pw-panel classes on links. In that case, the link target is loaded into an iframe, which is like a regular page visit, not an ajax call. To use ajax, you'll have to manually fire such a request somewhere using $.ajax and write the javascript code to display the returned value(s).

[Federico]

Thanks @BitPoet, I see the point of the regular page load on the iframe via data-href link. Could you be more specific on how deal with pw-panel via ajax? I think it will be useful also for others pw users.

I have this ajax call which simply returns all form values. How do you manually fire such panel/modal request via ajax?

$.ajax({
  type: 'post',
  url: "./customPage/",
  data: $("form").serialize(),
  success: function(data){
    //$("#form_book").html(value);
    //alert(buttonClickedID);
  }
});

Maybe on a success function?

[kongondo]

I also don't quite follow. I'm not sure what pw-panel is so I'll comment on pw-modal.

When you open a pw-modal, the contents of that modal are opened in an iframe as has been pointed out to you. This means, you have the parent window (the one that opened the modal) and the iframe. The iframe can open another iframe too, but let's not go there :-).

Using JavaScript, the modal and parent windows can talk to each other in our case, because they share an origin.

I am assuming, you are opening a page in your Process Module in the modal. E.g., you are in some Inputfield (editing a page), click on some link with pw-modal class whose url is /your-process-module-name/some-page/.

The modal will display the contents of /some-page/. Of more importance to you, I am guessing, is detecting ajax requests WHILST in /some-page/. Is that it? Remember, whether opened normally or in a modal window, /some-page/ will load all the assets of your Process Module. So, you should be able to fire Ajax calls from YourModule.js AND you are able to use YourModule.js to communicate with (e.g. ParentPage.js) or update markup on the parent page that opened the modal. Is this what you are after?

Sorry, I went on a bit much there, but just trying to get the gist of your question. I may be way off base here, but we'll see .

 

Edited February 24, 2018 by kongondo