CODEWITHSUNDEEP
phplaravelrouteslaravel-blade
xslibx
xslibx

Reputation: 4349

View not displaying correctly. Laravel

In my Laravel project I have a route set up to display a profile page for a user.

Route::get('{id}', ['as' => 'profile', 'uses' => 'UsersController@show']);

Everything displays fine with this route. However, I want to change the route to 

Route::get('profile/{id}', ['as' => 'profile', 'uses' => 'UsersController@show']);

When I do this and navigate to my.app:8000/profile/1 my css and html is fine, but I get a broken image link and my jquery no longer works

I also tried

Route::get('/profile/{id}', ['as' => 'profile', 'uses' => 'UsersController@show']);

I'm using src="{{URL::asset("images/users/xxxxxxx")}}" to load my images as well as jquery

No where else in my route file do I have a route for profile/

Not sure what I can do. Anyone know a fix to this problem?

edit:

here is my html:

<!doctype html>
<html>
    <head>
    <meta charset="utf-8">
            <!--Main Style Sheet-->
            {{ HTML::style('css/style.css'); }}
            <!-- JQuery -->
            <script src="/jquery/jquery-1.11.0.js"></script>
</head>

<body class="main-body">
<!-- this image works now that i added the leading / -->
<img src="{{ URL::asset("/images/users/{$user->id}/profilePictures/176thumb-{$user->profilePicture->url}") }}" alt="{{ $user->first_name }} {{ $user->last_name }} Profile Picture" width="176" height="176">

<!-- the jQuery For this is not working -->
<ul class="list-grid">
    <li>
        <div class="profile-example">
            <div class="add-box"></div>
        </div>
    </li>

</ul>

<!-- Include woodmark. This is the jquery plugin that isn't working -->
<script src="/jquery/jquery.wookmark.js"></script>
<!--Woodmark settings-->  
<script type="text/javascript">
    (function ($){
      $(function() {
        var $handler = $('.list-grid li');

        $handler.wookmark({
            // Prepare layout options.
             align: 'center',
             autoResize: true,
             comparator: null,
             container: $('html'),
             direction: undefined,
             ignoreInactiveItems: true,
             itemWidth: 560,
             fillEmptySpace: false,
             flexibleWidth: true,
             offset: 8,
             onLayoutChanged: undefined,
             outerOffset: 0,
             possibleFilters: [],
             resizeDelay: 50,
             verticalOffset: undefined
        });
      });
    })(jQuery);
  </script>

</body>
</html>

Upvotes: 1

Views: 1724

Answers (2)

xslibx
xslibx

Reputation: 4349

I used 

{{ HTML::script('jquery/jquery.js'); }}

instead of 

<script src="/jquery/jquery.js"></script>

and now it all works

Upvotes: 1

mopo922
mopo922

Reputation: 6381

I think this is an issue with your JS/image paths, not Laravel. It sounds like you're using relative paths when you include your jQuery/images, something like this:

<script src="jquery/jquery.js>
<img src="img/image.jpg">

When you call a resource this way, it will look for http://example.com/img/image.jpg if you're on the root level, but if you're in /profile it will look for http://example.com/profile/img/image.jpg.

If you add a slash in front, it will always start the path from the web root:

<script src="/jquery/jquery.js>
<img src="/img/image.jpg">

If your CSS is fine, then I suspect you're already using an absolute path for it.

Upvotes: 1

Related Questions