I have a home page in which i have two DIVs (left & right).
in left div i will be having some items. and in right div its details.
(please see the image)
here, clicking on an item in the left div, its corresponding details should get loaded.
i have two separate views for the two divs. I am able to load the left view from the controller function.
But I should load the right div based on the item_id of the left div item without any page refresh.
for that I will send item_id via jQuery $.post and get the details_page.
my view of the details page is as fillows
<div class="title"><?php echo $title; ?></div>
<div class="details">
<div class="author"><?php echo $author; ?></div>
<div class="pagedata"><?php echo $pagedata; ?></div>
</div>
these PHP variables should get replaced when details page gets loaded.
Please help me in coding the above scenario using jQuery in codeigniter.
In your PHP controller, you need a method that serves the views :
class Foo extends CI_Controller {
public function getItem($item) {
// the view holds the html for the right div
$this->load->view($item);
}
}
in jquery, you can then fetch the view like this:
$.get('example.com/foo/getItem/item1', function(resp){
$('#contentDiv').html(resp);
}, 'html');
You would, of course, call this jquery code snippet everytime a pane on the left div is clicked with the appropriate item name.
Related
I have a site where everyone's bio pops up in a modal with the code setup on template-team.php like this
<div class="tem_pic" id ="<?php echo $p->ID ?>" data-toggle="modal" data-target="#leader-modal-<?php echo $p->ID; ?>"
Then I have a slider on the template-homepage.php that calls out certain people. I want those sliders to be able to go to the team page, then open up that corresponding person's bio
<a class="slide_logo white_right_arrow" data-target="#leader-modal-<?php echo $p->ID; ?> href="/team"></a>
I can't get the modal to popup when I get to the page though.
This can be achieved with combination of PHP and JS. Let's say your template-team.php is assigned to https://example.com/team. Now, to pop up a team's bio modal, we create URLs like https://example.com/team?m=Junaid (m for member)
Using the following code we can popup a modal based on the URL parameters on page load.
<?php if ( isset($_GET['m']) ) : ?>
<?php // I'll skip how to open a specific modal, I think you're separating those with team member ID or whatever ?>
<script>
jQuery('window').on('load', function(){
// to open a modal in JS
jQuery('#target-modal-ID').modal('show');
});
</script>
<?php endif; ?>
Put this code in template-team.php after JS load. Customize and modify the code to your requirements.
On my site main.php page's sidebar (shown on pic) have some feature for member only. Each feature is in different pages (form1.php, form2.php, etc...)
I want to know :
How can I call each form on main.php. When I click on "inbox", it should call form1, and when I click on "company profile" it should call form9.
Is this possible to do without loading the whole main.php file? If so, how?
If number 2 is too complicated, then please just help me with number 1, as that is my most important point.
do it this way
let us say you want to display the form on this div
<div id="display">
<!-- load it here-->
</div>
<!-- example this are your menus
when you click the inbox link it will call the inbox function
-->
Inbox
Outbox
<script>
function inbox() {
$("#display").load("form1.php");
}
function outbox() {
$("#display").load("form2.php");
}
</script>
you need to include jquery for this
It's possible to do this you can use two things for that
1- If the form have database things to show use ajax with jquery
2- If it's static content you can use bootstrap tab and showing what you want
I have an area on my webpage that is populated by different <div> containers of information. When a link in my navigation bar is pressed, one <div> will fade out and another will fade in. What I'd like to do is have one of these content <div>'s filled with dynamic information, and when a link is pressed on another one of the "pages" it would change which database to load the information from and then display, or fade in, that <div> with the new information.
Sudo:
View information
<div id = "dynamicDiv">
<?php include 'file.php' ?>
</div>
file.php
**Find which database to load information from and display content**
I thought about using $GLOBAL vars, but I'm not sure how to set those from a link, and also it wouldn't reload the div content.
I also considered using a form, but I'm not sure of the "correct" way of doing this would be, and also when the page is reloaded the <div> that is displayed by default would be loaded, not the <div id = "dynamicDiv>
Any suggestions/ideas are very much welcomed....
In this case you should use ajax.
AJAX is used for changing the page content from server without reloading the page.
You can use this JQUERY AJAX And JQUERY LOAD
$(document).ready(function(){
$("#changediv").load("load.php?id=1");
})
in load.php
$id=$_GET['id'];
// use that id for dynamic query in database
$query="SELECT *.....";
$result=mysql_query($query);
echo mysql_fetch_array($result);//somthing like that
All the word echoed in php become response in ajax.
I am not ever sure this is possible but I know you guys will know the answer.
I wonder if it is possible to load the first div on a page into a different page.
Example:
This code is on "list.php"
<div class="message_details">
Some Content 1
</div>
<div class="message_details">
Some Content 2
</div>
I found this article and it works but it brings in all div's but I want to load only the first div.
Load content from external page into another page using Ajax/jQuery
Here is the code I have now that loads all divs
$(document).ready(function() {
$(".loader").load('list.php .message_details');
});
How can I load only the first div? Also is there any way to remove an img tag within the selected div?
Thanks everyone
Use the :first-child selector
$(".loader").load('list.php .message_details:first-child', function() {
$(this).find("img").remove();
});
Reference
simply echo the the div in the second page. Give each div an id, then echo that. (unless i am misunderstanding your goal)
Here is the scenario:
I am using jQuery UI Tabs to load dynamic content into a content div below.
When clicking on the tabs, the content changes and loads (via Ajax) various PHP Files
One of the files is a list (accessed through a mysql db) that lists for example users in the general format
Ex: ID - UserName - Full Name - View / Modify
What I want to achieve, is that, from this list, when a user clicks the View Modify link, it replaces the list of users with the "viewUser.php" file in that div.
My question is as follows:
- How do i pass the viewUser.php?ID=4 value back to the jQuery TABS so that it changes the content of the specific div with the output from the viewUser PHP file?
The reason I've not included any code is that I am at a loss as to where to begin. The only tutorials I've found so far is to pass POST values to an external file via AJAX and to display the result in the same DIV. However, what I want to do is to send a GET Request and change the content of the DIV with the result.
Any help is greatly appreciated, I hope that I've explained my situation adequately.
UPDATE (added code as suggested)
This is my tabs / navigation + Content DIV. The div tc0 is the format of what the div will be for the PHP files as well.
<div id="tabs">
<ul class="grid_12 alpha" id="hmenu">
<li>Dashboard</li>
<li>List Users</li>
<li>List Tasks</li>
</ul>
<div id="tc0">
<p>Some Content</p>
</div>
</div>
The PHP File (list-users.php or list-tasks.php):
<?php
// Do Database query stuff here
foreach($data as $row){
echo '<tr>';
echo '<td>' .$row['TID']. '</td><td>' .$row['user'];
echo '</td><td>View User</td>';
echo '</tr>';
}
The jQuery portion (which works fine for loading the AJAX): (This is where I need the help)
<script type="text/javascript"><!--//TABS-->
$(document).ready(function(){
$("#tabs").tabs();
});
</script><!--//END TABS-->
Hope this helps. I don't know where to begin coding the jQuery to handle the link from the userlist.
. on every tab of click event you Have To Pass Filename With id
You have to do this simple line on onclick event of ever tag
window.location='viewUser.php?ID=4