I created a content template with a user interface that a user can arrange the names of people in a photograph. These photograph and player names are taken from a custom post type.
Here is an example:
hidden link
Functionality works fine. I created this with the ultimate goal to use a CRED form for the user to update the database with the arranged names. (if you use the content template provide on the link, you'll understand better)
When I add the CRED form to the content template, all functionality is broken - user is unable to click and drag the name tiles.
I don't expect you to work through my code on the template, but just an explanation as to why this is breaking the code would be great for my own research.
Thanks in advance.
Most probably a JS library conflict.
I would begin to debug it like this:
1. Does the issue also persist with a WordPress Default Theme and NO Plugins BUT the Toolset Plugins?
2. Check the Console for errors, still on a very minimal environment
3. Check how your Code constructs functions in the JS.
Are you clearly using jQuery namespaces, or $?
WordPress will make trouble if you use $
https://toolset.com/documentation/user-guides/adding-custom-javascript-views/
4. Where and how do you pass the custom code?
5. How is the CRED Inserted, does it hold other JS in the CRED?
I think, having a close look at the Chrome or Firebug console will show you what's conflicting.
Then we can have a look if CRED is the Culprit here.
Also, what might be a useful test, is see if the Content Template is problematic.
If you have a chance to create the Page without any Content Template, and insert the CRED + your Custom Code, to see if then it works, that would be great.
Hi Beda,
Awesome and thorough reply. Thankyou so much. Hopefully we can figure this out.
1. I flicked to the default theme and removed all plugins except Toolset. NOT RESOLVED.
2. Errors on console are not present.
3. My JS/JQuery code is using '$' instead of namespaces - (i'm pretty new to coding, so this seems like a big job to change - '$' seems to work perfectly with the content template when CRED is not present)
4. Code is in the JS section of the content template.
5. CRED form is inserted directly into the content template.
Just a note. I use the jquery.ui library which handles all the click and drag functions. This is what seems to 'turn off' when I insert the CRED form. The page renders perfectly without errors, and looks like way it should prior to the CRED insert, but the click and drag functionality seems to not work.
Also - the CRED form does basically what I expect it to do (for now) - it updates the post description - They just don't work together.
Did you see the link I provided? if you click the link, I have left the CRED form inserted so you can see what I mean by breaking click and drag code.
Thanks again.
PS. Would creating a wordpress/php function that updates the current post description with the contents of the output-box on a button press be easier and remove the need for the CRED insert?
Jon
When you use JS in the WordPress or Toolset, you have to use jQuery namespace.
You may define a function($) and use $ later, but I always suggest to be on the safe side.
This avoids major conflicts.
It is strange there are no errors, as such a conflict must almost certainly produce errors.
You might want to use Chrome or FireBug, they give more info.
Sometimes, Safari can be a good debugger too, depends on the Error.
Does it make a difference where you insert the CRED?
(Begin, end, middle of Content Template Code)
Maybe a Custom PHP or AJAX solution here is easier to use, if this Conflict can not be solved.
But a conflict should genrate some sort of error.
And with that, you coudl further debug your Code.
BTW; CRED also uses jquery.ui (for date pickers mainly) and it could be a version conflict
http://stackoverflow.com/questions/4214551/using-different-versions-of-jquery-and-jqueryui-together
Great advice,
I inserted the CRED form shortcode at the beginning of the content template, as opposed to the end and the functionality has returned. Are you able to explain why it makes a difference?
PS. I always use Chrome and I have not observed any errors on the console in relation to this issue.
Hey Beda,
The conflict is fixed, but can you please give me some advice as to how to copy the contents of the DIV "output-box" into the CRED post-content field.
I understand an action/function is the way to go and perhaps hide the CRED field on the form.
Thanks
Why it works when you add the CRED in another place is because of when the JS is loaded.
It seems it's a issue of priorities.
There is a "weird" issue with CRED in Views, where you sometimes can solve problems by simply put the CRED before or after certain other content.
It does not even need Custom Code to make those problems appear, but I will not go into detail here as it requires quiet complex setups with multidimensional Views and CREDs, to make it happen.
We are aware of this problem and some are already solved, whiel other need more insight (I am trying to find a pattern to provide a easy "how to reproduce" instruction, so the DEV can look at it)
So once we solve it, it might very well be that your problem also woudl be solved, but I can at no means state any ETA, other than it will take a while, as it's involving very uncommon Toolset Usage.
Regarding this:
"Can you please give me some advice as to how to copy the contents of the DIV "output-box" into the CRED post-content field.
I understand an action/function is the way to go and perhaps hide the CRED field on the form."
You may find the CRED API useful.
If you can get the contnet of "output-box" via PHP when you submit the Form or update the Post you can use the CRED API As illustrated here:
https://toolset.com/documentation/user-guides/cred-api/
Otherwise you might need to use Custom JS to update the Field BEFORE you even submit the Form.
This is not supporte by CRED natively though.
