So I have this function called redireccionar()
function redireccionar(){
alert("activaste la funcion");
}
gyazo
and redireccionar() gets called by this:
<button class="btn btn-default" onclick="redireccionar()" type="button">Go!</button>
gyazo
But I do click and nothing happens, its because I render them? How can I fix it? Why it doesnt work? Thanks.
You need to make a separate <script> tag for your custom JS, your first screenshot (http://gyazo.com/c86b48f3f96137bba0e32e1ae72c0daf) shows you have a script tag pulling in bootstrap and within that tag you are specifying your code.
Example solution:
<script src='/path/to/bootstrap/cdn'></script>
<script>
function redireccionar(){
alert("activaste la funcion");
}
</script>
See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-src
Oh! I just checked your picture and found something like this:
<script src="......bootstrap.min.js">
//your code here
</script>
You shouldn't include your script within that bootstrap framework. Do like this:
<script src="path-of-boostrap.min.js"></script>
<script>
//your code here
</script>
¡Hola Ruben! Your first screenshot shows the problem. Your function has to be surrounded by separate <script></script> tags, not inside of the linked bootstrap js file. Everything else should be fine so far.
Related
I would like to remove everything inside of an HTML-section, using JS, but there are <script>-tags inside of the section and JS does not remove them, why and how can I do this?
Code:
document.querySelector(".desktop_only").remove();
<section class="desktop_only">
The JS removes this text.
<script> alert("It does not remove the alert, why?"); </script>
</section>
The problem is HTML scripts are usually run first, then come any included scripts at the bottom of the HTML, so the alert script is probably removed after it already ran. It would be helpful if you added a codepen.io link!
This is a question from a noob in javascript. I tried to find something similar the last two days but I didn't find. I try to pass an html image element to an external javascript file which I include to the rest html code. The javascript fade in and fade out an image. Because I want to use different images everytime, thus I want to have a function in an external javascript file.
What I did so far:
PHP and HTML:
<?php
if ($success){
echo"<link rel='stylesheet' href='js/jquery-ui-1.11.4-smoothness.css'>
<script src='js/jquery-1.11.3.js'></script>
<script src='js/jquery-ui-1.11.4.js'></script>
<img id='tick' src='tick.png'>
<script type='text/javascript' src='js/success_failure_signs.js'>
success_failure(tick);
</script>";
}?>
Javascript file has this code:
function success_failure(tick){
var x = tick;
x.fadeIn();
x.fadeOut(1000);
}
The browser's console doesn't give any error.
It seems that the function success_failure doesn't get the image.
What is wrong on this code and how can I fix it?
Thank you in advance!
You haven't defined tick when you make your function call. Try this...
<script type="text/javascript" src="js/success_failure_signs.js">
</script>
<script type="text/javascript">
var tick = $("#tick");
success_failure(tick);
</script>
EDIT: I've also separated the inclusion of the script and your code to call it into two separate script tags.
maybe passing the image to the script is the wrong way of thinking here.
Most of the time with Javascript for web pages the JS gets the image from the HTML site itself.
You are already including jQuery so look into how to get an element from the page with jQuery.
I am facing a problem that I am not able to solve since few days.... The problem is that when I hardcode HTML tags with values the page is getting loaded with no issues....but while try to load data dynamically by parsing rss feed and then using append to insert the data in the main tag it's not working.... I tried tracing the output of the java script by using alert fucntioin and the output is the extact html that is required...
My code was working fine until I added
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1");</script>
I am also calling jquery 1.10.2 at bottom of the page referring to lots of other js
The code is as below:
<div id="grid">
<script>
myFunction('test');
</script>
</div>
Fucntion:
function myFunction(var1) {
$('html').removeClass('no-js');
if ($.browser.safari || $.browser.webkit) {
$('grid').addClass('webkit');
}
$('#grid').facebook_wall({
id: var1,
access_token: '193673707489176|55a9bc60f1b35074263ea95e45218fc3',
limit: 1
});
};
</script>
Please help I am not able to trace it....
Don't need semi colon after function myFunction (){ }
First off, I'm new to JQuery, so sorry if this is something simple and I'm just missing it.
I'm attempting to use the jquery plugin called "tooltipsy" (http://tooltipsy.com/).
The end goal is for this look here: http://screencast.com/t/4AghhAI7dL
This is what currently happens: screencast[dot]com/t/mBAIm67lM6W1 (sorry, couldn't post more than two links)
Inside my code I've copied it nearly identically from the examples, but I can't seem to get it to work. This is running inside a twig template file for a WordPress website, but I don't believe that, that should affect it (of course I could be, and probably am wrong)?
<a class="hastip" title="Phone Here">(ES?)</a>
<script type="text/javascript" src=" {{ wp.get_stylesheet_directory_uri() }}/assets/js/tooltipsy.min.js">
$('.hastip').tooltipsy();
</script>
It links to the CSS file in the header information, and the link works just fine.
My issue is the "tooltip" itself does not appear and I can't figure out why?
Would appreciate any and all help, thanks!
<a class="hastip" title="Phone Here">(ES?)</a>
<script type="text/javascript" src=" {{ wp.get_stylesheet_directory_uri() }}/assets/js/tooltipsy.min.js"></script>
<script>
$(document).ready(function() {
$('.hastip').tooltipsy();
});
</script>
You can't have code inside a script src.
A simple script tag inside the body tag doesn't seem to work. The alert doesn't get triggered in the code below:
<body>
<script type="text/javascript">
alert('Hello');
</script>
{{>main}}
</body>
Any idea why?
Edit:
Just tried it with a fresh meteor app, no alert tag still:
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript">
alert('Hello');
</script>
{{> hello}}
</body>
<template name="hello">
<h1>Hello World!</h1>
{{greeting}}
<input type="button" value="Click" />
</template>
Weird thing is when I copy paste the source of the html, made a new html page, and the alert will work.
Edit3: I deployed this app here: http://alert-in-body-test.meteor.com/
Do you get an alert box?
This question is still relevant in the current version of Meteor (version 0.5.4) so I wanted to describe how to include script at the end of the body.
To execute javascript at the end of the body, register a Handlebars helper and put the relevant code there, like this:
In client.html:
<body>
{{renderPage}}
{{afterBody}}
</body>
...
In client.js:
if (typeof Handlebars !== 'undefined') {
Handlebars.registerHelper('afterBody', function(name, options) {
$('body').append('AFTER BODY');
});
}
(For a great description of why this is required, see Rahul's answer to a similar question here: https://stackoverflow.com/a/14002991/219238 )
Its working for me
in onrender call this jquery
$.getScript('yours url')
It should work.
I have just pasted this inside one of my projects and it worked.
Your {{>main}} is strange for me tough. Also make sure that <body> is inside <html> tag.
Meteor is constructing the entire DOM from Javascript by rendering your page as a template -- the 'source' for your page as seen by the browser is basically:
<script type="text/javascript" src="/5a8a37bef5095c69bcd3844caf3532e1ba6d49bf.js"></script>
I can't find a definitive page stating that embedding a script tag in a template like this won't cause it to be executed, but it definitely feels against the spirit of what the framework is trying to achieve.
If the point is to achieve a clean separation of your markup and logic then why put it in the template. A better solution would be to use the meteor.startup call
Instead of looking the rendered html at developer tools, try looking the real downloaded html.
You will find a (probably) empty tag, with tons of script tags inside the .
In other words, the body of your meteor application is not the body of the final html, it's just your main template.
Instead, this ton on scripts shipped by Meteor, will load your templates.
So, your code will not run, cause it's been placed there. It's like when you manipulate DOM (with jQuery, for exemple), placing a script tag in DOM, after it's loaded. This script tag will not run.