Jump to content

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


Federico
 Share

Recommended Posts

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

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 by kongondo
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...