Skip Navigation

[Resolved] Unable to paste or edit JavaScript in pane without truncation

This thread is resolved. Here is a description of the problem and solution.

Problem:
When you insert Javascript holding "" signs, those get stripped out on save.

Solution:
This is expected because CRED passes the code content to the (aggressive) WordPress function wp_kses

This issue is not due to Toolset but to how WordPress wp_kses is handling "" signs.

As for the current development of Toolset 2.0.0, we think of integrating a setting which you can use at your own risk, where you could choose to allow such expressions, means, allow unfiltered code saving, for specific user Roles.

But this is not implemented as of current versions.

This support ticket is created 7 years, 11 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Tagged: 

This topic contains 8 replies, has 2 voices.

Last updated by patrickM-3 7 years, 11 months ago.

Assisted by: Beda.

Author
Posts
#380766

I am trying to: insert the following JavaScript into the JavaScript pane in a CRED

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    var paramFound = false;
  
    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
          	paramFound = true;
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
	return paramFound;
};


jQuery( document ).ready(function( $ ) {
    var post_parents = jQuery('#parents_id').val();
    var arr = post_parents.split(',');
    $("[name=_wpcf_belongs_prospect_id] > option").each(function() {
        var option_val = jQuery(this).val();
        if( jQuery.inArray(option_val, arr) == -1 && option_val != -1 ){
            $(this).remove();
        }
    });

    var promo_item_title = "";
    var requestTitle = "";
    var item_selector = "select[name=_wpcf_belongs_promo-item_id]";
    var piid = getUrlParameter('piid');
    var mkid = getUrlParameter('mkid');
    if (piid) {
        $(item_selector).val(piid);
        $(item_selector).attr("disabled", true);
        promo_item_title = $(item_selector + " option:selected").text();
        $("#promo_item_title").text(promo_item_title);
    }
    if (mkid) {
	   $('input[name=wpcf-market-id]').val(mkid);
    }
   $("select[name=_wpcf_belongs_prospect_id]").change(function () {
       requestTitle = $("select[name=_wpcf_belongs_promo-item_id]  option:selected").text() + '<span class="demphasize"> for </span>' + $("select[name=_wpcf_belongs_prospect_id]  option:selected").text() + '<span class="demphasize"> from </span>' + $("div#req_rep").text();
       $("input[name=post_title]").val(requestTitle);
   });
});

No matter what I try; editing in the pane; editing in text editor and pasting into the JavaScript pane; changing keyboards; changing browsers; the text is always truncated in the middle, between the end of the top function and the top part of the document ready statement, resulting in this:

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1)),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;
    var paramFound = false;
  
    for (i = 0; i  option").each(function() {
        var option_val = jQuery(this).val();
        if( jQuery.inArray(option_val, arr) == -1 && option_val != -1 ){
            $(this).remove();
        }
    });

    var promo_item_title = "";
    var requestTitle = "";
    var item_selector = "select[name=_wpcf_belongs_promo-item_id]";
    var piid = getUrlParameter('piid');
    var mkid = getUrlParameter('mkid');
    if (piid) {
        $(item_selector).val(piid);
        $(item_selector).attr("disabled", true);
        promo_item_title = $(item_selector + " option:selected").text();
        $("#promo_item_title").text(promo_item_title);
    }
    if (mkid) {
	   $('input[name=wpcf-market-id]').val(mkid);
    }
   $("select[name=_wpcf_belongs_prospect_id]").change(function () {
       requestTitle = $("select[name=_wpcf_belongs_promo-item_id]  option:selected").text() + '<span class="demphasize"> for </span>' + $("select[name=_wpcf_belongs_prospect_id]  option:selected").text() + '<span class="demphasize"> from </span>' + $("div#req_rep").text();
       $("input[name=post_title]").val(requestTitle);
   });
});

Huge, painful waste of time!!

#380767

The portion of the JavaScript being removed is this:

< sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');
 
        if (sParameterName[0] === sParam) {
            paramFound = true;
            return sParameterName[1] === undefined ? true : sParameterName[1];
        }
    }
    return paramFound;
};
 
 
jQuery( document ).ready(function( $ ) {
    var post_parents = jQuery('#parents_id').val();
    var arr = post_parents.split(',');
    $("[name=_wpcf_belongs_prospect_id] >

So, clearly, there is a bug that is causing the JavaScript pane to interpret greater than (<) and less than (>) symbols as HTML and is removing them from my code.

I need this problem fixed.

#380918

I can confirm the issue in CRED 1.5.2

I escalated it to the DEV team to analyze it and see if we can include an eventual fix in the coming soon CRED Release.

Please expect my informations here in the forum.

Thank you for your patience.

#380941

We pass the JS to the WordPress native function wp_kses.

This issue is not due to Toolset but to how WordPress wp_kses is handling "<>" signs.

In this case, we have a less-than sing, and later we have a greater-than sign. The filtering wp_kses function interprets this as a dangerous tag and removes it.

On CRED, we could either remove the sanitization and grant those expressions, or we keep the sanitization and strip that content.

Security for a Front End submitting Tool requires high sanitization, so we can not neglect to pass the JS to wp_kses

There is no javascript parser that we can use otherwise, like there is no universal CSS parser that we can use to sanitize the content.

We are though thinking to add a feature to CRED, which you can use at your own risk, where you could choose to allow such expressions, means, allow unfiltered code saving, for specific user Roles.

But this is not considered as a BUG instead as a feature request, and we can not include this in the upcoming release.

When exactly our developers will add a new feature or not is not up-to us Supporters to determine.
Each issue reported in, whether a bug or a new feature request, is taken seriously into consideration.
It is given a high or low priority based on a number of factors.
Factors which those with the overview of all things related are in the best position to determine.
I apologize any inconvenience this may cause.

Thank you for your patience and understanding.

#381035

This problem is happening because I'm trying to filter the options of a CRED select to display only posts where the logged in user is the author.

I have a CPT called Items, another called Prospects and another called Requests. Logged in users first, see a list of items. They can use these items as promotion items for their Prospects. First, they create a new Prospect post, using another CRED form. They are the author of their own Prospects.

Next, the look through the list of Promo Items, which are available to all logged in users. If they see an Item they want, they can fill out a CRED form to request that item - generating a new Request post.

When they're filling out the form for the new Request, I need a select input that lists all of the Prospects for which the logged in user is the author. The user chooses which Prospect his Request is for.

I cannot figure out how to display only Prospects that belong to the current logged in user, or where the current logged in user is the author.

How else can I build that select field so that it only lists, as options, those Prospects where the current logged in user is the author?

#381041

Is this using a parent / Child relation?

Are the items you need the user to let choose actually parent Posts of the currently edited / created Post?

In this case I can help with a little customization.

By default CRED parent Picker lets you choose from all available parent Posts.
This snippet lets you populate the picker with only the parent posts of the current logged in user

This is how the CRED parent Picker field HTML has to look:

<div class="cred-group cred-group-parents">
  <div class="cred-field cred-field-_wpcf_belongs_page_id">//change "page" to your parent post slug
    <label class="cred-label">
      Choose Parent
    </label>
    <input type="hidden" id="parents_id" value="[get-parents]" /> This is only for test display: [get-parents]
      [cred_field field='_wpcf_belongs_page_id' value='']//change "page" to your Parent Post Slug
  </div>
</div>

This is the JS that has to be inserted to the CRED JS Editor

jQuery('document').ready(function(){
   
var post_parents = jQuery('#parents_id').val();
   
var arr = post_parents.split(',');
     
  jQuery("[name=_wpcf_belongs_page_id] > option").each(function() { //change "page" to your parent post slug
       
    var option_val = jQuery(this).val();
       
     if( jQuery.inArray(option_val, arr) == -1 && option_val != -1 ){
       jQuery(this).remove();
     }
  });
     
});

And this is the function to put into functions.php of your Theme

function get_parents($atts) {
    global $current_user;
    get_currentuserinfo();
    $author_query = array('post_type' => 'page', 'posts_per_page' => '-1','author' => $current_user->ID,); //change page to your parent post slug 
    $author_posts = new WP_Query($author_query);
    $parent_ids = "";
    while($author_posts->have_posts()) : $author_posts->the_post();
        $parent_ids .= get_the_ID() .",";
    endwhile;
   
    return $parent_ids;
}
add_shortcode('get-parents', 'get_parents');

It is recommended to use Views with this and register the ShortCode in Views > Compatibility

Actually above code should also be adaptable to any other Post type Select Field you might create.

But that would be Custom Code as CRED / Toolset does not support any Select Field to chose any type of Post Type in a CRED, unless the Parent post Type.

Thanks

#381049

Thank you, as always, Beda. I have a CPT of PseudoUser, where there's 1 record for each WP user and the WP user is the author.

Prospects are children of the PseudoUser. Request custom posts, which are being created by this CRED form are children of Item, Prospect and PseudoUser because each one is created by a PseudoUser requesting a particular Item on behalf of a particular Prospect.

I also added some custom fields for storing the parent post IDs where I thought I might need them in Requests, but I think those might now only be unnecessary, but are probably just confusing me. I'm going to try your suggestion & I'll reply with the results.

#381053

Hey Beda! I just realized that my JavaScript has a function defined first, followed by the document ready stuff.

If you look at the code, I have a '<' symbol in the defined function, and then, because I added your solution above - which I found in another post, it contains a '>' symbol, which appears later on in the JavaScript pane.

If I move the function below the Jquery( function($) { ... }); statement, the order of the symbols changes from < ... > to > ... < and the problem with WP parsing as dangerous HTML goes away!

I love the simple solution. On to testing your code!

#381062

Good news, Beda! The solution works as expected. Thanks for your help.

It would be great if CRED had the ability to optionally filter select options, checkboxes and radio buttons for either parent-child relationship and/or author. These sorts of uses of those particular inputs are fundamental to relational data.

This ticket is now closed. If you're a WPML client and need related help, please open a new support ticket.