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
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.
I have set up a page with modal's but at the moment it only works with having one modal on the page.
What I would like to achieve is apply id in the Jquery so each modal has it's own ID and opens with multiple modals.
HTML:
<a class="activator1" id="activator1"><img class="edit_icon" align="right" src="/images/edit_icon.png" alt="">Edit</a>
<div class="box1" id="box1">
<h3>Title here</h3>
<p>Text in here</p>
</div>`
<a class="activator2" id="activator2"><img class="edit_icon" align="right" src="/images/edit_icon.png" alt="">Edit</a>
<div class="box2" id="box2">
<h3>Title here</h3>
<p>Text in here</p>
</div>
Jquery
$(function(){
$('#activator').click(function(){
$('#overlay').fadeIn('fast',function(){
$('#box').animate({'top':'80px'},500);
});
});
$('#boxclose').click(function(){
$('#box').animate({'top':'-1400px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
});
Don't use unique classes, keep them common for common elements. Use secondary classes if needed for styling
A simple data attribute can be used for the target and can be read using data() method
<a class="activator" id="activator1" data-target="#box1>
Then use class for click handler selector
$('.activator').click(function(){
// "this" is element event occurred on
var modalTargetSelector = $(this).data('target');
$('#overlay').fadeIn('fast',function(){
$(modalTargetSelector ).animate({'top':'80px'},500);
});
});
Similarly for close buttons use common class and do something like:
$('.boxclose').click(function(){
$(this).closest('.box').animate({'top':'-1400px'},500,function(){
$('#overlay').fadeOut('fast');
});
});
I am a newbie on AJAX, I have a link that loads table.php. Then it writes the code to the index.php. In that code, I have another link to
show the info.php. Is it possible to do this?
<!--This is index.php-->
<div id="link">my Info</div><!--it works here-->
<div id="link">My Table</div>
<div id="table"></div>
<div id="info"></div>
<!--My javascript-->
<script type="text/javascript">
$(document).ready(function() {
$('#link a').click(function(){
var page = $(this).attr('href');
if(page =='table')
$('#table').load('table.php');
else if(page =='info')
$('#info').load('info.php');
return false;
})
});
</script>
<!--This is table.php-->
<div id="link">my Info</div><!--it doesn't works here-->
<!--This is info.php-->
<h1>My info</h1>
Your three <div> (as pointed out by #scragar) have the same id link, most probably causing the issue. Make it a class like that :
<div class="link">
And in your JS :
$('.link a')
EDIT : As noted by dbf, you must as well declare your handler with live() or on() instead of click() :
$('.link a').live('click', function(){ ... });
in order for it to be binded after table.php is loaded in the page. ( http://api.jquery.com/live/ )
Is it possible to use jquery to use a callback in a div and show the full text in another div? Currently I have in the right div:
$(document).ready(function(){
setInterval(function(){
$.post("status.php?_="+ $.now(), {day : "<?php echo $day;?>"}, function(upcoming){
$(".ticker").html(upcoming);
}),
"html"
}, 45000);
});
And I need something like:
$(".view").hover(function(){
$("#left").load("a.php");
});
<div id="left">
<div class="show">
</div>
</div>
<div id="right">
<div class="ticker">
</div>
</div>
My php spits back html: EventID
What I want to do is hover over the hyper link and have the full status shown in .show
I know I'll have to do a query with the event number, but my search in doing this comes up empty. As always, any help is appreciated
$("body").on("hover", ".view", function(){
$("#left").load("a.php");
});
As you're adding .view to DOM after page load i.e dynamically so, you need delegate event handler for dynamic element using .on().
And instead of body you can use any parent selector of .view which is static-element.
I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had
<div id="nav">
a link </div>
<div id="content>show the stuff</div>
From the comments below - the OP stated the following :
I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html
Alt 1: Use jquery tabs:
See demo and code here: http://jqueryui.com/demos/tabs/
Alt 2: Hide/show div in same html file:
HTML:
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
jQuery:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
Demo: http://jsfiddle.net/5NEu3/3/
Alt 3: Load from server ondemand:
To load html into your main div you should use: http://api.jquery.com/load/
Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.
Html
Show content 1
Show content 2
jQuery
$("#nav a").click(function(e){
e.preventDefault();
$('#maindiv').load($(this).attr("href"));
});
Using jQuery, you could do something like this.
This will open the site <a href="example.html"> and put it inside of the <div id="content"> when you click it, and then disable changing the whole site.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">
Some page
Some other page
My page
</div>
<div id="content">
show the stuff
</div>
Something like this:
function setContent(div, content)
{
getElementById(div).innerHtml = content;
return false; // return false to ignore the click
}
a link
to show a hidden div (i think this is what you wanted)
the javascript (using jQuery)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showdiv").click(function () {
$("#hiddendiv").show();
});
});
<script>
the html
Show the Div
<div id="hiddendiv" style="display:none;">Content here</div>
you can see it in action here