Laravel 4 different pages @section are breaking scripts

Question

I'm very new to laravel 4 and am trying to extend my layout with another view.

I have this in the end of my layout.blade.php:

 {{ HTML::script('js/jquery.nicescroll.min.js') }}
 {{ HTML::script('js/jquery.pickmeup.min.js') }}
 {{ HTML::script('js/myscript.js') }}
 </body>
 </html>

Then I have a file page1.blade.php in which I have quite much, to show just the essentials:

@extends('layout/layout')

@section('contents')

<section id="start">
......
</section>
@stop

In this file, all the javascript functions from myscript.js are running without any problems, though they are included only in layout.blade.php

Now I created another view, called 'bookings' with its corresponding file 'bookings.blade.php'

Here is bookings.blade.php:

@extends('layout/layout')

@section('contents')


<section id="bookingform">
<div id="bookingforma" style="background-color: #00a651; height: 10px; width:100%;">

   {{ Form::open(array('url' => 'bookings', 'class' => 'form-inline', 'role' => 'form')) }}
         <div class="form-group">
         <span><strong>Date available?  </strong>  </span>
           {{ Form::text('from1',Input::get('from'),array('class' => 'form-control', 'id' => 'fromforma')) }}
         </div> <span><strong>  -  </strong></span>
         <div class="form-group">
           {{ Form::text('to1',Input::get('to'),array('class' => 'form-control', 'id' => 'toforma')) }}
         </div> <span><strong>  for  </strong></span>
         <div class="checkbox">
           {{ Form::select('persons1', array('1' => '1','2'=>'2','3'=>'3','4'=>'4'),Input::get('persons'),array('class' => 'form-control')) }}

         </div>
     {{ Form::submit('Request!', array('class' => 'btn btn-success')) }}
       {{ Form::close() }}
</div>
</section>
@stop

Basically I'm doing exactly the same with @section and @stop and @extends as in page1.blade.php, but I can't use any of the javascript functions.

To be exact, if I call a

 var a = document.getElementById('bookingform');

withing myscript.js, the javascript breaks for the page1.blade.php's content, too. (And isn't working in bookings.blade.php)

My routes.php file is the following:

Route::get('/', function()
{
    return View::make('page1');
});
Route::get('index', function() {

    return View::make('page1');

});


Route::get('bookings', 'BookingController@getBooking');

Route::post('bookings','BookingController@getBookingDates');

And the BookingController:

class BookingController extends BaseController {


    public function getBooking(){

        return View::make('bookings');
    }


    public function getBookingDates()
    {


        $data = Input::all();


        return View::make('bookings');
    }
}

Is there anything I totally don't get about laravel or does somebody see the problem?

EDIT:

javascript:

$(document).ready(function () {

    function heightsetter() {
        var w = window,
            d = document,
            e = d.documentElement,
            g = d.getElementsByTagName('body')[0],

            y = w.innerHeight || e.clientHeight || g.clientHeight;

        return y;
    }

    var resizeTimeout;
    window.onresize = function () {
        clearTimeout(resizeTimeout);
        var height = document.getElementById('start');
        height.style.height = heightsetter() + "px";
        var heightz = document.getElementById('hotels');
        heightz.style.height = heightsetter() + "px";
        var heightd = document.getElementById('training');
        heightd.style.height = heightsetter() + "px";

        resizeTimeout = setTimeout(function () {

        }, 250); 
    };

    var height = document.getElementById('start');
    height.style.height = heightsetter() + "px";
    var heightz = document.getElementById('hotels');
    heightz.style.height = heightsetter() + "px";
    var heightd = document.getElementById('training');
    heightd.style.height = heightsetter() + "px";
    var heightb = document.getElementById('bookingform'); //<<< **this breaks it**
    heightb.style.height = heightsetter() + "px";

    .....



    });

Are you deferring var a = document.getElementById('bookingform'); until after the DOM is ready? Are you getting any errors in your console? — Ben Harold
It's called within a $(document).ready(function(), yes. the error I get in the console is Uncaught TypeError: Cannot read property 'style' of null -- for page1 (the one usually working) and in bookings I get: Uncaught TypeError: Cannot read property 'style' of null @BenHarold — baao
That would be why your javascript isn't working. Can you add your javascript code. This error means you are referencing an element that doesn't exist btw — Jonathan Crowe
Added it, I'm aware that this will bring a error, but the error should be on both pages in my opinion. Well it's 6 am in italy, so I might not get something very basic... — baao
Great, got it working. Thank you very much @JonathanCrowe. Allways the little things. — baao

Alexander Kerchum Alexander Kerchum · Accepted Answer · 2014-11-25T05:14:25

Looks like you never added that ID to the form itself. You are trying to access something that doesn't exist.

Form::open(array('url' => 'bookings', 'class' => 'form-inline', 'role' => 'form', 'id'=>'bookingForm')

Laravel 4 different pages @section are breaking scripts

1 Answers