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.
Related
I'm using a Wordpress plugin for loading Facebook events into a web page. There is a big anchor with an event div in it. I want a small anchor at the bottom of every fb-event div instead.
I need to:
Disable the first anchor without removing it (removing it would also remove the entire div).
Create a new anchor at the bottom of the fb-event div.
Pass the href from the first anchor to the second.
I feel like I'm pretty close but nothing happens, this is my code, first html, then jQuery. Thanks in advance!
<div class='fb-event'>
<a class="fb-event-anchor" href="http://www.facebook.com/event.php?eid=1165884803462190" target="_blank">
<div class="fb-event-desc"><img src=https://scontent.xx.fbcdn.net/t31.0-8/s720x720/13920278_1335410149821833_1686522516711277604_o.jpg />
<div class='fb-event-title'>Spiritueel weekend - Een stapje verder</div>
<div class='fb-event-time'>10 september 2016 · 10:00 -<br>11 september 2016 · 17:00</div>
<div class='fb-event-location'>Balance in Life</div>
<div class='fb-event-description'>Lots
</div>
</div>
</a>
</div>
jQuery:
var fblink = $('.fb-event-anchor').attr('href');
$('.fb-event-anchor').click(function(){
return false; // prevents default action
});
$('.fb-event-description').append('<a class="fb-event-anchor-new" href="' . [fblink] . '"></a>');
Try with below code
$(function () {
$('.fb-event-anchor').on("click", function (e) {
e.preventDefault();
});
var fblink = $('.fb-event-anchor').attr("href");
$( ".fb-event" ).append( '<a class="fb-event-anchor-new" href='+ fblink +'>NEW LINK</a>' );
});
you want to do like this ?
var fblink = $('.fb-event-anchor').attr('href');
$('.fb-event-anchor').click(function () {
return false; // prevents default action
});
$('.fb-event-description').append('<a class="fb-event-anchor-new" href="'+fblink+'">fbanchor</a>');
Both solutions succesfully create a new link but neither makes the first link unclickable. I countered that last part with css:
.fb-event-anchor {
pointer-events: none;
cursor: default;
}
Thanks both, Pratik was first so I'll accept his answer.
$(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 made a side menu with these links:
<div id="menu_lat">
Orçamentos
Relatórios
Próximos Eventos
Chat
</div>
When I open one of these, the content is opened in another div (which, in the first page, already has some content, which is an image):
<div id="conteudo">
<img src="img/foto_inicial.jpg">
</div>
How could I load the PHP file inside this layer when I click that link?
Use jQuery and the load() function
Update you links with a class
<div id="menu_lat">
<a class="loader" href="http://localhost:8080/sgf/form_proposta.php">Orçamentos</a>
<a class="loader" href="relatorios.html">Relatórios</a>
<a class="loader" href="proximos.html">Próximos Eventos</a>
<a class="loader" href="chat.html">Chat</a>
</div>
Then in your <script> tags add this to handle the click event on your links with the class loader.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.loader').click(function(event) {
event.preventDefault(); // stop the link loading the URL in href
$('#conteudo').load($(this).attr('href'));
});
});
</script>
DO the Ajax call on the DIV id conteudo
I'm building a website where the admin can make settings for the website. I would like the admin settings page to have a similar "feel" as the rest of the website, which has some nice looking jQuery features.
On the admin site there's a hidden div, which is shown when one of six links has been clicked. I'd like the content of the hidden div to change content before showing itself. I'm not sure how to do this. I could have a div box for every link on the page. But this becomes pretty cumbersome since I'd need to repeat my css and jquery for every link. I imagine that this, somehow, can be done with some javascript/jquery code that determines which link that was click and then decides which php function to call inside the hidden div. Then the php could "echo" out the content of the div, which then could be shown.
How could one do this?
My HTML/jQuery code is as follows:
--- The html links ---
<table id="settings">
<tr>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
----- The Hidden div -----
<div id="dashboard_box">
<div class="dashboard_inside">
<form action="#" method="post">
<p style="font-size:20px; font-weight: bold;">Change color</p>
</br>
<fieldset>
<? load_content1();?>
</fieldset>
</form>
</div>
</div>
---- jquery code (working)----
var mouse_is_inside = false;
$(document).ready(function() {
$(".action").click(function() {
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
return false;
});
$("#dashboard_box").hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").click(function(){
if(! mouse_is_inside) $("#dashboard_box").fadeOut("fast");
});
});
You probably want to use ajax to load the content from the server. Take a look at jquery's .load() method: http://api.jquery.com/load/
You could include a data attribute per link:
<a class="action" data-content="content.php?method=load_content1"></a>
<a class="action" data-content="content.php?method=load_content2"></a>
js would look something like this:
$(".action").on('click', function() {
$("#dashboard_box fieldset").load($(this).data('content'), function() {
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
}
return false;
});
Then, in your content.php file you could check the method parameter in the url to determine what content to return.
My php is a little rusty, but something like this:
<?
call_user_func($_GET['method']); // i'm not sure how safe this is. you may want to be more explicit
?>
You can just add data attribute in each of your link's
<a href="#" data-url="content1.php" ..
Then on click of any of the a you can get the php to be called.
$('a').on('click',function(){
var phpFunctionToCall = $(this).data('url');
});
You probably need to make ajax call to load content into your fieldset As this <? load_content1();?> run's on server and javascript have no control over it.
Thanks for all the help. this is what I ended up doing.
--- HTML ---
<a class="action" data-content="content.php?method=load_content2"></a>
---Jquery---
var mouse_is_inside = false;
$(document).ready(function() {
$(".action").click(function() {
var phpFunctionToCall = $(this).data('content');
$('#indhold').load(phpFunctionToCall);
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
return false;
});
$("#dashboard_box").hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").click(function(){
if(! mouse_is_inside) $("#dashboard_box").fadeOut("fast");
});
});
--- PHP (shortened)---
function load_settings_panel($settingOnRequest) {
return $settingOnRequest;
}
$result = call_user_func('load_settings_panel', $_GET['method']);
echo($result);
Below is the Html button and javascript function I have which closes a modal window:
<button type="button" id="close" onclick="return parent.closewindow();">Close</button>
function closewindow() {
$.modal.close();
return false;
}
Now the code above does close the modal window which is fine.
But I want to know how to write the code by using this function and html button below:
<button type='button' class='add'>Add</button>
$(document).on('click', '.add', function(){
$.modal.close(); ;
return true;
});
The above code does not close the modal window, why is this? Both these codes are on the same page by the way.
I am using simplemodal developed by eric martin
UPDATE:
Below is full code (QandATable2.php) but it is still not closing modal window when clicking on "Add" button:
$(document).ready(function(){
$('.add').on('click', function(){
//close modal window when user clicks on "Add" button (not working)
$.modal.close();
});
});
function plusbutton() {
// Display an external page using an iframe
var src = "previousquestions.php";
$.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
//Opens modal window and displays an iframe which contains content from another php script
return false;
}
function closewindow() {
$.modal.close();
return false;
//closes modal window when user clicks on "Close" button and this works fines
}
...HTML
<table id="plus" align="center">
<tr>
<th>
<a onclick="return plusbutton();">
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" name="plusbuttonrow"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look <br/> up Previous Questions)</span>
</th>
</tr>
</table>
Below is the full code which displays all of the information that goes into the modal window (this is in previousquestions.php script). This includes both "Add" and "Close" buttons:
<div id="previouslink">
<button type="button" id="close" onclick="return parent.closewindow();">Close</button>
</div>
<?php
$output = "";
while ($questionrow = mysql_fetch_assoc($questionresult)) {
$output .= "
<table>
<tr>
<td id='addtd'><button type='button' class='add'>Add</button></td>
</tr>";
}
$output .= " </table>";
echo $output;
?>
From what I remember from the comments, you wanted to close the modal when clicking in an add button inside the modal right?
$(document).ready(function(){
$('.add').on('click', function(){
$.modal.close();
});
});
I made your first example (before your question edit) work, take a look at this JSFiddle.
Be careful with the order you show/hide elements and wrap your function inside the $(document).ready() to prevent the code execution before the DOM is loaded.
If you don't manage to adapt your page to work similarly to my fiddle, you should post more from your page's code as there'd probably be something causing the plugin to don't work properly (or switch to another modal plugin).
edit: You're using an iframe, that's why you can't access the parent window's defined functions from the iframe's scope directly. You could try using the window.opener to access your parent window's scoped functions, or, to solve all and any window scope problem:
Replace
$.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
With
$.modal('<div id="modal" style="border:0;width:100%;height:100%;">');
$('#modal').load(src);
This will load content to the div dynamically through Ajax, which is a better approach and resolves any window scope problems which you were facing.
Either that or switch to a modal plugin which supports loading pages directly to it, for instance, colorbox.
EDIT
Now with your full code it was easy to find a solution, simply add onclick='parent.closewindow();' to your add button in your PHP:
<td id='addtd'><button type='button' class='add' onclick='parent.closewindow();'>Add</button></td>
This way, it'll re-use the existing closewindow function and discard the .on binding for the .add buttons. :)