Force browser to re-run js file after ajax call - javascript

I am facing a problem while trying to call javascript file.
I have a menu in my html file.
HOME ME ABOUT
In my second page (ME), I run a js file :
alert("running"); // to test if my browser runs my js file
$("#some_id").blabla; // to do smoething with elements
When I switch from ME to HOME, and then getting back to ME again, my browser does not run my js file once again. That means all my jQuery's "get element by id" $(#some_id") are out-to-date.
That is because I switch in my menu with ajax call.
How to force browsers to re-run this js file after an ajax call ? Thanks
HOME code :
<?php include('header.php'); ?>
<script src="js/home.js?v=<?php echo uniqid(); ?>"></script>
<script>alert("page : home");</script>
ME code :
<?php include('header.php'); ?>
<script src="js/me.js?v=<?php echo uniqid(); ?>"></script>
<script>alert("page : me");</script>
<body> ... </body>
in ME file, javascript are loaded just once.

Related

Javascript function triggers on page refresh

I have a hyperlink and clicking on that link will run a JavaScript function. I also have a PHP variable $counter. Inside the JavaScript function, the value of $counter is increased by 1 i.e., $counter++. It works fine. But the same function also runs whenever the page is refreshed. So the value of the $counter is increased by 1 whenever the page is refreshed. I tried all the solutions available on the net like preventDefault(), clickevent handler etc., But nothing works. Please help to fix this. In the below code, I have set $counter as 0. But it loads with 1 as output. I want it to count only when the hyperlink is clicked. Here is my sample code.
<?php
session_start();
require("dbconfig.php");
$counter=0;
?>
<html>
<head>
<script>
function onclick() {
<?php
$counter++;
?>
}
</script>
</head>
<body>
link text
</body>
<?php
//tracing counter value
echo $counter;
?>
</html>
TL;DR:
You can't mix PHP and JS code expecting that JS function will execute PHP code.
First PHP prepares output to browser, then Browser parses your JS and HTML. JS never knows about PHP code.
Click CTRL+U to view source as browser sees it - there is no PHP code.
JS function is not run on page refresh. PHP code is run on page refresh.
First goes PHP parser:
session_start();
require("dbconfig.php");
$counter=0;
$counter++;
echo $counter;
Then goes JS/Html parser.
At this point your JS code looks like this:
function onclick() {
}
Content of function is empty because you output nothing from PHP side.
To fix it move PHP var to JS var:
<?php
session_start();
require("dbconfig.php");
$counter=0;
?>
<html>
<head>
<script>
var jsCounter = <?= $counter; ?>
function onclick() {
jsCounter++;
console.log(jsCounter);
}
</script>
</head>
<body>
link text
</body>
</html>
Note never output after closing body tag.

