Jump to content

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


KillGorack

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
});

 

Link to comment
Share on other sites

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;

  }

 

Link to comment
Share on other sites

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"}'>

 

Link to comment
Share on other sites

  • 3 weeks later...

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.