Develop Reference

Passing in values into a jquery function with a # at the beginning

I have a script which is located in its own .js file, which I believe is used to look for a specific anchor and assign an onclick event where it will forward the user to another page.
$(document).ready(
function () {
"use strict";
$(".popup a").on(
'click',
function (event) {
event.preventDefault();
$("#the_link").click();
}
);
}
);
What does #the_link mean in the context of the rest of the code? I am trying to find out how and where it is getting its value from but I can't find it anywhere. Help!
I also replaced #the_link with www.google.com, but then after nothing happened where before a window pops up. What could I do to make it go to google? <-- testing purposes.
PS. I am very very new to javascript.
PSS. In honesty, I am not sure what is going on in that code above.

That is jquery, not plain javascript (so you might add the jquery tag to your question).
$() is jquery, and the # means get me the element with the id of "the_link". Go search your document for an id="the_link", there will be no # in the id field, the # is used to tell jquery you are querying by element id, as opposed to some other type of query (by other attribute, by class, etc).
In a valid HTML document, exactly one element may have a given id, so selecting by # is a way to refer to a unique element in the document.

$("#the_link") is jquery syntax, and it refers to the element with an id of "the_link" that is located in the HTML markup.
Somewhere in the HTML, you have (for example):
<a id="the_link" href="#">...</a>
Here, the href attribute is where you would insert the http://google.com to go to that link when the anchor element is clicked.
<a id="the_link" href="http://google.com">...</a>
Alternatively you can write in your javascript:
function (event) {
event.preventDefault();
window.location.href = 'http://google.com';
}

It means that you are accessing element with id the_link. Some of your elements in html has attribute id="the_link".
If you want to go to google.com when the_link is clicked:
document.getElementById("the_link").onclick = function(){
window.location.href="http://google.com" //this goes to google.com
};

How to add url link from jquery through css element?

Here is the code:
<span class='maincaptionsmall'>
Test
</span>
For some reasons of ajax and jquery codes in my page, I can't use HREF as Link, I mean, I can't use something like this following code:
<span class='maincaptionsmall'>Test</span>
So, How can i use jquery to get this css element maincaptionsmall and it will set it to href link ?
Even I can't use <div> too, I should use everything as <span>
Please give me an example that how to use jquery to set css element as href link.
Thanks in advance

CSS is not capable of doing such things. But JavaScript is! To change the href of an element first obtain the element:
var e = document.getElementById("elementid")
or
var e = document.getElementByClassName("elementclass")
Here are the basics on JavaScript selectors.
And then we can change the href property like so:
e.setAttribute("href", "http://google.com")
Good Luck!

You can open using JS/JQuery and CSS
Jquery has short simple code and is too fast too so I prefer that:-
Here is the Code :-
HTML
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
//Remember to add JQUERY on your page to make any jquery code work
<div id="example">Click Here</div>
JS
//UPDATED CODE:-
$(document).ready(function() {
$("#example").click(function () {
alert("K");
window.open('http://www.google.com/');
});
});
the Issue was that the function I gave you should be added under "$(document).ready(function(){"
Reg, "DIV or SPAN" u can use any tag, but give ID to that and whatever ID you are giving, mention the same in jQuery code too!
And Reg, JQUERY being called, please check on your page is there any other MAIN Jquery file being called? if there is already some other Jquery being called then this one is not required.
Please Check the updated Fiddle for your reference: http://jsfiddle.net/aasthatuteja/aPbje/
Let me know if this resolves you issue.
Enjoy!

Prefixing a URL in an window.open function jQuery

