Properly resolving variable in HTML - javascript

So I have a some HTML where I am pulling a value from a file and using it for a link, like so:
page
Now I need a popup to display that page when clicked, using a basic script and a line like this:
page
However, I need the popup page value to be pulled from the file as well, so something like this:
page
But the problem I am having is that the variable does not resolve in the popitup() call, I assume because of the apostrophes basically telling it to take that literally. What could fix this and make it resolve?
This is in conjunction with AngularJS

I'm going to assume that the first snippet you posted. If it works, great; this answer should work for you. If not, well, I don't know - more information would be needed, like a fiddle illustrating the problem or know what templating engine you're using.
Since the function "popitup" needs the save value as the href of the link, why not pass in the href of the link?
page

ngClick is the way to deal with that kind of things if you are using Angular.
This was anserwed here, and if you really need the onclick attribute: how to pass angular js variable inside onclick function as parameter

Related

Add javascript to cover page button

I have a button on my cover page and I need to assign to it 1 line of javascript code (namely javascript:languageClicked(0); to work with this neat addon: Multilingualizer) .
So the button should execute that line of code and do its usual job, namely to send the user to my main webpage.
thx in advance
Is the languageClicked function code from Multilingualizer? If so, maybe that addon isn't enabled correctly on your page or something and the js files for it are not being loaded.
But, once they are loaded. You can replace your button with this code:
ENTER
Screenshot
Since you want the user to be redirected to /expnew after activating languageClicked.
Hope this helps! Also, there is one catch though; don't change this unless you know for sure you have those JS libraries loaded. ^_^
Without some HTML snippets and the name of the button you are working with, it is hard to know exactly how to help. However, I can share some general knowledge that may provide the answer for you.
The two most common ways that JavaScript triggers are implemented are:
1. <a> "link buttons":
Your code might look something like:
Click me!
2. <input>/<button>/any element onclick events:
Your code might look something like:
<button onclick="javascript:languageClicked(0)">Click me!</button>

How to take different approaches based on whether Javascript is enabled or not?

We're using JSON in some parts of our PHP project. The edit part has been programmed by JSON, so the href part contains something like below:
Edit
We want to check that if Javascript is disabled then change the URL as follow, because the above link would not work if JS is disabled:
Edit
We tried <noscript>, but we gain no success. how to do something like above, we're stuck here.
I appreciate in advance.
Default to your non-Javascript state, then use Javascript to cancel the following of the link. Users without Javascript will then follow the link, and those that have it enabled will not.
Maybe you can build your page normally using the php link href="./edit.php?id=12&text=some_text_here" and when your document is loaded execute a javascript function that will replace the href attribute of the <a> tag with javascript:void(0);
Example of the function with jquery:
$('a.button').attr('href', 'javascript:void(0);');
If the user doesn't have Javascript then the href attribute won't be updated.
You might want to use what is know as "progressive enhancement". This basically means, you write your HTML as if JavaScript is not enabled, then use JavaScript to enhance the features.
This is usually achieved by attaching events, modifying the DOM etc. within a function that is called on page load.
You can do something like this:
Edit
<script type='text/javascript'>
// ...or however you assign a click handler to the element
document.getElementById('button').onclick = function() {
// Do Javascript stuff here
return false;
};
</script>
If you return false from your click handler, the Javascript-enabled browser will not navigate to the link's location. When Javascript is disabled the link will be followed as normal.

Html/Javascript - How to make an html link display a url, and have it actually be redirected to a javascript function?

I have an html page, and I need a link to show that the user would be going to 'example.html', when really, the link goes to 'javascipt:ajaxLoad(example.html);'.
I tried this:
Example
But it didn't work. Any help? I already asked the webmasters stackexchange, and they told me that this would be a javascript programming question. Not an html question.
Example
By returning false you prevent the default action. And this way the links will still work when javascript is disabled, but then you don't get the AJAX functionality.
Just point the href at the actual file. The javascript onclick will take precedence - as long as you take care to disable the actual click effect by doing a "return false" or similar, the status bar will show 'example.html' and not the javascript url.
As well, note that it should be javascript:... (you're missing an r). The onwhatever attributes are already assumed to be javascript, so you could just say onclick="ajaxLoad(...) anyways.
Look, I'm not sure if I got exactly what you're asking about here, but the following fix often works with me. Just change the double-quotes to single-quotes, and put double-quotes around the example.html part
<a href="example" onclick='javascipt:ajaxLoad("example.html");'>Example</a>

jQuery FancyBox/Lightbox problem

i write some html with JS into a div.
like this
$("#picdiv").html("<a rel='lightbox' href='pic.jpg'><img src='htumb.jpg'></a>");
it is just an example.
So, i have in $(document).ready Funcktion this code.
$('a[rel=lightbox]').fancybox();
but if i click on the link, a get to the page with picture... i know the Problem must be, i write the html with js, but i have no other option. So haw can I make fancybox works?
This is due to how jQuery works. The fancybox function will only work for current elements on the page and not ones dynamically added by javascript.
A quick fix might be to be modify the code as follows:
$("#picdiv").append($("<a rel='lightbox' href='pic.jpg'><img src='htumb.jpg'></a>").fancybox());
Not sure if the above will work, but the general idea is to ensure that any new elements created have the plugin applied.
solution
$('.picture_display').find('a[rel=lightbox]').fancybox();

Calling js function in external js file

I'm trying to call a simple function with alert but it wont work when i try call the function (contained in an external js file) from my html page.
I have a import and the call is very simple. Any suggestions?
<head>
<script src="/js/jsFunctions.js" type="text/javascript"></script>
In my code I call
<a href="javascript:displayAlertText('someText');">
Inside the js I have some jquery followed by a function
function displayAlertText(someText)
{
alert('alert' + someText);
}
What you are doing looks like it should work. The problem is likely elsewhere.
Hrefs with "Javascript:" prefixes are really rather horrible. Instead, try rewriting that as:
<a href="#" onclick="displayAlertText('someText'); return false;">
Beyond that (which I don't think would actually be causing it), you've committed the cardinal sin of saying "It didn't work". Did you get any Javascript errors in the console? I suspect you would have, unless a valid function really was called.
Also, try calling the JS function explicitly from within a <script> block on your page, to see at what point it's failing.
Double-check as well that the external file really has been loaded at the time you click on the link - perhaps put a line at the bottom of the external script file to help check this, such as
alert('External file loaded.');
EDIT (based on comment): OK, so we've established you can call the method from "normal" JavaScript on your page. This means that the problem lies with the way that you're trying to call the script from your hyperlink.
Have you passed your HTML through a validator? If the syntax is invalid, then user agents can interpret it however they want, including ignoring it completely.
If the HTML does validate then at this point it might be useful to post a link to your full HTML, so that others can look over it and see where the problem lies. It's possibly something like another function overriding the onclick event for the link, and so your event handler gets lost.
In pure jQuery you would do this like:
$(document).ready(function(){
$('a').click(function(){
alert('here');
})
})
try this instead...
<a href="#" onclick="displayAlertText('someText');">
If that does not help, I would start making sure that your javascript file is loading correctly and doesn't contains some simple syntax error somewhere. View your page with Firebug on in Firefox and look for warnings and errors.
You mentioned jQuery. Is the function standalone or inside a jQuery object (i.e. wrapped inside another function)? This makes difference.
Apart from this problem, the way you invoke the function isn't clean. Move it to the onclick attribute or better make use of jQuery.

Categories

Resources