jQuery problem, jQuery takes over all links on page - javascript

<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$("#results").load( "jquery-routing.php", { pageNo: $(this).text(), sortBy: $("#sortBy").val()} );
return false;
});
});
</script>
<div id="results"> </div>
1
2
that code works fine, only problem that after I run it all my a href links stop to work! The links become jquery ajax calls.. why?

You're $("a") selector matches all <a ...> tags, you need to change it to something more specific:
$("a#someid")
$("a.someclass")
$("div#somecontainer a")

To target specific links, use the id or class tag on your anchor tags.
E.g.
<a class="link1" href=""></a>
<a id="link2" href-""></a>
Do note that id tags are unique within a page and can only be used once.
Reference those links in jQuery using:
$('a.link1').click(function() {}
$('#link2').click(function() {}
or you can combine both:
$('a.link1, #link2').click(function() {}
What you need to do is assign an id or class tag to the link that will call the ajax request. E.g. <a class="ajax" href="">ajax</a> and referencing it with $('a.ajax').click(function () {}

Your setting the onclick event of all anchor tags on the page. Try only selecting the link that you want instead of the more general $("a")

Your selector $("a") indicates all the hiperlink in your page.
You may need to give a specific id to the hiperlink where you want your ajax call to work and then change the selector based on that.
ex:
<a id= "my-link" href="" >ddd</a>
$("a#my-link").click()

Related

How to execute a <script> tag in a <a> element in html?

Heres my code:
<div>
<a onclick="settings()">
<script type="text/javascript" src="popup.js">
<img src="icons/gear.png"
</a>
</div>
I wanna keep the icon for the button
You can create an EventListener which will listen when someone clicks on the anchor tag (<a></a>).
So to do this, first let's give our anchor a class name, for this example:
<a class="example">Click Me</a>
Now, in our javascript file, we need to select this element by its class name. To do that we need to:
Define a variable (myVariable)
Select the anchor tag and assign it to that variable.
So:
var myVariable = document.querySelector('.example');
We created a variable and named it myVariable. We use document.querySelector('.example') to select our anchor element by its class name and assign it to our variable.
Now we need to create an EventListener:
myVariable.addEventListener('click', () => {
// some code to be executed
})
Here you can see that we used the variable followed by a dot (.) and addEventListener().
Q: Why did we use the variable name?
A: We use the variable name before .addEventListener because we actually want to "listen" when someone executes a specific event on our anchor tag, in this case the "click" event.
Note: You should never put inside some div element.>ou always add them to the bottom of the page, before the closing </body> tag.
So it should look like this:
</body>
<!--Some Code-->
<script src="example.js"></script>
</body>

Click on Anchor tag is not working

Click on Anchor tag is not working..Here is my code:
$('#selectall').onclick(function () {
console.log("Hello");
});
<li>
<a class="selectall" id="selectall">
<i class="fa fa-square-o"></i> Select All
</a>
</li>
Try the click event!
the problem is that "onclick" isn't supposed to used this way. You can either do
$('#selectall').click(function ....)
or
$('#selectall').on('click', function ....)
a
$('#selectall').onclick(function ... )
does not exist for jQuery. 'onclick' is by default a javascript function.
$('#selectall').click(function () {
alert("Hello");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li><a class="selectall" id="selectall"><i class="fa fa-square-o"></i> Select All</a></li>
you are using jquery it seems, so instead of onclick you should use click
just apply
<a href="javascript:void(0)".... >
or
<a href="#".... >
and use method as "click" not "onclick"
Since you also id-ed it with "selectall", the "#" is allright. You do need
$('#selectall').click(function () {
tho.
Also, when is your js executed? If the above js-code is executed BEFORE the html containg the anchor tag is rendered, it will fail, because there is nothing yet to bind it to.
I assume the $ is jQuery so use .click() not .onclick()
otherwise, the vanillaJS code is
document.getElementById('selectall').addEventListener('click',function(){
console.log('hello');
},false);
I always use delegate events, so a.selectall elements can be added/removed dynamically w/out messing up your click listener.
$("body").on("click", ".selectall", function(evt){
//click handler code here
});

jQuery script for image change, not working

I want to change src of in img, I coded as below, but it's not working, what's wrong?
<img id='logo_image'/>
<span onclick='$(logo_image).attr("src", "images/logo_orange.png");'>click me</span>
It might be the problem with your selector.
If it is id use $('#logo_image')
If it is class use $('.logo_image')
First up you're trying to use a variable logo_image when you should be using a string starting with # to indicate you want to select by id:
onclick='$("#logo_image").attr("src", "images/logo_orange.png");'
Secondly, it would be better not to use an inline onclick attribute if you can help it:
<img id='logo_image'/>
<span>click me</span>
<script>
$("span").click(function() {
$("#logo_image").attr("src", "images/logo_orange.png");
});
</script>
...where ideally the span element would have some id or something to select it by.
Thirdly, don't make span elements clickable in the first place unless you don't care about making your page accessible to people who can't (or who choose not to) use a mouse or other pointing device. Better to use an anchor (which you can style as you see fit) so that the user can tab to it and activate it with the keyboard:
<img id='logo_image'/>
click me
<script>
$("a").click(function(e) {
e.preventDefault();
$("#logo_image").attr("src", "images/logo_orange.png");
});
</script>
The problem with your code is you aren't probably setting the object to logo_image variable.
I suggest changing it to:
<span onclick='$("#logo_image").attr("src", "images/logo_orange.png");'>click me</span>
logo-_image should be the id of that image.
Since you want refer to the name of the id, you have to wrap the logo_image in quotes, otherwise Javascript will treat it as variable.
$('#logo_image')
You have to use something like this:
<img id="logo_image" src="" />
<span onclick='$("#logo_image").attr("src", "images/logo_orange.png");'>
click me
</span>
if you have an img with a id named logo_image
if your img has the css class logo_image you have to write:
<img class="logo_image" src="" />
<span onclick='$(".logo_image").attr("src", "images/logo_orange.png");'>
click me
</span>
Make sure u use the right quotes in the javascript part.
Also use $('#logo_image') selector to get the image by id.
I made a jsfiddle for you to demonstrate:
http://jsfiddle.net/9Ltfa/
<span onclick="$('#logo_image').attr('src', 'images/logo_orange.png');">click me</span>
As you have specified the image as an id, you will need to reference the image via the following code:
$('#logo_image')

Image anchor click is not working in IE7?

I have below image anchor inside a form. Form id is myForm. On click i will call some database call and i have below html code and jquery code.
<a id="new"><img src="image.gif"></a>
jQuery code:
$('#myForm #new').click(function() {
alert("new byutttton clickeddddd");
});
But it is not alerting. Am I doing anything wrong here? It works fine in FF.
"<img src="image.gif">"
I think you are missing href tag use like this
IE7 most likely required an href attribute on the element. You may want to use a different element other than an anchor for this functionality. you also only need one ID for the selector as they should be unique.
Try
<a id="new" href="#"><img src="image.gif"></a>
$('#new').click(function(event) {
event.preventDefault();
alert("new byutttton clickeddddd");
});
I would switch to the 'on' jQuery event
HTML
<img src="/" alt="my image" />
jQuery
$("#new").on("click", function(event){
event.preventDefault();
alert("new byutttton clickeddddd");
});
Remove #myForm. You are overqualifying the selector as well. But that's not a big deal I suppose.

Dynamically load link in rel attribute.

I want to dynamically load content using jquery's .load() function. Im storing the links in the .rel attribute of the links. I've got it setup like this:
<script>
$(document).ready(function(){
$('.sidebar_link').click(function(){
var link = this.attr('rel');
event.preventDefault();
$('#content').empty();
$('#content').load(link '#content');
});
});
</script>
<div class="main_menu">
<a class="sidebar_link" href="#" rel="photos.htm">Photography</a>
<a class="sidebar_link" href="#" rel="furniture.htm">Furniture</a>
<a class="sidebar_link" href="#" rel="services.htm">Services</a>
</div>
</div>
Its not working - It doesn't seem to be grabbing the link out of the rel attribute and Im not sure why. Any ideas?
Try this:
var link = $(this).attr('rel');
.attr is not a native JavaScript function, it is from jQuery so you have to wrap this with jQuery
And this:
$('#content').load(link);
You can pass an id for loading fragments, however the url and the id need to be a string literal like so $('#content').load('photos.htm #content') The photos.htm page would need to have an element on the page with id content. If you just want to display the entire contents of the page, just use the url.
In your click handler this is a pure dom element; you need to call the jQuery function on it before accessing the rel attribue
$('#content').load($(this).attr("rel"));
$('#content').load(link '#content');
This is almost certainly throwing a syntax error -- check your JavaScript console. I think you just want .load(link);.

Categories