Refresh an InputfieldPage element by javascript

[SebastianP]

Hi, 

I'm wondering if it's possible to refresh an InputfieldPage element by javascript.  Background: I use an InputfieldPage element (PageListSelectMultiple) to add properties to a page. Some pages have 20+ properties, so it's a long way and many clicks to add them. That's why I've created a page with an own template, which shows all properties at once as checkboxes. This page is opened as a popup and saves the selection of the properties for the current page. But when I close the popup, the InputfieldPage element of course not shows changes of the properties. Is there a way to refresh the InputfieldPage element from the popup by javascript, by example:

top.opener.document.getElementById("MyInputfieldPageElement").refreshFunction...

Thank you, sincerely

Sebastian

 

[kongondo]

Yes it is possible. Example here from the Blog module. Where you put the code, though, depends on your setup. This page being opened via a popup, is that a normal page or some module's page?

[SebastianP]

Thank you for the suggestion! The page in the popup is a normal page (the checkboxes are created via the API). I've had alllready in mind to reload the entire page, but if there are unsaved changes... The website is edited by several people -  I always have to fear the worst;-). That's why I wan't to refresh only the one field. 

[kongondo]

I get you now, my bad. If you want to avoid reloading the whole page, then the only way to refresh only 1 field is via Ajax. I did something similar on some custom Fieldtype (for a client), although not triggered via a modal. In this case though you will be refreshing a page field..specifically a PageListSelectMultiple. Hmm. Doing it via a modal seems to be the secondary issue here. How to do it in the first place, is the main thing . Maybe if you looked at how that field is normally populated by ProcessWire, that can give you an idea. If you can send JSON (or XML), then it's just an issue of telling jQuery (or raw JS) how to rebuild that PageListSelectMultiple. 

Maybe I am not thinking this through properly. There could be other ways. I'm having a very slow Monday ..can't think clearly.

[Robin S]

7 hours ago, SebastianP said:

Background: I use an InputfieldPage element (PageListSelectMultiple) to add properties to a page. Some pages have 20+ properties, so it's a long way and many clicks to add them.

Yes, that would get tedious with PageListSelectMultiple. But can't you substitute a different inputfield?

You say you are using checkboxes in your modal page: checkboxes are an inputfield option for Page Reference fields, so can't you just use checkboxes directly in your Page Reference field?

[SebastianP]

Solved!

13 hours ago, Robin S said:

You say you are using checkboxes in your modal page: checkboxes are an inputfield option for Page Reference fields, so can't you just use checkboxes directly in your Page Reference field?

The properties which can be added by the InputfieldPage have a hierachical structure (page with subpages with subpages and so on) - that's why I can't use checkboxes directly. 

But at last it was very easy to solve the problem:-)

First step: In the PageListSelectMultiple element you can find a hidden list item with the class "itemTemplate". This element can be cloned, prepared with the new data (id, label) and apended to its parent element.

Second step:  In the PageListSelectMultiple element you can find an input element with the id "Inputfield_YOUR_FIELD_NAME"; its value hold the ID's of the selected pages as a comma separated string. This value must also be updated.  That's all:-) 

Here are my script to do the steps above: 

// get the selected properties for my page via ajax
$.post("my_ajax_file", {"page_id": "my_page_id"}, function(success){
		if(success){
			var json = JSON.parse(success); // create json from string
			var id_string = ""; // holds the id's for field value
			var ol = top.opener.document.getElementById("Inputfield_MY_FIELD_NAME_items"); // get the list with the selected page items
          	
			$(ol).find("li").not("li.itemTemplate").remove(); // remove all items except the template item
			for(var i in json){ // loop through json elements
				var prop = json[i]; 
				var li = $(ol).find("li.itemTemplate").first().clone(true); // get the template item and clone it	
              	li.removeClass("itemTemplate");
				li.find("span.itemValue").text(prop['prop_id']); // set new id
				li.find("span.itemLabel").text(prop['prop_title']); // set new label
				$(ol).append(li); // append to parent element
				id_string+= prop['prop_id'] + ","; // add id to comma separated string
			}
					
			id_string = id_string.substr(0, id_string.length - 1); // remove last "," 
			var input = top.opener.document.getElementById("Inputfield_MY_FIELD_NAME"); // get the field with the id string value
			$(input).val(id_string); // set the new/updated id's 
		}
	});

 

[kongondo]

Glad you sorted it out. I'm curious though, where/how are you including your script above?

[SebastianP]

19 minutes ago, kongondo said:

I'm curious though, where/how are you including your script above?

In the page opened as  a popup window (which shows the available properties as checkboxes). There are a save button and a close button; the close button executes the script above. 

[kongondo]

Sorry, wasn't clear. Where, exactly (file) is the script? Did you create a module? Did you edit a core module? Basically, how are you adding the script to your modal page. Thanks.

[SebastianP]

21 minutes ago, kongondo said:

Basically, how are you adding the script to your modal page. 

Ok, sorry - I've defined a button by the RuntimeMarkup module which opens the page by "window.open(...)". The page I open by this way has an own template and template file; there is the script located. 

Regards Sebastian

PS: Now I use "pwModalWindow(...)" instead of "window.open"; the only needed change in the script above  is "top.opener" to "window.parent". 

[kongondo]

Thanks for the explanation .

[Robin S]

Sounds like you have found a solution that works - nice one.

If I understand correctly, your options that may be selected in the Page Reference field are organised into categories according to the hierarchy in the page tree. So for example the hierarchy might be:

- colour
    - red
    - green
    - blue
- size
    - small
    - medium
    - large

But don't you end up with a situation where an editor can ignore your custom button and use PageListSelectMultiple to select the page 'colour' or 'size' instead of one of the actual option pages?

To make a more straightforward and foolproof UI you could create a custom inputfield module for the Page Reference field that organises the checkboxes the same as you are doing in the modal front-end page. It's not as difficult as you might think because as you found it's only the value of the hidden input that matters when it comes to submitting the form.