Bootstrap - Internet Explorer - issue with route parameters
Question
I have few pages which work fine in Mozilla and Chrome but not in IE8. With respond.js most of the issues are settled in. However, when there are parameters passed to the page, the issue surfaces (page displays in mobile mode; takes the entire page width and navbar collapses to icon-bars). But this happens only in edit mode (id passed as a parameter).
For example, I have a user registration page which works in both modes(new and update). For update, it uses the same view with user details attached to it.
Here are the two routes. First one for the new mode, and second one for edit mode.
Route::get('test', function() {
return View::make('test');
});
Route::get('test/1', function() {
return View::make('test');
});
Here is the test page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Main Layout"> <link rel="stylesheet" href={ { asset( "/css/bootstrap.min.css") }} /> <script src="/js/jquery-1.11.1.js"></script> <!--[if lt IE 9]> <script src="js/respond.min.js"></script> <![endif]--> </head> <body> <div class="wrap col-md-13"> <!-- Wrap all page content here --> <nav> <div class="col-md-12"> <div class="nav navbar" style="background-color:black;"> <div class="navbar-header pull-left"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar" style="background-color:red;"></span> <span class="icon-bar" style="background-color:red;"></span> <span class="icon-bar" style="background-color:red;"></span> </button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav pull-right"> <li class="stft-menu-item"><a href="/">Home</a> </li> <li class="stft-menu-item"><a href="/">About</a> </li> <li class="stft-menu-item"><a href="/">Contact</a> </li> </ul> </div> </div> </div> </nav> </div> </body> <script src="/js/bootstrap.min.js"></script> </html>
Now when I test this using the first route in new mode, everything is fine.
http://localhost/test
But the issue surfaces with the following.
http://localhost/test/1
Any inputs please?
1 answers
solution1
1 ACCPTED 2015-04-03 20:28:40
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
This needs to be changed to /js/respond.min.js (note the leading slash). At the moment, that file reference will not work when you're viewing the http://localhost/test/1 URL. Alternatively, you can (should) use the {{ asset('js/respond.min.js') }} function instead. The asset() function will generate the correct URL for your file (just as you've used it for the CSS file).
EDIT: You're also linking to jQuery twice, which is unnecessary, and I'd assume only one of those references is working.
Keep this one (but move it inside the <head></head> tags:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Remove this one:
<script src="/js/jquery-1.11.1.js"></script>
Edit 2: Why does this change fix the issue?
There are two ways to link to files (JS, CSS, Image, other pages — it doesn't matter which type).
Relative Links
eg js/respond.js
Without the leading slash, the browser creates a link relative to your current URL. In your situation, when you view http://example.com/test the link js/respond.js is assumed to be http://example.com/js/respond.js (which is correct).
However, when you view http://example.com/test/1 the browser assumes a URL relative to your current path. This means that the link js/respond.js is assumed to be http://example.com/test/js/respond.js (which is wrong).
If you were to view http://example.com/admin/user/test/1 the assumed URL would be http://example.com/admin/user/test/js/respond.js .
Absolute Links
eg /js/respond.js or http://www.example.com/js/respond.js
The leading slash tells the browser that it is an absolute link and the link should be generated using the full URL as the base of the link. This allows you to link from the file from any URL on your domain, and it will know the directory is http://example.com/js/respond.js
The risk you run from using a leading slash on all your URLs is that it assumes your website is running in the root directory of the domain. If you move your website to a sub directory in the future (possibly for a dev or staging environment) then your links will no longer work. This is why it's a good idea to use you the asset() helper. This function will prefix your links with the full path for your file asset('js/respond.js') will generat the URL http://www.example.com/js/respond.js on all pages correctly.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.