How to include a script if element has a class? - javascript

Let's say I have:
<body class="hello">
How can we do something like the following?
if($("body").hasClass("hello")) {
<script src="/demo_js/ion.rangeSlider.min.js"></script>
}
I was wondering if maybe doing something like:
if($("body").hasClass("hello")) {
document.write('<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></'+'script>');
}
That looks fine but it's a mixup of jQuery and JS and I am not sure if that's the correct way anyway.
It'd be even better if this could be done via the backend in php but I am not sure how to check if an element has a class in php neither how to tell it to include a script if it does.
How would you approach it?
One trick in php I thought is the following but then again, is there any better way?
<?php
$hello = "hello";
if($hello) { ?>
<script...
<?php } ?>
<body class="<?php echo $hello; ?>">

The jQuery function for this is $.getScript.
https://api.jquery.com/jQuery.getScript/
$.getScript( "/demo_js/ion.rangeSlider.min.js" )

Related

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

Facing trouble to insert php variable in javascript code

I'm trying to insert php variable in a javascript code but unable to get the result. Code is:
<?php $twitterusername = get_option_tree( 'twitter_name', '', 'true' );?>
<script type="text/javascript">document.write(unescape("%3Cscript src='http://twitterforweb.com/twitterbox.js?username=$twitterusername&settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E"));</script>
Actually my text editor is not marking $twitterusename inside the script as valid php code. Please help me out.
Try this:
<script type="text/javascript">document.write(unescape("%3Cscript src='http://twitterforweb.com/twitterbox.js?username=<?php echo $twitterusername;?>settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E"));</script>
As it's a PHP variable, you need to echo it out with PHP, not javascript.
So you need to replace
$twitterusername
with
<?php echo $twitterusername; ?>
Even though it's inside the <script> tags, it's going to echo out whatever $twitterusername is as long as it's in PHP tags.
If your server supports shortcode, you could use
<?=$twitterusername;?>
making it slightly shorter.
<script type="text/javascript">document.write(unescape("%3Cscript src='http://twitterforweb.com/twitterbox.js?username=<?=$twitterusername;?>settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E"));</script>
It is not valid php code, you need to mark it as so using <?php echo $twitterusername; ?>.
Your final code would look like:
<?php $twitterusername = get_option_tree( 'twitter_name', '', 'true' );?>
<script type="text/javascript">document.write(unescape("%3Cscript src='http://twitterforweb.com/twitterbox.js?username=<?php echo $twitterusername; ?>&settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E"));</script>
You need to use php tags (<? ?>) to insert variable.
<script type="text/javascript">document.write(unescape("%3Cscript src='http://twitterforweb.com/twitterbox.js?username=<?=$twitterusername?>&settings=0,1,2,248,279,ffffff,0,c4c4c4,101010,1,1,336699' type='text/javascript'%3E%3C/script%3E"));</script>
It's because you are using your PHP variable outside PHP tags.

How Can JQuery be embedded in the <body> and </body> Tags in Joomla 3.1?

I've added this code below to my default.php file in joomla 3.1.
<?php
JHtml::_('jquery.framework');
JFactory::getDocument()->addScript(JURI::root().'template/mytemplate/js/jquery.min.js');
?>
This only embeds the script inside the head tags.
Is there a way i can make it appear in the body tag?
You can simply put
?>
<script type="text/javascript" src="<?php echo JURI::root();?>templates/<?php echo $app->getTemplate();?>/js/jquery.min.js" />
Into your template index.php
or
?>
<script type="text/javascript" src="<?php echo JURI::root();?>templates/mytemplate/js/jquery.min.js" />
into any template override
I can't see the benefit of doing this though at all.
As mentioned in my comment on the other question, you can't import jQuery in the <body> tag using the JHtml() or JFactory method. These methods add the script to the <head> tag automatically.
The only way you can achieve what you want is to use <script> tags, however please see how I have done it:
<?php
// load jQuery, if not loaded before
if(!JFactory::getApplication()->get('jquery')){
JFactory::getApplication()->set('jquery',true);
?>
<script>
jQuery.noConflict();
</script>
<script src="<?php echo JUri::root(). 'template/mytemplate/js/jquery.min.js'; ?>"></script>
<?php
}
?>
This basically checks to see if jQuery is being imported already and if not, then it imports it. Add this code to the index.php in your template folder.
If you see the following in your index.php:
JHtml::_('jquery.framework');
then remove it.
Please bare in mind that this is not a recommended method however it's the only way that I know of to import it after the <body> tag.
Also note that if you ever update your template, then your changes will be lost