I have this HTML:
Track Your Package »
Somebody on this site was able to provide me with a script to prefix the URL with the domain http://www.example.com/ Here's the script:
$(document).ready(function(){
$('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick', $('a[onclick^="window.open(\'TrackPackage.asp"]').attr('onClick').replace("window.open('", "window.open('http://www.example.com/"));
});
However, I am having a little trouble with this:
The first issue is where there is multiple instances of the element. Here's a fiddle: http://jsfiddle.net/VMmZx/
Instead of one anchor being signed with ID=4 and the other with ID=5 as intended, they're both being signed with ID=4.
The idea is, each window.open function should be prefixed with http://www.example.com however, the remainder of the URL should remain intact...
The second problem I'm encountering is when the element does not exist on a page, the remainder of the jQuery fails...
Here's another fiddle: http://jsfiddle.net/VPf32/
The <a> should get the class foo, but since the element does not exist on the page, the jQuery does not execute.
Since the JavaScript is being included in the HTML template of the ASP.NET server, this can create many problems.
I hope I've been clear and you can help me. Thanks.

You can use .each() to iterate over each matching element and change them individually:
$('a[onclick^="window.open(\'TrackPackage.asp"]').each(function(index, element) {
element = $(element);
element.attr('onclick', element.attr('onclick').replace(/open\('/, 'open(\'http://www.example.com/'));
});​
However, I don't think using links with a href of # and an onclick opening a window is as semantic as it could be. If possible, try changing the markup to this:
Track Your Package »
Now if someone is curious where it will lead them, the browser can show something useful in the status bar when you hover over it.
If you need to adjust the behavior further, add a class and bind for the click event. When they click, prevent the default action and open the window yourself, as you did before.

Why are you doing the click even inline like that? I would just output the links like:
Link Text
And then:
$('a[target=_blank]').click(function(){
var prefix = 'http://domain.com';
window.open(prefix + $(this).attr('href'));
});

HTML buttons in javascript codes

I am working in a software which has its interface written in JavaScript
I am trying to add an HTML button to the interface by defining a button in the HTML main code, check how I did this http://dpaste.com/691324/
The problem is,, the button appears before the page loads, maybe because the HTML loads before the JS files, I don't know exactly !!! But it really looks ugly, when the button show before the page, and I want to find some trick that can delay the button or to be loaded at the same time with the javascripts..how is this possible?

I am not a javascript person, but if you are using JQuery, it should go something like this
$(document).ready(function() {
document.getElementById('divId').innerHtml = '<input type="button" value="button">';
});
'divId' would be id of Div tag (place holder) covering input tag.
Or you can also call some plain javascript function which sets innerHtml of 'divId' on 'Body' tag's onload event,

Well I think is that you should use an anchor instead, and if you want, style it as a button. Here is the way to create the button with pure JS:
var anchor = document.createElement('a');
anchor.setAttribute('href', '/opentripplanner-tripArabic/index.html');
anchor.setAttribute('class', 'please use CSS'); //inline styling is dirty
anchor.innerHTML = 'use the Arabic interface';
document.getElementById('header').appendChild(anchor);
I recommend to use anchors because you are not using a form, and you only pretend to redirect the user to another page. Either way if you want still the button, you can use document.createElement('button'); and asign the property onclick: button.onclick = function(){... instead of the href setting.
Another thing you can do is to hide the button with CSS: display:none and on load wet the element and remove the style: button.style.setProperty('display', ''); or either way use the CSS propperty visibility: hidden.

Javascript not making div show

I'm having trouble making a div show up using javascript.
<div class=" notification success">
x
<p>An email has been sent confirming your identity.</p></div>
<script type="text/javascript">
var notification = '.notification';
$(notification).show();
</script>
</div>
Any ideas?

Place your jquery js in a document.ready() otherwise you cant ensure that the DOM is fully loaded and ready.
Your need is just a one liner like so
$(document).ready(function()
{
$('.notification').show();
});

You need to have double or single quotes surrounding the selector if you're naming a specific element ("#id", ".class").
Best way to do this is to avoid using the variable. It's just three extra characters anyways.
Also, put your code into a $(document).ready(function(){}); function like this:
$(document).ready(funciton(){
$(".notification").show();
});
To minimize the amount of code you're putting in, you can just use this instead:
$(function(){
$(".notification").show();
});
$(function(){}); can replace $(document).ready(), as by default jQuery selects the document.