Problem with code widget bric

[Pat]

Hello
I would like to insert a widget in a page of my site and I use the widget code bric. I copy and paste the following lines into it

<div class="box">
    <style>
        .widget {
            background: #5ba4d4;
            padding-top: 30px;
            padding-bottom: 30px;
            padding-right: 30px;
            padding-left: 20px;
            width: 300px;
            border-radius: 2px;
        }

        .widget input {
            padding: 5px;
            border-radius: 2px;
            border: none;
            margin: 4px;
            width: 100%;
        }

        .check-availability {
            border: 2px solid white !important;
            background-color: transparent;
            color: white;
            font-weight: 600;
        }

        .datepicker-top-left, .datepicker-top-right{
            transition: none;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.4/datepicker.min.js"></script>
    <link  href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.4/datepicker.min.css" rel="stylesheet">

    <div class="widget">
        <form target="_blank" action="https://portal.freetobook.com/reservations">
            <input type="hidden" name="w_id" value="[YOUR_WIDGET_ID_HERE]">
            <input type="hidden" name="w_tkn" value="[YOUR_WIDGET_TOKEN_HERE]">
            <input type="hidden" id="check-in-date-to-send" name="check_in_date">
            <input type="hidden" id="check-out-date-to-send" name="check_out_date">
            <b class="arrival-text">Arrival</b><br/>
            <input id="check-in-date" data-toggle="datepicker" placeholder="Please select arrival date">
            <b class="departure-text">Departure</b><br/>
            <input id="check-out-date" data-toggle="datepicker" placeholder="Please select departure date">
            <input id="stay-length" type="hidden" name="stay_length" value="1">
            <br/>
            <br/>
            <input type="submit" class="check-availability" value="Check Availability">
        </form>
    </div>
    <script>
        var $checkInDatePicker = $('#check-in-date');
        var $checkOutDatePicker = $('#check-out-date');

        $checkInDatePicker.datepicker({
            format: 'dd-mm-yyyy',
            autoHide: true,
            autoPick: true
        });

        var initialCheckInDate = $checkInDatePicker.datepicker('getDate');
        var initialCheckOutDate = addDays(initialCheckInDate, 1);

        $checkOutDatePicker.datepicker({
            format: 'dd-mm-yyyy',
            autoPick: true,
            date: initialCheckOutDate
        });

        $checkInDatePicker.on('change', function() {
            var checkInDate = $checkInDatePicker.datepicker('getDate');
            var checkOutDate = addDays(checkInDate, 1);
            $checkOutDatePicker.datepicker('setDate', checkOutDate);

            updateDatesToSend(checkInDate, checkOutDate);
            updateStayLength();
        });

        $checkOutDatePicker.on('change', function() {
            updateStayLength();
        });

        updateDatesToSend(initialCheckInDate, initialCheckOutDate);

        function addDays(date, days) {
            var result = new Date(date);
            result.setDate(result.getDate() + days);
            return result;
        }

        function updateStayLength() {
            var date1 = $checkInDatePicker.datepicker('getDate');
            var date2 = $checkOutDatePicker.datepicker('getDate');

            var difference = daysBetween(date1, date2);
            if ( difference < 1 ) difference = 1;
            $("#stay-length").val(difference);
        }

        function updateDatesToSend(checkInDate, checkOutDate) {
            var dd0 = checkInDate.getDate();
            var mm0 = checkInDate.getMonth() + 1;
            var yyyy0 = checkInDate.getFullYear();
            if ( dd0 < 10 ) dd0 = '0' + dd0;
            if ( mm0 < 10 ) mm0 = '0' + mm0;
            $("#check-in-date-to-send").val(yyyy0 + '-' + mm0 + '-' + dd0);

            var dd = checkOutDate.getDate();
            var mm = checkOutDate.getMonth() + 1;
            var yyyy = checkOutDate.getFullYear();
            if ( dd < 10 ) dd = '0' + dd;
            if ( mm < 10 ) mm = '0' + mm;
            $("#check-out-date-to-send").val(yyyy + '-' + mm + '-' + dd);
        }

        function daysBetween( date1, date2 ) {
            var one_day=1000*60*60*24;
            var date1_ms = date1.getTime();
            var date2_ms = date2.getTime();
            var difference_ms = date2_ms - date1_ms;
            return Math.round(difference_ms/one_day);
        }
    </script>
</div>

I encounter the following problem: the widget doesn’t work well because it’s supposed to make date pickers appear, but especially when I go back into code widget bric, blocs automatically added lines and transforms the “<” into “&lt”.

Is this a bug?

Thanks for your help

[MichaelZ]

Run your code through a text editor first (i. e. CotEditor >> you can get it for free in Mac App Store) to get rid of the text formatting and then insert the code in the widget bric.
Cheers,

[Pat]

It’s done, but I still have the same problem.
Thank you

[MichaelZ]

Did you use the original code for the CotEditor? CotEditor will not revers the HTML format to plain text when you insert them to it.

[Pat]

I use blocs 4.04

[Pat]

yes i use the original’s code by copy and paste

[Pat]

This seems to be a Blocs problem because I copied the same code to another website editor and it works without any problem.
Any ideas?

[Pat]

It’s exactly the same : Erreur 404 - Le Moulin du Boisset, Maison d'hôtes de charme

[Pat]

and the test with another website editor : Erreur 404 - Le Moulin du Boisset, Maison d'hôtes de charme

[Whittfield]

You’ll need to add the script tags to your project through differently.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.4/datepicker.min.js"></script>
<link  href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.4/datepicker.min.css" rel="stylesheet">

The first script is jquery which is not needed because Blocs will load it, remove that.
The next script is the datapicker javascript. we want to ensure it loads after jquery, so place that line in the Footer of the Code Editor.

The last line (Stylesheet) goes in the Header although it should still work anywhere on the page. This will ensure there’s no sudden flash of un-styled elements.

Finally, place the last script tag in your code AFTER the datapicker script. So in the Footer you’ll have the following script tags in order:

<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.4/datepicker.min.js"></script>
<script>
        var $checkInDatePicker = $('#check-in-date');
        var $checkOutDatePicker = $('#check-out-date');

        $checkInDatePicker.datepicker({
            format: 'dd-mm-yyyy',
            autoHide: true,
            autoPick: true
        });

        var initialCheckInDate = $checkInDatePicker.datepicker('getDate');
        var initialCheckOutDate = addDays(initialCheckInDate, 1);

        $checkOutDatePicker.datepicker({
            format: 'dd-mm-yyyy',
            autoPick: true,
            date: initialCheckOutDate
        });

        $checkInDatePicker.on('change', function() {
            var checkInDate = $checkInDatePicker.datepicker('getDate');
            var checkOutDate = addDays(checkInDate, 1);
            $checkOutDatePicker.datepicker('setDate', checkOutDate);

            updateDatesToSend(checkInDate, checkOutDate);
            updateStayLength();
        });

        $checkOutDatePicker.on('change', function() {
            updateStayLength();
        });

        updateDatesToSend(initialCheckInDate, initialCheckOutDate);

        function addDays(date, days) {
            var result = new Date(date);
            result.setDate(result.getDate() + days);
            return result;
        }

        function updateStayLength() {
            var date1 = $checkInDatePicker.datepicker('getDate');
            var date2 = $checkOutDatePicker.datepicker('getDate');

            var difference = daysBetween(date1, date2);
            if ( difference < 1 ) difference = 1;
            $("#stay-length").val(difference);
        }

        function updateDatesToSend(checkInDate, checkOutDate) {
            var dd0 = checkInDate.getDate();
            var mm0 = checkInDate.getMonth() + 1;
            var yyyy0 = checkInDate.getFullYear();
            if ( dd0 < 10 ) dd0 = '0' + dd0;
            if ( mm0 < 10 ) mm0 = '0' + mm0;
            $("#check-in-date-to-send").val(yyyy0 + '-' + mm0 + '-' + dd0);

            var dd = checkOutDate.getDate();
            var mm = checkOutDate.getMonth() + 1;
            var yyyy = checkOutDate.getFullYear();
            if ( dd < 10 ) dd = '0' + dd;
            if ( mm < 10 ) mm = '0' + mm;
            $("#check-out-date-to-send").val(yyyy + '-' + mm + '-' + dd);
        }

        function daysBetween( date1, date2 ) {
            var one_day=1000*60*60*24;
            var date1_ms = date1.getTime();
            var date2_ms = date2.getTime();
            var difference_ms = date2_ms - date1_ms;
            return Math.round(difference_ms/one_day);
        }
    </script>

[Pealco]

Hello @Pat yes you’r right this is an “OOOOOLLLLLLDDDDDD” bug and I have it a lot of times as well, the only thing you need to do is copy all your code, then delete it, close the code editor, unselect the “preview content” under the “Edit Code” button, and with that option unselected, open the code editor and paste your code.
Then when you preview everithing is working, but with that “preview content” unselected.

Check here:

ERROR WITH HTML BRIC < symbol

Hello @Norm, I think there is a problem with html bric. If you create the html with the preview function active and use a script with the < symbol, after you close the html editor and open it again, the < symbol transforms to "&lt;” and the script wont work. But the > symbol don’t have any problem, it works and saves as > even after reopen html editor. Can you check please?

Few application problems

Hello all, I’m feeling some issues with blocs app and for that reason, I like to talk about them and then if more then one have this issue I will report to @Norm if he didn’t reply to this top Topic. I’m using last public version 3.4.4 When I have a project that was upgraded from older versions, some of the Style animations don’t appear (the new ones, blur in, etc) . Solution: have to close project (don’t close blocs app) open or create a new project, then close that new project (don’t clo…

Form -> PHP script inside code bric, not working

Sometimes, what happen and probably could be your case, there are some bugs when you use the code-bric with preview activated. When you copy paste code with preview activated sometimes it change code, other times it do it when you export the page. So try to disable the preview option in the code bric, then delete all the content. Then close the code bric, open it again and paste content with the preview disabled. And try… In a different occasion the issue I have in code bric was about the < or…

Hope @Norm could fix it, I have this issues today as well…

[Pat]

Thank you very much for your help. It works very well.