javascript not calling php variable

I'm making a website that has 3 documents. The Php document that has all html structure and script, the css document that has no interest in the question, and the javascript document.
I'm trying to input html contents of a javascript variable through .innerHTML statement. And to do that, I need (of course) to code the HTML content, and so I do the code within the javascript file itself. Like so:
document.getElementById("exp").innerHTML = "<div class=\"cell\">\
<div class=\"project_cell\"><img src=\"img.png\"></div>\
<div class=\"project_cell\">text</div>\
</div>\";
And this works. However, the code is obviously not just this. It's a complex HTML structure that I do not wish to see in the javascript file. So I would like to put the HTML content to be inside this variable into a text file, using PHP, and make that variable on the innerHTML statement instead of all the code.
My PHP file is like this.
<html>
<head>
<title>sample</title>
<?php
$filename = "thisishtml.txt";
$doc = file_get_contents($filename);
?>
<script src="javascriptfile.js" type="text/javascript"></script>
</head>
<body>
...call javascript function...
It seems ok to me, but if I do like:
document.getElementById("exp").innerHTML = "<?php echo $doc ?>"
It doesn't work. I've tried simple text and I've tried with a new project, and it works on a new project, but not in this one. What am I doing wrong? I've looked to many questions and tutorials and didn't help and that's why I'm looking for help in here.
Thank you very much for your time. I hope we could solve this.
Chances are you need to escape the contents of $doc for JS output.
document.getElementById("exp").innerHTML = <?php echo json_encode($doc) ?>;
If your javascript code is in a javascript file, PHP does not process that so you cannot execute PHP code there.
So you can either put the javascript code directly into the PHP page
<script type="text/javascript">
function someFunction()
{
document.getElementById('exp').innerHTML = "<?php echo $doc ?>";
}
</script>
or you can do the follow:
<script type="text/javascript">
var doc = "<?php echo $doc ?>";
</script>
Then in the javascript file do:
function someFunction()
{
document.getElementById('exp').innerHTML = doc;
}

can i separate JavaScript If condition?

in PHP we can put HTML between codes like this:
<?php
if (condition) {
?>
<p>True</p>
<?php
} else {
?>
<p>True</p>
<?php
}
?>
can we do this in javascript ? like this ?
<script language='JavaScript'>
if (condition) {
</script>
<p>True</p>
<script language='JavaScript'>
} else {
</script>
<p>True</p>
<script language='JavaScript'>
}
</script>
There's something like this that has the effect you posted (maybe not your intention though, it's hard to say), but I wouldn't do it.
<script type="text/javascript"> //language == deprecated!
if (condition) {
document.write('<p>True<\/p>');
} else {
document.write('<p>True<\/p>'); //maybe False here?
}
</script>
But again this is just a demonstration of the effect, try to avoid document.write (it' a blocking operation) whenever possible.
Update: Edited based on comments below to make this example you shouldn't use! valid, but you shouldn't be copy/pasting it in the first place...
No. Browsers will output things in order that it sees them, without considering any conditions of other media on the page.
This works in PHP because the PHP interpreter interprets your code before sending the output to the client browser window. In other words, the actual HTML document being sent to the client is parsed and computed before being sent to the requesting browser. With Javascript mostly being a client-side scripting language this method is not possible, since you already have your HTML document generated from a server-side language such as PHP. You can manipulate the document in other ways using Javascript, with technologies such as Ajax and the DOM.
not that i know of, but for php do this instead
<?php if (condition): ?>
<p>True</p>
<?php else: ?>
<p>False</p>
<?php endif; ?>
=)

Categories