Jump to content
Sign in to follow this  
KillGorack

Content security policy, (Removing js from the midst of HTML)

Recommended Posts

JQuery 3.3.1, Bootstrap 4.2.1, and the use of the Bootstrap Datepicker

We’re trying to get satisfy some “Content Security Policy” requirements. One of which is to remove the java in the code, and call it from a known js file somewhere. That said I need to place the stuff in a js file which DOES work, but we have to place some java for EACH datepicker, or datetimepicker that exists in the site (which is scalable) so these form elements need to be added from time to time, and as it stands now we’ll need to add to the JS file also.

I’m an absolute tool when it comes to js just FYI.

To the question;

Is there a way to code the JAVA below so it can handle ALL datepickers once? In the past we would write the form element and the js together, so the id's could be created on the fly. With a js file, it complicates things.

$('#datepicker').datepicker({
  format: 'yyyy/mm/dd',
  calendarWeeks: true,
  weekStart: 1,
  todayHighlight: true
});

 

Share this post


Link to post
Share on other sites
Posted (edited)

It's a bit tacky, but this is working so far, there has to be a better way.

 

  function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, '\\$&');
    var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
    results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, ' '));
  }

  if(getParameterByName('fn') == 'edit'){
    var i;
    for(i = 1; i < 10; i++){
      $('#datepicker' + i).datepicker({
        format: 'yyyy/mm/dd',
        calendarWeeks: true,
        weekStart: 1,
        todayHighlight: true
      });
    }
  }

 

Edit below

PHP with the incremental value on the end..

  function element_date($field, $value){

    if($field['fld_required'] == 1){
      $rq = "required";
    }else{
      $rq = "";
    }

    $rtrn = "<div class=\"form-group row m-0\">";
      $rtrn .= "<label class=\"col-sm-4 col-form-label\">".$field['fld_human']."</label>";
      $rtrn .= "<div class=\"col-sm-8 text-right p-0\">";
        $rtrn .= "<input id=\"datepicker".$this->datecounter."\" type=\"text\" class=\"form-control form-control-sm\" name=\"".$field['fld_fieldname']."\" value=\"".$value."\" ".$rq." placeholder=\"YYYY-MM-DD\">";
      $rtrn .= "</div>";
    $rtrn .= "</div>";

    $this->datecounter = $this->datecounter + 1;

    return $rtrn;

  }

 

Edited by KillGorack

Share this post


Link to post
Share on other sites
Posted (edited)

Create a function that looks for inputs with a specific attribute and then apply your date picker code to those.  For example:

jQuery(function($){
    var defaultSettings = {
        format: 'yyyy/mm/dd',
        calendarWeeks: true,
        weekStart: 1,
        todayHighlight: true
    };

    $('[data-datepicker]').each(function(){
        var $input = $(this);
        var settings = $.extend($input.data('datepicker')||{}, defaultSettings);
        $input.datepicker(settings);
    });
});

Then in your HTML you just give your inputs the appropriate attribute.  If you want to change the default settings, put the new settings as the attributes value.

<input type="text" name="start" data-datepicker>
<input type="text" name="end" data-datepicker>
<input type="text" name="birthday" data-datepicker='{"format":"mm/dd/yyyy"}'>

 

Edited by kicken
  • Great Answer 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.