Is there a way to stop `<script>' from loading the same javascript twice in PHP/Javascript/HTML?

Is there a PHP require_once or include_once for <script>? I know <script> is pure HTML, but does PHP or HTML have such a thing?
I would like to prevent javascript from loading twice in the same page.
Example:
<script type="text/javascript" src="js/jquery-0.4.ajaxify.min.js"></script>
Seems like you are looking for this:
http://wonko.com/post/painless_javascript_lazy_loading_with_lazyload
One of the way you can run script tags in php would be
<?php
....Here is php code
?>
... add the script here(<script>....</script>
<?php
?>
Another probable way is :
Using php inside the script tags for example:
<script type="text/javascript">
var alertMsg = '<?php echo $custom_message; ?>';
alert(alertMsg);
</script>
If you are using buttons
echo('<button type="button" onclick="customfunction();">My Button</button>');
<script>
//call your customfunction here
</script>
AN UPDATE TO SOLVE LOADING SCRIPT CONTENTS TWICE
I would suggest use of javascript function which are called to the specific page as they are needed an example would be
Create a file with a .js eg
example.js
here declare your functions you would put in the script tags of a html page
In the page you want to use the <script>
Include the example.js file and you can call the custom functions from there use the obect orientend approach
Check This resource for more info about obect orientend javascrip

Php/Javascript cross connection issue

So i have a contact page that runs some php and in that php if the email sends through correctly it runs a javascript command. I have two javascript commands one to change page and one to alert the person sending the email. Here is the code:
if ($mail_status) { ?>
<script language="javascript" type="text/javascript">
window.location.assign("http://dtc.bz/twitch/index.html");
$('.alertfeed').show();
</script>
<?php
}else { ?>
<script language="javascript" type="text/javascript">
</script>
<?php
}
?>
When I run it. It redirects me to the correct page but the second command within the php page. So how do I get the second line of the javascript run on the page I want it to redirect to?
After the page redirection no code will be executed, that's the reason "$('.alertfeed').show();" is not getting triggered. To do this you have to redirect the page first and on the page you have redirected then execute the next command.
Something like
window.location.assign("http://dtc.bz/twitch/index.html?redirected=yes");
now on the index.html check if redirected param and execute this command in php
<?php if($_GET['redirected']=='yes')
{
echo "<script>$('.alertfeed').show();</script>";
}?>
Update: Using Jquery
$(document).ready(function(){
var url = window.location.pathname;
var pieces = url.split("?");
if(pieces[1]=='redirected=yes'){
$('.alertfeed').show();
}
});
Working Demo:
http://jsfiddle.net/sLEgJ/4/
Your are getting redirected because there is no condition given for redirecting.
Thats why its redirecting you every time you run it.

Strategy for moving javascript to the bottom in CodeIgniter?

On my site I have one global Javascript file which includes jQuery and code for the drop down menu among other things. Many pages also have custom Javascript for minor page-specific interactions, tables etc.
My current set up on each view is a header.php file, basically covering everything from the doctype through to start of the content, the view file for the specific page, and a footer.php closing out the page.
Currently global.js is linked from the <head>. For performance we should put JS at the very bottom of the page, but I can't figure out a good way to do this. I could add the full script line for global.js with the custom script block, but that means I must add it on every page, even when there is no other Javascript. Any better way to move the JS right to the bottom?
You could put the custom JS in a regular variable or nowdoc (php 5.3.0+), and then echo the variable along with script tags in the footer if it exists. Nowdoc might be preferable because you can use both double quotes and single quotes in your JS and PHP won't parse/escape the text.
someview.php:
<?php
$custom_js = "
alert('custom js ran');
";
?>
<?php
$custom_js = <<<'CUSTOM_JS'
alert("custom js ran (i'm in a nowdoc!)");
CUSTOM_JS;
?>
footer.php:
<?php if(isset($custom_js)) { ?>
<script><?php echo $custom_js; ?></script>
<?php } ?>
Edit 2:
If you don't want to have the javascript in a string, you could have the javascript in a seperate file and then use PHP's file_get_contents() to load it into the $custom_js variable as a string.
Edit:
This is just an aside, but you might look into using the Carabiner library for loading JS and CSS. It's an excellent library. It might not necessarily help with your current problem, but if your global.js is quite large, you could split it up and use Carabiner to compress/concatenate on load. I currently use it to select which JS and CSS gets loaded for logged in and logged out users on my current CI project.
Carabiner on Github
Carabiner on Sparks
Carabiner documentation
Perhaps I missed something - but why cant you just load another view, which only contains the js code?
Your template:
$this->load->view("header.php");
$this->load->view("content.php", $data);
$this->load->view("footer.php", $load_js);
Then inside footer.php:
// start of footer stuff here
$this->load->view($load_js);
</body>
</html>
Then inside page1.php:
<script>
// Your scripts here
</script>
OR:
Your template:
$this->load->view("header.php");
$this->load->view("content.php", $data);
Then inside each "content.php" file:
// Content goes here
$data['load_js'] = "page1.php";
$this->load->view("footer.php", $data);
Then inside single "footer.php" file:
// start of footer stuff here
$this->load->view($load_js);
</body>
</html>
Then inside page1.php:
<script>
// Your scripts here
</script>
The second method is probably more what you want. It does mean you need to call the footer in each content file - but it is literally one line - so your not really repeating yourself - but it gives you complete control inside the content file to specifically any js files to load.
You can expand this an make the $load_js variable an array of js files to load.
I use a set of layouts, which are views that provide the basic structure of the site. Every controller calls a layout and passes into it the content specific for that controller method.
For example, say you have a single layout:
<html>
<head>
<title><?php echo $page->title ?></title>
<?php if (count($page->css)): ?>
<?php for ($i=0; $i < count($page->css); $i++): ?>
<link rel="stylesheet" href="<?php echo $page->css[$i] ?>"/>
<?php endfor; ?>
<?php endif; ?>
</head>
<body>
<?php $this->load->view('header.php'); ?>
<?php $this->load->view($content); ?>
<?php $this->load->view('footer.php'); ?>
<?php if (count($page->js)): ?>
<?php for ($i=0; $i < count($page->js); $i++): ?>
<script src="<?php echo $page->js[$i] ?>"></script>
<?php endfor; ?>
<?php endif; ?>
</body>
</html>
Each page passes in a $page object that contains an array of css and js files. For files that are global, like global.js, you can just hardcode that in at the bottom (same with global CSS at the top). Or, you can set a parent controller that all controllers inherit from. This way you can set up the $page object with default settings (including adding global.js). Then, each controller/method can remove global.js if it's not needed.
Each page also passes in a $content variable with the location of the main view for the page.
You can extend this even further by having multiple layouts and moving some of the HTML into the layout (e.g. 1 column, 2 column, 3 column layouts). In those cases, you may pass in multiple view locations for each column, etc. It's really up to you.
Of course, to keep all JS at the bottom you'd need to move all your page-specific custom JS into JS files. That's actually the best way to go, considering external JS can be cached.
Make a helper function; and load a view where you include that global.js script. Anytime you need global.js to be located at the bottom of the page, just call that helper function.
Another option is to use a template library.
I use this one by Williams Concepts.
It allows you to add JS (and CSS for that matter) for individual class/method calls.
For example:
class foo exends Controller {
public function bar() {
$this->template->add_js('js/jquery.js');
$this->template->add_js('alert("Hello!");', 'embed');
$data = $this->some_model->get_data();
$this->template->write_view('content', 'user/profile', $data;
$this->template->render();
}
}
Using this you can either add the JS as and when required, or add it into the template for the site.
In your case, I would either add the global.js in the footer of the template or define a region in the footer of the template when you can add any JS required.
Controller / add function
public function add()
{
$data['page_title'] = 'Test | Add Details';
$data['js'] = array('details','details2');
$this->load->view('template/header',$data);
$this->load->view('details/add');
$this->load->view('template/footer',$data);
}
in your footer template load all the common scripts that are needed, like jquery.min.js, bootstrap.min.js and so on. later add the below code
footer
<!-- Jquery Core Js -->
<script src="<?= base_url() ?>assets/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap Core Js -->
<script src="<?= base_url() ?>assets/plugins/bootstrap/js/bootstrap.js"></script>
<?php
if(isset($js) && count($js) > 0)
{
for($i=0;$i<count($js);$i++)
{
?>
<script src="<?= base_url() ?>assets/js/custom/<?= $js[$i] ?>.js"></script>
<?php
}
}
?>
</body>
</html>
pass all the js files to be loaded in the array.
If you have a footer.php file that's included on everypage, why can't you just put your js code in that file?

How can I use Joomlas <?php echo $this->template ?> in Javascript?

how could I use <?php echo $this->baseurl ?> or <?php echo $this->template ?> inside of an Javascript script?
Like this:
!window.jQuery && document.write(unescape('<script src="/xxx/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/jquery-1.7.2.min.js" data-mce-type="text/javascript" data-mce-type="text/javascript" data-mce-type="text/javascript" data-mce-type="text/javascript">
or in a script tag which is not in the index.php
<script type="text/javascript" src="/xxx/templates/<?php echo $this->template ?>/js/plugins.js"></script>
JavaScript fundamentally cannot execute any PHP code. Remember that PHP runs on the server, generates an HTML document, and sends it back to the browser. Then JavaScript begins running. This means whatever data you want to use in JavaScript must already be on the page by the time Joomla is finished running.
If you do need to fetch additional content from Joomla, look into using AJAX requests. You could build a page that outputs $this->template, for example, and then request that page from JavaScript in the background.

Categories