I am calling the javascript function in the view of an layout. I have a common layout for different views but there are 2 views in specifically i want to check the screen width. In layout i can define the script but they will work on my whole application so just i want to mention them specifically in 2 views. I could have make 2 javascript files and include them in their respective views but i think this is not a good option.
How will i approach to this issue?
i have two views mobile-view and desktop-view.
Option 1:
Put the JavaScript in a small .js file, and include that file in the specific views with echo $this->Html->script('...');
Option 2:
Create an element with the JavaScript in it (echo $this->Html->scriptBlock('...');), and reference that element from each of the views via echo $this->element('...');
With the HtmlHelper you can buffer JavaScript script blocks and output them in the <head> or preferably at the end of the <body>, like so:
Your View
// Start a script block to be echoed at the end of the <body>
$this->Html->scriptStart(['block' => 'bottomScripts']);
echo "alert('Hi, it is JavaScript.');";
$this->Html->scriptEnd();
Nothing will happen unless you output the scripts and/or script blocks that are buffered inside the block called bottomScripts in a Layout or View:
Your Layout
…
<?= $this->fetch('bottomScripts'); ?>
</body>
</html>
Related
Hi i m trying to develop a students registration application with Laravel
a student could be register in many classes each class has a name and level so in registration page i want to show a cheackbox with Classes Name then when i click on a Classe the application show me in the same page a groupe of cheakbox with levels og the cheakes class for exemple if i click on English it shows me Beginin , intermediate ...
So in create.blade.php (register) i have
#foreach ($mat as $m)
{!!Form::label($m->matiere,$m->matiere.' :')!!}
<input type="radio" name="matiere" onclick="cli();" value={!!$m->matiere!!}>
#endforeach
And i create a Script to help with cli() function
function cli(){
classname=document.querySelector('input[name="matiere"]:checked').value;
alert(classname);}
my question is how could i get classnam value in PHP to show the levels of this class
I think you may be taking an odd approach to this.
In your controller, before you pass any variables to your view, you will want to organize your classes and the levels you want to return. If you have set up your model relationships then you could even do this:
Controller
public function index()
{
$classes = MyClassModel::all();
return view('create', [
'mat' => $classes,
]);
}
create.blade.php
#foreach ($mat as $m)
{!!Form::label($m->matiere,$m->matiere.' :')!!}
<input type="radio" name="matiere" value={!!$m->matiere!!}>
#foreach ($m->levels as $level)
// output each level for that class
#endforeach
#endforeach
You can then use javascript to show or hide the different levels as appropriate. I would avoid any asynchronous javascript unless you have enough classes and/pr levels that it would cause loading issues.
when the browser send request to server for this page, php make all of your html and javascript code and send them to browser and your javascript code run on browser, so you can't use php and javascript at the same place (ex. on the server).
My website is currently using .tpl template files to load different pages dynamically. That will load an entire page again, so header, sidebar (chat), main content and the footer.
In my index.php file there is a switch case which loads the page 'home' when you click on 'home' in the menu. (example)
But I don't want that. Because their is also a chat in the sidebar, and that reloads/resets eveytime you load a different page. So all previous messages will be gone. So what I do want is changing only the main content part. So header, sidebar and footer will stay and won't reload.
I tried to do it with javascript but that didn't work...
Can someone help me or atleast put me on the right path?
(And yes, I have been searching for the last hour on stackoverflow and google but couldn't find anything...)
What you need is called AJAX(With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.)
To use ajax u need Javascript to send the request to a PHP file that loads the smarty template that contains your main content and insert the html code back into the page:
<?php
//some-php-file.php
include("Smarty.class.php");
$smarty = new Smarty;
$smarty->display("main_content_part.tpl");
?>
//link on 'home' site
Home
//javascript(jquery) ajax request
$('#ajaxHomeBtn').click(function(e){
e.preventDefault();
$.get("some-php-file.php", function(smarty_html_data) {
$(".main-content").html(smarty_html_data);
});
});
Please follow following instruction :
Create separate .tpl file for header,footer,sidebar and contents files.
In main file include header,footer,sidebar and left one section for content.
3.Replace your .tpl (using id or class) file content using ajax call.
bind your url with function.
Sample code as below:
// sidebar.php
<ul>
<li><a onclick="changePage(this)" data-page="home.tpl">Home</a></li>
<li><a onclick="changePage(this)" data-page="aboutus.tpl">About Us</a></li>
</ul>
// master.php
<?php
include("header.php");
include("sidebar.php");
?>
<section id="fileContent">
</section>
<?php include("footer.php");
?>
<script href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function changePage(obj)
{
var Filename=$(obj).data('page')
$.get(Filename, function( data ) {
$( "#fileContent" ).html(data);
});
}
</script>
I 'm starting jquery migrating an application to angular, but it has made me a bit complex. I need to know if someone could help me as routing and load controllers, when login any user. There are two types of users
Students
Teachers
Each has a different menu , which in turn has different html pages. Depending on the role the user to enter then load the specific menu.
Using the jQuery load event , and changed the content which changes within a div . I would like to know how to perform this process with angular .
index.html
<html>
<head> Files ... </head>
<body>
<div id="container"></div>
</body>
</html>
student-menu.html
<div>
<div>option-1</div>
<div>option-2</div>
<div>option-3</div>
<div>option-N</div>
</div>
students-pages
option-1.html
option-2.html
option-3.html
option-N.html
teacher-menu.html
<div>
<div>option-1</div>
<div>option-2</div>
<div>option-3</div>
<div>option-N</div>
</div>
teachers-pages
option-1.html
option-2.html
option-3.html
option-N.html
Appreciate a clear explanation.
Please consider reading about including ui-router in your amazing application and learn about templateProviderusage.
As soon as you done with above things all you need is:
Create Service that will have getCurrentUserStatus() that should acquire from loaded data about user his status in your system
Depending on status configure your child views: { 'menu': { ... } } with
//somewhere above
const TEMP = {
user: 'path/to/file.tpl.html',
admin: 'path/to/admin.tpl.html'
}
//somewhere in view configuretion
...,
templateProvider (AuthService) {
return TEMP[AuthService.getCurrentUserStatus()];
},
...
Create all another pages with totally same approach of choosing needed template.
P.S. This allows you to expand list of variable templates unless your imagination will empty :D
P.P.S. Noobs way - lot of ng-include with ng-if on every view that will be changed depending on viewer.
In my codeigniter app, I've created a header.php and a footer.php. When I load a view, I do the following in my controller:
$this->load->view('includes/template', $data);
The template.php file looks like this:
$this->load->view('includes/header');
$this->load->view($main_content);
$this->load->view('includes/footer');
So far, this has been working very well. However, I'd like to move all my code that loads javascript files from the header to the footer - to help my pages load faster. Stuff like this is what I'm talking about:
<script src="<?php echo base_url('assets/js/jquery-1.8.1.min.js')?>"></script>
<script src="<?php echo base_url('assets/js/jquery-ui-1.8.23.custom.min.js')?>"></script>
<script src="<?php echo base_url('assets/js/jquery.qtip-1.0.0-rc3.min.js')?>"></script>
The problem is that in the files that make up the "main_content", if I have javascript logic, it no longer works.
For example, let's say I have the following view that acts as the "main_content"
<!-- DISPLAY RESULTS -->
<div class="row-fluid">
<div class="span12 visible-desktop visible-tablet" id="l1locations">
<table id="switchrecords" name="switchrecords" class="table table-bordered">
</table>
</div>
<div class="span12 visible-phone" id="l1locations">
<div id="mobileswitchrecords"></div>
</div>
</div>
<button class="btn search">Search</button>
<script>
$(document).ready(function(){
$('#search').show();
$('.search').live('click',function(){
etc... logic that dynamically fills in the table
});
</script>
I thought this logic would still work because it's inside the document.ready() and document ready doesn't fire until all files are loaded.
But I must be wrong because my code no longer works.
I can include the main jquery include file in the header, and all other js files in the footer. But any other suggestions would be appreciated.
EDIT 1
Please note that currently, each view has different inline javascript. Some pages make a lot of ajax calls, other pages just have simple scripts. Regardless, for me to move all inline javascript into files is ok, but how does the footer then know which js file to include? I don't want to include all javascript all the time because the js code only applies to specific pages.
$(document).ready is jQuery. You're trying to use jQuery before it's even loaded in, so it'll fail. You can try to move all of your core-JS includes to the bottom of each view file, before the specific view JS, and the footer containing other footer-y stuff. This way, your JS is still loading at the bottom (after the content), and also before your view-specific code.
How to add inline JavaScript to a WordPress template file?" Plus add it to every post on my page? for instance, <script type="text/javascript">alert('hello world');</script> would be...
Adding it to a template is easy; just stick it within a tag in any part of the template you want to add it to. For instance:
<script>alert('Hello world!');</script>
as an incredibly basic (and kinda messy and improper) way to demonstrate it. Any template file is just a PHP file, or in other words an HTML file with some extra PHP code thrown in.
Also, to add something to a post, you'll want to add it to the appropriate part of your Wordpress template. For instance, in the default Twentytwelve theme, that'd be the content.php file--that contains the code for a single article, and adding something to that will add it to every instance of an article on the page.
To add some javascript to every post on your page just place it inside the loop. Something like:
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
?>
<script type="text/javascript">alert('hello world');</script>
<?php
the_title();
the_excerpt();
} // end while
} // end if
?>
Would add an alert for every post on the page. That would be pretty messy to have a popup for every post but that's the gist.