$(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");
Related
Hello StackOverFlow Members,
I've used the bootstrap 5 dropdown button to get the tabs from the backend using ajax and everything is working, until I got to one of these tabs and click on a button, the dropdown stills exists and the data we got using ajax still exists, also it makes a new request so we made sure the data still exists.
but when we click on that dropdown, it doesn't longer open.
code used.
<li class="dropdownListMenu dropdown">
<span aria-expanded="false" data-bs-toggle="dropdown" aria-haspopup="true"
class="active color-white pointer" data-bs-toggle="tab"
onclick='<?php echo "get__data(" . $id . ")"; ?>'>
<i class="fa fa-folder tx-29"></i>
<?php echo $value['name']; ?>
<i class="fas fa-caret-down ms-1"></i>
</span>
<div class = "dropdown-menu tx-13" id = "get_data_dropdown_<?php echo $_id; ?>">
</div>
</li>
we used the javascript function to call the backend using ajax.
function get_data(id) {
$.post("ajax/get_data.php", {id: id,}, function (data) {
$("#results").html(data);
});
}
the returned data from the ajax call is a result of foreach with a link.
<a class="dropdown-item" onclick="get_classification(
<?php echo $tbl_level_id; ?>,
<?php echo $tbl_org_id; ?>,
<?php echo $tbl_classin_id; ?>,
<i class="fa fa-info-circle"></i>
<?php echo $value['name']; ?>
</a>
when we go to a link of these data returned I put them in an empty div
<div id="results"> </div>
so when we get the data we put it there.
now these data contain another link, when I click on any of these links/buttons, The dropdown stills exists and the data in it still exists, but it is no longer working.
I hope I explained It well.
I actually found an answer.
What happened is that I was adding a function to handle the problem before as it solved the issue, but after time it didn't longer work, I removed that function since I didn't need it.
<script>
$(function () {
//This function fixes the issue dropdown button doesn't open in a new page..
$('li>[data-bs-toggle="dropdown"]').each(function () {
$(this).click(function () {
if (!$(this).hasClass("show") && $(this).attr("aria-expanded") === "false") {
$(this).next().addClass("show");
$(this).attr("aria-expanded", "true");
$(this).addClass("show");
} else {
$(this).next().removeClass("show");
$(this).attr("aria-expanded", "false");
$(this).removeClass("show");
}
})
})
}
)
</script>
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.
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();
});
});
<a data-toggle="modal" href="msg_id=<?php echo $id; ?>#example" class="link_comment">Comment</a>
<div id="example" class="modal" style="display: none; ">
Your message ID is :
<?php
echo $msg_id = $_GET['msg_id'];
?>
</div>
When I try to mouseover to Comment link, in status URL : I can see the msg_id value. But When I try to click the comment link (I using Jquery modal), it can't be show the value of the link.
So my question, how can I do that to make the value of msg_id show in Jquery modal.
Thanks for your help.
Since you open #example div with jquery Modal, it dosen't reload the page, hence $_GET is empty.
You can achieve what your goal in at least 2 ways:
Use Ajax to load contents of #example div when link is clicked.
<a data-toggle="modal" href="<?php echo $id; ?>#example" class="link_comment">Comment</a>
<script type='text/javascript'>
$('.link_comment').click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
$.get('givemycomments.php?id='+id, function(data) {
$('#example').html(data);
});
});
</script>
Load all possible contents when page is rendered with php. For example, you would have #example_1 , #example_2 divs. When link is clicked, get value of its ID, and fire Modal with correct div. edit: after writing example code i realized that if you have lots of comments, it can be quite heavy to load em all.
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.