Hi,
I’ve created a custom widget and I’m using cs.link to generate a link to a popup page. I’ve added this link to an anchor element, and have added the same classes and attributes that a popup link added from the page builder would have.
However, when I click the link, the popup page is being opened twice. Does anyone know what might be causing this to happen?
Thanks, Ewan
Hi Ewan,
I seem to recall spending quite a bit of time getting my head around this. I ended up firing an event from the anchor:
<a href="#" v-on:click="popup_page($event, ent.id)">
(ent.id was a loop I had - so basically you just need the context record id, if it’s relevant to you) I then had a function in my frontend.js to pop the page up:
popup_page:function(e, id) {
if (this.linkTo == null) return;
var url = this.linkTo + "?context_record_id=" +id;
console.log ("url is " + url);
e.preventDefault();
new mats.system_modal_popup(url, {
cancel_text: "Close"
});
return false;
}
The linkTo is:
'/popup/' + widget.get_setting('link_to').substr(3).replace(/^0+/, '');
where link_to is a reference to the popup page grabbed from the following in get_settings:
link_to:{
main_label:'Link To Popup page',
base_format:"choice",
choices:cs.build_choices('page', {type:['popup']}),
},
I don’t recall what was for which issue, but it sounds like you may be missing the e.preventDefault() or return false.
Thank you Richard, this has worked perfectly.
Do you know if there is a detailed reference anywhere for the base formats that can be used in the get_settings function?
Hi Ewan,
I don’t believe there is formal documentation (it’s on the to-do list), so I keep a note as I come across them. My list is currently:
Richard
Upon further testing, I have noticed that the popup isn’t working when there is no logged in user on the webpage and it gives a 403 forbidden error. Do you know what could be causing this?
Is it a public web page or an authenticated one?
It’s an authenticated one
Can you F12 and capture the network traffic giving you the error
Ah, I never used my code on a web page. The context record ID is a bit different there - webpage_context_record_id rather than just context_record_id. You will have to alter the code so it puts out the right thing - not both (the query string syntax is actually bad with two ? in it.
I would guess it is changing the line:
var url = this.linkTo + "?context_record_id=" +id;
to
var url = this.linkTo + "?webpage_context_record_id=" +id;
but you do need to check the url that is listed in detective to ensure it is not there twice
so should be:
....514EEDBE1?webpage_record_id=12345
I’ve tried this change to webpage_context_record_id, but now it doesn’t seem to work regardless of whether I’m logged in or not, it just gives a Citizen Hub application error.
Does there need to be some sort of webpage hash or token that gets added to the link so that it works on an authenticated webpage?
After adding a normal popup link to the page and viewing the request that was being sent I was able to solve this.
The issue was being caused by a webpage_token and the webpage_subpage_id not being in the request I was sending.
To get these details in the url, I’ve used cs.link and added the record ids in the parameters (where caseID is the base ID of the authenticated webpage, and collectionID is the base ID of the popup page):
var linkTo = cs.link(widget.get_setting('link_to'), {
'context_record_id': collectionID,
'webpage_context_record_id': caseID
})
And then I just replace part of the page ID with the popup path:
linkTo = linkTo.replace('PAG0000','popup/')
This generates the correct URL and when I pass it into mats.system_modal_popup it now works perfectly.