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.
Related
I'm working on comments for posts on my website. How to create a button in javascript that will open iframe window with comments when user clicks on that button? Something like Facebook have with their comments on posts. If there is a way to create this with other language I would like that you write it. I just wrote javascript because I heard that you can do that in javascript. If there is a more elegant and/or better way feel free to write it.
So below every posts I would add a button and when user clicks on it, it should open something like this:
<iframe src="comment.php?postid=<?php echo $postid; ?>"
width=600px;
height=500px;>
</iframe>
And is there a way that iframe window loads only when you click on the button, not in the same time as page on which are posts? For example, if I have 10 posts on one page, and comments for all 10 posts are loading at the same time as the page with posts, it would slow down a page a lot.
Also do you know how to adjust iframe window size to amount of posts, so that if a post have 1 comment, window size is 100px, and if a posts have 5 comments, window size is 500px?
I know that Facebook have something much better than this for their comments, so if you know something better than my idea, please feel free to share it.
A trivial solution to your question would be..
<html>
..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
...
<body>
...
<div class='comments-container'></div>
<a class='show-comments' href='#'>Show Comments</a>
...
<script>
$(".show-comments").click(function(){
$(".comments-container").html('<iframe src="comment.php?postid=<?php echo $postid; ?>"
width=600px;
height=500px;>
</iframe>');
});
</script>
</body>
</html>
Or you can load all the comments onto a div element, and by default have that element hidden, and then once clicked on a button, you can show it. That solution could be
<html>
..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
...
<body>
...
<div class='comments-container'>
comment 1: ----
comment 2: -----
</div>
<a class='show-comments' href='#'>Show Comments</a>
...
<script>
$(".show-comments").click(function(){
$(".comments-container").slideDown("slow");
});
</script>
</body>
</html>
Try using something like prettyPhoto:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
If you scroll down on that page you will see an example where the loaded window displays an iFrame. Very handy for creating semi-ajax-like functionality to a website. You can use pretty much any lightbox clone out there for something like this, but I have found that prettyPhoto is the most robust and has a decent amount of support out there. This does use jQuery to work as well as it's own javascript file to function, but it is minimal.
Hope this helps.
I would jquery .load, .post, .get or .ajax
under every article have a div class named comments and display none css on that div. when the user clicks the view comments button for that article, send a request to the server and ask for comments for that article id.
you will want to store the id of the article in an attribute of the view comments link so that you can pass the .load request the id of the article you want comments for.
<div articleid="5" class="view-com-button">view comments</div>
<div class="comment" articleid="5" style="display:none"></div>
$(".view-com-button").click(function(event){
$(".comment[articleid='$(this).attrib("articleid").load("comment.php", {( "idarticle" : $(this).attrib("articleid") )};
});
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.
I need to track every time a user clicks on a dynamic button. Also I need to know what product is he clicking. Now I have this button:
<div class="buy">
<a target="_blank" href="<?php echo $this->product['from']; ?>">
<img src="http://example.com/data/images/buy.jpg" alt="buy">
</a>
</div>
Href sends the user to another site to buy the product. How can i track this on PHP?
If the href is linking to another page that is not on your own server, you can go with an ajax-solution, like #coder1984 proposed, or you can create a proxy php script. That means:
the user clicks the link to the proxy, sending in the product URL
like: href="myproxy.php?url=<?php echo $this->product['from']; ?>"
the proxy gets the URL, checks it and updates a database, the session, a text file
afterwards it redirects the user to the actual URL
Client-side dynamic user actions can be determined using Javascript/Jquery. Here's how its done in Jquery,
$(document).ready(function() {
$('.buy').click(function(){
alert('This is clicked');
});
});
To track in PHP, you can pass the value(buttons clicked) to PHP using Jquery AJAX. Here's the manual.
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.
Im trying to update a database field without refreshing the page
what im using is:
<a class="youtube" href="#" rel="<?php echo $row['link'];?>" title="<?php echo $row['title']; ?>" >
<div class="overlay_play"></div>
</a>
Then i want to update from this video ( they all have unique id's ofc) the field plays
My table looks like this:
id - int(9)
title - text
link - text
plays - int(99)
So in short
I have a video list of 6 video's on one page and you can play them in a popup window
But what i want is if you click play video that the plays field will be updated
The popup window is done with jquery ( like lightbox ) so i can't refresh the page.
Its easy ,you can do this by using ajax along with php page
if(playbutton pressed) {
//perform the database operation in through calling a ajax page
//using jquery post one of them
$.post('ajax/save.php', function(data) {
$('.result').html(data);
});
}
save.php
//Contains all the database operations to save the field