Hi,
On my pet project again (green.bg).
I am submitting content via CRED forms and not getting the pop-up message when I add content via form.
I believe it has something to do with the fact that I'm using a Bootstrap Modal for the form itself, and the message uses a Modal too.
I am recording my screen for you guys so you can see better what I mean.
Please notice that when I click the button that opens the Modal with the form again after submitting the form it then opens the form and shows my message.
Screen capture here:
hidden link
Thanks for looking into this!
I'll be glad to take a look. Can you answer the following questions for me?
- How are you triggering the pop-up after form submission?
- Is your form using AJAX, or a full page refresh?
- What causes the pop-up to disappear after the "Please wait, you are being redirected" message?
Hi Christian,
- Not sure I understand the first question. If you're asking about this message "Благодарим ви, че добавихте вашата Работилница в green.bg." - I trigger this when I click the button "Нова Работилница" for the second time (after the form is submitted)
- I use AJAX submission
- It disappears automatically.
- It disappears automatically.
That's interesting. What code is in place that causes this behavior? This isn't a default behavior for CRED, so there must be some JavaScript in place that triggers the dialog to go away. Are you using CRED's front-end events somehow, or other AJAX triggers?
It's probably easiest for me to take a look in your wp-admin area. I may also need to create a clone using Duplicator so I can make changes locally without breaking your live site. If this is okay, please provide login credentials here in the private reply area.
Christian, while you're at this, could you please help me with another issue I'm facing, it is a conditional and I remember you're good at these(helped me in the past). I decided not to open a separate thread on this issue.
In my product layout I have this code:
<a class="farmer-logo" href="[wpv-post-url id="$farms"]" style="background-image:url([types field='farmer-logo' output='raw' id='$farms'][/types])"></a>
It shows the farmer logo (custom field/image) as a background on a link.
Now I have extended the functionality of the platform and have added Artisan user type with the ability to create Workshop post types. Now I'm using the same Product layout to display Products which are children of a specific Workshop, but the code above only shows the logo of the Farm, and not the Workshop logo.
I need a conditional that would show the field 'workshop-logo' when the parent post type is 'workshop' and 'farmer-logo' when the parent post type is 'farms'.
I tried searching the forums for an already answered topic and the documentation for a tip but couldn't find one.
Hi, can you give me step-by-step instructions how to see this issue? I'm not sure where to find this modal element. I tried a few things but I wasn't able to see this exact modal or button.
Sure,
This is part of the user back-end I have built, I'd like to share the user login credentials for you in a private message.
D.
Okay, private reply enabled here.
OK thanks, I'm able to replicate this now. It looks like the form submits as expected, then the page reloads with some URL parameters:
farms/farmname/?_tt=1493650076&_success_message=117_0&_target=401#cred_form_117_0
When the page reloads, the form is hidden, so you do not see the success message. I don't think this is a conflict necessarily, it's just not expected to need to display a modal by default when the page reloads. If you'd like, you can add some JavaScript that triggers the modal on page load when these URL parameters are present. In your Layouts CSS and JS editor, add the following JavaScript inside your document ready event handler:
var QueryString = function () {
// This function is anonymous, is executed immediately and
// the return value is assigned to QueryString!
var query_string = {};
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
// If first entry with this name
if (typeof query_string[pair[0]] === "undefined") {
query_string[pair[0]] = decodeURIComponent(pair[1]);
// If second entry with this name
} else if (typeof query_string[pair[0]] === "string") {
var arr = [ query_string[pair[0]],decodeURIComponent(pair[1]) ];
query_string[pair[0]] = arr;
// If third or later entry with this name
} else {
query_string[pair[0]].push(decodeURIComponent(pair[1]));
}
}
return query_string;
}();
// If the page loads with a CRED success URL parameter for form 117 then show modal
if((QueryString['_success_message'] == "117_0") && location.hash=="#cred_form_117_0"){
jQuery('#myModal2').modal();
}
OK there is some progress here, however I cannot add another product without deleting the parameters in the url and refreshing the page again, I keep getting the message from the modal when I try to add my next product.
The platform workflow will not require the admin having to approve products (as is now) in the future, so the workflow would suggest users being able to add products one after another, and the current situation with the parameters in the url does not allow this.
Also since this applies to my other forms (for example: for adding Workshops - the first screen capture I shared), I will need a way to make this function work on other forms too.
I tried using the code twice like so, but it did not work
if((QueryString['_success_message'] == "117_0") && location.hash=="#cred_form_117_0"){
jQuery('#myModal2').modal();
}
if((QueryString['_success_message'] == "367_0") && location.hash=="#cred_form_367_0"){
jQuery('#myModal2').modal();
}
Sorry I'm not very good at syntax and combining functions.. simple designer here 🙂
I'm not sure how to get to the form you showed in the 1st screen capture. Can you give me instructions?
Private reply enabled here if you need it.
Ok the reason the copied code doesn't work is that your modal elements have different IDs. I changed the code here so it should work (#myModal2 vs #myModa2):
if((QueryString['_success_message'] == "117_0") && location.hash=="#cred_form_117_0"){
jQuery('#myModal2').modal();
}
if((QueryString['_success_message'] == "367_0") && location.hash=="#cred_form_367_0"){
jQuery('#myModa2').modal();
}
This was probably just a typo when you named elements. This is why the same function does not work for you in both places.
In order to handle multiple, subsequent form submissions, I recommend making a minor change to your CRED forms. In the CRED form settings, choose "After visitors submit this form:" "Keep displaying this form". See the attached screenshot.
When you make this change, instead of overwriting your modal's content with the success message after submission, the original form will remain in place for subsequent submissions. To show your success message, you must create a new modal element somewhere else on the page. For instance, name this modal #myModal3. This modal should contain your success message. In your JavaScript code, trigger the new modal #myModal3 instead of the existing CRED modal #myModal2.
<div id="myModal3">Благодарим ви, моля изчакайте удоброение от администратор.</div>
If you have multiple form types like Products and Workshops, you can create separate modals for each confirmation message. Then you can copy and paste the code for each modal type.
Please let me know if you need additional assistance with this, and I will be glad to go into more detail.
Oh my, thanks for catching this typo, this is awesome!
However the "Keep showing this form" does not solve it for me.
I tested it and I get the Modal3 confirmation, but the form is still being populated with the data from the product that was just added, and this is not the workflow I'd like to get. Since people may or may not like to add a second product and having the form remained open is not a good idea.
Ideally closing the form and having the url parameters reset would do it.
As a solution I could redirect people to the newly added product, but this wouldn't work for now since I still need to approve new products as an admin ( and honestly I have not yet decided if it is a good idea to add products without approval, so this may not be an option at all.)
Any way that we could refresh the page and remove the parameters after closing the confirmation message modal?
Hmm.. I just tested adding a new Workshop (the modal with the typo)
But it still doesn't work.
I have renamed the modal id to "addWorkshopModal" and updated the javascript to reflect that id but it doesn't seem to work. I have also double checked for typos this time 🙂
