I'm trying to simultaneously add a class to a clicked link, while simultaneously removing that same class from the DOM. The part of the code that adds the class works, but it just makes the class appear again and again. I'm also curious about the efficacy of a javascript solution vs. a server-side solution.
$(document).ready(function() {
$(function() {
$('#header a span').click(function(e) {
var title = this.innerText;
//possible browser compatability from .text?
$('selected').removeClass('selected');
$(this).addClass('selected');
// Also prevent the link from being followed:
});
});
<div id="header" class="ui-corner-all ui-buttonset">
<a title="index" href="#" class="link" ><span>home</span></a>
<a title="code" href="#" class="link" ><span>code</span></a>
<a title="design" href="#" class="link" ><span>design</span></a>
<a title="illustration" href="#"class="link" ><span>illustration</span></a>
<a title="writing" href="#" class="link" ><span>writing</span></a>
<a title="links" href="#" class="selected" ><span>links</span></a>
<a title="about" href="#" class="selected"><span>about</span></a>
</div>
Change your JS to:
$(document).ready(function() {
$('#header a span').click(function(e) {
var title = $(this).text();
//possible browser compatability from .text?
$('.selected').removeClass('selected');
$(this).addClass('selected');
// Also prevent the link from being followed:
return false;
});
});
By the way, do you want your class selected on the span elements, or a elements, your JS indicates span but your html indicates a.
$('selected').removeClass('selected');
should be
$('.selected').removeClass('selected');
Your class needs (.) Before it I think.
Related
I have a html look like this
<tr>
<td style="padding:0px;">
<a class="list-group-item active change_class" href="<?php echo base_url()."index.php/tester/projectwise_issue_list_display/".$row->project_id;?>"><?php echo $row->project_name;?></a>
</td>
<td style="padding:0px;">
<a class="list-group-item active change_class" href="<?php echo base_url()."index.php/tester/projectwise_issue_list_display/".$row->project_id;?>"><?php echo $row->project_name;?></a>
</td>
</tr>
When I click on the anchor it's not removing my class.
jquery is below....
jQuery('td').click(function () {
jQuery(this).find('a').removeClass('change_class');
});
If I remove href from anchor it's nicely working. I need removeClass with href
Just Change Script like below
<script type="text/javascript">
jQuery('td').click(function (e) {
e.stopPropagation();
jQuery(this).find('a').removeClass('change_class');
});
</script>
You should call your click event on the anchor tag itself.
jQuery('td > a').click(function (e) {
e.preventDefault();
jQuery(this).removeClass('change_class');
});
May be you are looking for removing class from the anchors and you want to have navigation functionality too. Then you have to do this on ready event in a common js file:
jQuery(function($){
$('a[href="' + window.location.href + '"]').removeClass('change_class');
});
What it is doing, when user clicks the anchor user gets navigated to the specified href. Navigation results in a page load so we put it directly inside a ready event. It removes the class if the href of anchor is same as window.location.href.
$(function() {
$("#register").dialog({
autoOpen:false,
show: {
effect:"",
duration: 1000
},
hide: {
effect:"",
duration: 1000
}
});
$("#register-opener").click(function() {
$("#register").dialog("open");
});
});
<td><a id="register-opener" href="?id=<? echo "$members_row[id]"; ?>"><i class="glyphicon glyphicon-pencil" title="Edit"></i></a></td>
So what I'm trying to accomplish is to click on a link to be able to edit a certain users information, the problem is I can only get the popup to occur when replacing the href with href="#". Can someone assist. Thanks.
You need to make some changes in jQuery to achieve this.
$("#register-opener").click(function(e) {
e.preventDefault();
$("#register").dialog("open");
});
Above script will make sure that when ever user clicks on link it doesn't go to URL mentioned in href and execute following codes.
https://api.jquery.com/event.preventdefault/
If e.preventDefault() is called then default action of the
event(click in above case) will not be triggered.
There seems to be problem with dialogue function you have. Use prompt instead and be sure to remove icon inside a tag
jQuery("#register-opener").click(function() {
var person = prompt("Please enter your name", "Harry Potter");
if (person != null) {
document.getElementById("#yourid").innerHTML =
"Hello " + person + "! How are you today?";
//Or do your thing
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a id="register-opener" href="?id=<?php echo '$members_row[id]'; ?>">
icon<i class="glyphicon glyphicon-pencil" title="Edit">
</i>
</a>
</div>
This might be better accomplished by putting your ID in a data- attribute rather than using href, which is meant to be used for specifying a URL for the web browser to follow.
<td><a id="register-opener" href="#" data-id="<? echo $members_row[id]; ?>"><i class="glyphicon glyphicon-pencil" title="Edit"></i></a></td>
You can then access the value of the data-id attribute in jQuery by using
$("register-opener").attr("data-id");
I have this piece of markup. Remember all these are coming from the database. I have used foreach loop and in that I am getting those values
<div id="announcment-wrap">
<div class="announcement-text">
This is again a dummy
| click here
<a id="close" href="#" class="close">X</a>
</div>
<div class="announcement-text">
This is demo 3
| Demo3
<a id="close" href="#" class="close">X</a>
</div>
<div class="announcement-text">
This is demo 4
| Demo again
<a id="close" href="#" class="close">X</a>
</div>
</div>
Now you can see there is a close button <a id="close" href="#" class="close">X</a>. I want that when someone will click on close button then it will only hide that div()
In jquery when I used
jQuery(document).ready(function($) {
jQuery('#close').click(function() {
jQuery('.announcement-text').hide();
});
});
it is only working for the first block and also it is hiding the total all blocks? So can someone tell me how to make that when someone will click on that close button and it will hide that particular block.Thanks
ID should be unique so use selector as .close not #lose
Try http://jsfiddle.net/devmgs/ZGjaj/
Your each text is
<div class="announcement-text">
This is again a dummy
| click here
<a id="close" href="#" class="close">X</a>
</div>
USe
$(document).ready(function($) {
$('.close').click(function() {
$(this).closest('.announcement-text').hide();
});
});
Try:
jQuery(document).ready(function($) {
jQuery('#close').click(function() {
jQuery(this).parent('.announcement-text').hide();
});
});
Id's should be unique so use class instead,and try using .closest()
| Demo3
<a class="close" href="#" class="close">X</a>
-----^
jQuery(document).ready(function($) {
jQuery('.close').click(function() {
jQuery(this).closest('.announcement-text').hide();
});
});
Since the close button is inside the div, u can make use of the .parent() function to select the div.
jQuery(document).ready(function($) {
jQuery('#close').click(function() {
jQuery(this).parent().hide();
});
});
all the best!! hope this helps.
You need to use the class i.e .close to work for all close close button Or specify different id to all of them .
jQuery(document).ready(function($) {
jQuery('.close').click(function(){
jQuery(this).closest('.announcement-text').hide();});});
First of all, you cannot have the same ID for all the Close buttons, Remove duplicate ID.
This won;t work in IE7 <
$(document).ready(function($) {
$('.close').click(function() {
$(this).parent('.announcement-text').hide();
});
});
So, I understand that mixing javascript into HTML is bad, even in head. But lets see this code (I want to remove items the from list)
.
.
.
<div>item1 delete me<br />
<div>item4 delete me<br />
<div>item5 delete me<br />
.
.
.
This list is generated by PHP. deleteThisItemById() is in an external .js file. Is this still considered bad?
If so, what would be a canonical solution? jQuery is acceptable, as is raw javascript.
$(function() {
$('a#my_id1').click(function() {
var myId = $(this).attr('id');
return deleteThisItemByID(myId);
});
});
<div>
item1
<a id="my_id1" href="#">delete me</a>
</div>
By the way, your HTML is invalid. You have improperly nested div tags.
Simple... give the item you want removed a class or id (only use an id if its only one item)
<div>item1 <a href="#" class='deleteMe'>delete me</a><br /></div>
<div>item4 <a href="#" class='deleteMe'>delete me</a><br /></div>
<div>item5 <a href="#" class='deleteMe'>delete me</a><br /></div>
Then target the elements with jQuery
$('.deleteMe').on('click', function(event) {
$(this).remove();
});
Note... if you wanted to remove the entire div, use this selector:
$('.deleteMe').closest('div').on('click', function(event) {
$(this).remove();
});
you could use addEventListener to do this.
Then no js-code will be in your html:
var elems = document.querySelectorAll("div.removable");
for(var i=0;i<elems.length;i++){
elems[i].querySelector("a").addEventListener("click",function(e){
var toRemove = this.parentNode;
var parent = toRemove.parentNode;
parent.removeChild(toRemove);
},false);
}
however, I iterate over the divs, so I added a class for this:
<div>
<div class="removable">item1 delete me</div><br />
<div class="removable">item2 delete me</div><br />
<div class="removable">item2 delete me</div><br />
</div>
Have a look at this fiddle
I like to stash id's and similar metadata in "data-" attributes on the dom elements that represent those objects.
In this case I will usually use a similar setup
<ul class="posts">
<li class="post" data-post="####">
<p>content...</p>
<ul class="actions">
<li>
<a class="delete">delete</a>
</li>
</ul>
</li>
</ul>
Then in an .js file included at the bottom of the page:
$('.posts').on('click', '.actions .delete',
function() {
// which post should be deleted?
var $post = $(this).closest('.post');
// remove the DOM element
$post.remove();
// some sort of ajax operation
$.ajax({
// url, dataType, etc
data: { post_id: $post.data('id') }
});
});
This one handler will apply to all ".action .delete" elements in the main list, meaning that if you want to add a loader or pagination that uses ajax to modify or add times to the list, the one event handler will still work wonderfully.
I have the following script which appears multiple times on my page. I have a simple slide toggle attached to <div class="info"> and contolled by <a rel="viewinfo"> tag, but when I click on the anchor, all the divs with class info slide.
here is the HTML/PHP
<div class="couplistMeta">
<a class='view' rel="viewinfo" href="#">View Coupon</a>
<a class="print" href="#">Print</a>
</div>
<div class="info">
<p><?php echo $rec2[4]." -- Phone: ".$rec2['phone']; ?></p><p><?php echo $rec2['address']." -- ".$rec2['city'].", ".$rec2['state']." ".$rec2['zip']; ?></p>
</div>
Here is the Javascript
$(document).ready(function() {
$('div.info').hide();
$("a[rel='viewinfo']").click(function() {
$('div.info').slideToggle(400);
return false;
});
});
I tried using $(this).next('div.info').slideToggle(400); but this just broke the effect. So $('div.info') is too general, how can I be more specific with the JS?
Try this:
$(document).ready(function() {
$('div.info').hide();
$("a[rel='viewinfo']").click(function() {
$(this).parent().next('.info').slideToggle(400);
return false;
});
});
The issue being due to $('div.info') implicitly iterating over all div elements with the class info on the page.