I recently learned about Jquery pop-up div.
I used this link.
I want that kind of pop up div.
But the problem is , I need multiple pop-up div.
Suppose i have 15 user in database table then i want 15 different link.
Moreover every popup div should show the database information of that user.
I also found this one, but this pop-up div doesn't move with the mouse pointer and when the div width greater than the link width this doesn't work.
So i want pop-up div like the first example.
How can I do this ?
I thought about this problem diferently than you. So here's my idea.
1st- you don't need multiple divs cuz using jquery & php you can manipulate a single div however you want.
2nd- saying you display your 15 persons 1st makes the job easier. Let's say you store them into some links like the next example and we asume we have an ID, a Name, an Age and a Location:
<?php
$sql = "SELECT * FROM persons";
$result = mysql_query($sql);
while(mysql_fetch_array($result)) {
echo '<a hred="#" class="trigger" id=' . $result['id'] . '>' . $result['name'] . '</a><br />';
}
Now using AJAX we dispaly the results for hovering any link:
$('a').mouseenter(function(e) {
var myperson = $(e.target).text();
$.ajax({
url: "details.php?current=" + myperson,
success: function(html){
if(html) {
$("a").append(html); //here you'll have to get the current hovered link- this will dispaly the info on all the links on hovering one of them
}
}
}
Now in the details.php page we'll do the query for the current person:
<?php
$currpers = "SELECT * FROM persons WHERE name = '" . addslashes($_GET['current']) . "'") or die(mysql_error());
$results = mysql_query($currpers);
if(mysql_fetch_array($results )) {
echo '<div class="pop-up">
<p>
<strong>Age:</strong>' . $results ['age'] . '<br />
<strong>Location:</strong> ' . $results ['location'] . '
</p>
</div>';
}
?>
NOTE: I have not tested this. There might be some adjustmests but the idea is the same.
Related
Hi i have a website on which i have a search bar on home page when i search something on it, it will show a number result Chapter/Post related to that keyword but when i open any Chapter/Post there are number of "drop-downs" in the Chapter page & i can't see the word highlighted for which i have searched for. Can anybody help with that to highlight text or it's background
For Example i'm searching for word "Morning" on this page https://policies.americanprep.org/
I will make the background or word color "red" on this page https://policies.americanprep.org/chapter-f-classroom-organization/?highlight=Morning?s=Morning
You need to change default wp_content/wp_excerpt in result page with something like this:
if (isset($_GET['highlight'])){
$content = get_the_content();
$keys = implode('|', explode(' ', $_GET['highlight']));
$content = preg_replace('/(' . $keys .')/iu', '<strong class="search-highlight">\0</strong>', $content);
echo '<p>' . $content . '</p>';
} else {
echo '<p>' . get_the_content() . '</p>';
}
Also you need to add css code for span.search-highlight
$_GET parameter 's' would be better to remove from url.
I have a feature, where users can post thoughts and users can add comments to each thought The way it works is that, when the comments link is clicked, all comments associated with that thought_id will be loaded.
Here is the structure of my user_comments table:
id
body_of_msg
comment_posted_by
comment_posted_to
post_id (which is the id of a thought from the `user_thoughts` table)
Consider the following data:
user_thoughts table (1 row):
id: 184
thought: "hello, this is a thought from anderson."
Assume I have two rows in the user_comments table:
id: 1
body_of_msg: Comment assigned to thought_id of 184
comment_posted_by: conor
comment_posted_to: anderson
post_id: 184
id: 2
body_of_msg: Another comment assigned to thought_id of 184
comment_posted_by: alice
comment_posted_to: anderson
post_id: 184
Problem: At the moment, when I click the comments link, only one of the comments is being shown (the latest comment is being shown, so in this case, Alice's comment).
Here is the code:
<?php
// Get the comments attached to a users post...
$get_comm = mysqli_query ($connect, "SELECT * FROM user_comments WHERE post_id='$thought_id' ORDER BY post_id DESC");
$num_of_comments = mysqli_num_rows($get_comm); // get number of comments for each post by post_id
// if there are comments for the post, get its content
if ($num_of_comments !=0 || $num_of_comments == 0){
while( $comment = mysqli_fetch_assoc ($get_comm)){
$comment_body = $comment['body_of_msg'];
$comment_posted_to = $comment['comment_posted_to'];
$comment_posted_by = $comment['comment_posted_by'];
$removed = $comment['comment_removed'];
}
echo "";
/** There are other divs and content echo'd here**/
////////////////////////////////////////////
// this is where each comment is displayed
echo "
<div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
<br/><b><a href = 'profile_page/$comment_posted_by'> $comment_posted_by said</a></b>: $comment_body "; ?><?php
if ($comment_posted_by == $username){
echo "<a id='remove_comment' href = '/inc/remove_comment.php'> Delete </a>";
} echo "
</div>";
/////////////////////////////////////////////
}
?>
Where $thought_id comes from:
$count = mysqli_query ($connect, "SELECT * FROM user_thoughts");
while ($row = mysqli_fetch_assoc($get_thoughts_from_db)) {
$thought_id = $row['id'];
}
What I think:
This could just be me struggling to find a solution, but, could it be that each comment is overlapping the other? My comment feature involved comments dynamically appearing below the thought, so I have utilized Javascript, to achieve this. Just thinking the block may be getting replaced by a new comment?
What I have tried:
while( $comment = mysqli_fetch_assoc ($get_comm)){
$comment_body = $comment['body_of_msg'];
$comment_posted_to = $comment['comment_posted_to'];
$comment_posted_by = $comment['comment_posted_by'];
$removed = $comment['comment_removed'];
// this is where each comment is displayed
echo "
<div id='toggleComment$thought_id' class='new_comment' style='display:none;'>
<br/><b><a href = 'profile_page/$comment_posted_by'> $comment_posted_by said</a></b>: $comment_body "; ?><?php
if ($comment_posted_by == $username){
echo "<a id='remove_comment' href = '/inc/remove_comment.php'> Delete </a>";
} echo "
</div>";
}
}
This still only shows one comment, when there are two to be shown.
Why don't you use ajax? I had done a site web that use comments (like stackoverflow) and I used a lot ajax for that. Of course, all the creations of html elements will be done in js and what you will return from php will be only json (containing the content of comments and its info).
This will help you also to load new comments without refreshing the page (setInterval).
For the answer, I have find three things that are strange, the first one is
if ($num_of_comments !=0 || $num_of_comments == 0){
which will be always true. The second thing is the fact that the echo is outside the while bloc (this probably the cause of having one comment echoed). The last thing is display none that you put in the style of the html element. So what I suggest you is to make the echo in the while block or to make an array of comments and make an iterator. After that, try to use the inspector tool of your browser to see if the code source returned contain only one comment or more. This will help you to see if the php works or not.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
UPDATED CODE I am trying to call a PHP scripts in my main PHP file where everything will be displayed. I just want to display the results from my PHP script with the SQL queries that are being run.
Id also like to include the possibility of showing the results dynamically/by not refreshing the page.
this is what I tried so far, im new to Jquery and AJAX. thanks in advance!
JQuery/AJAX part:
<div id="map_size" align="center">
<script type="text/javascript">
//Display station information in a hidden DIV that is toggled
//And call the php script that queries and returns the results LIVE
$(document).ready(function() {
$(".desk_box").click(function() {
$id = $(this).attr("data")
$("#station_info_"+$id).toggle();
$.ajax({
url:"display_stationinfo.php",
success:function(result){
$("#map_size").html(result);
}});//end ajax
});//end click
});//end ready
</script>
</div> <!-- end map_size -->
display_station.php (script that I want to call):
<?php
include 'db_conn.php';
//query to show workstation/desks information from DB for the DESKS
$station_sql = "SELECT coordinate_id, x_coord, y_coord, section_name FROM coordinates";
$station_result = mysqli_query($conn,$station_sql);
//see if query is good
if($station_result === false) {
die(mysqli_error());
}
//Display workstations information in a hidden DIV that is toggled
while($row = mysqli_fetch_assoc($station_result)){
//naming values
$id = $row['coordinate_id'];
$x_pos = $row['x_coord'];
$y_pos = $row['y_coord'];
$sec_name = $row['section_name'];
//display DIV with the content inside
$html = "<div class='station_info' id='station_info".$id."' style='position:absolute;left:".$x_pos."px;top:".$y_pos."px;'>Hello the id is:".$id."</br>Section:".$sec_name."</br></div>";
}//end while loop for station_result
echo $_GET['callback'] . '(' .json_encode($html) . ')';
mysqli_close($conn); // <-- DO I NEED TO INCLUDE IT HERE OR IN MY db_conn.php SINCE IM INCLUDING IT AT THE TOP?
?>
You should find out what are the ways in which you can make jquery ajax calls
Other basic tutorial which will help you in ajax is below
http://api.jquery.com/jquery.ajax/
http://www.w3schools.com/jquery/ajax_ajax.asp
http://www.w3schools.com/jquery/jquery_ajax_intro.asp
http://www.w3schools.com/jquery/jquery_ref_ajax.asp
http://www.w3schools.com/jquery/jquery_ajax_get_post.asp
http://www.tutorialspoint.com/jquery/jquery-ajax.htm
Since you have not explained clearly the question i am making genral assumption and going to give you two answer on how you can use ajax for your purpose
1.AJAX LOAD
Lets say your HTML structure is
HTML
<div id="map_size" align="center"></div>
MY JS FILE
$(document).ready(function(){
jQuery("#map_size").load("myphp.php", {}, function() { });
})
PHP
echo "<p>THIS IS TEST FOR DEMO AJAX LOAD</p>"
you can do much more if you are retrieving from db.
myphp.php
//get number of rows for X,Y coords in the table
while($row = mysqli_fetch_assoc($coord_result)){
//naming X,Y values
$x_pos = $row['x_coord'];
$y_pos = $row['y_coord'];
//draw a box with a DIV at its X,Y coord
echo "<div id='desk_box' style='style:absolute;
left: " . $x_pos. " px;
top: " . $y_pos. " px;'>box number</div>";
}
you can also do same thing on button click and load everything dynamically without refreshing page
2.Jquery Ajax [GET, POST] : Link
This also can be used
HTML
<div id="map_size" align="center"></div>
MY JS FILE
//http://api.jquery.com/jquery.ajax/
$(document).ready(function(){
$.ajax({url:"myphp.php",success:function(result){
$("#map_size").html(result);
}});
})
myphp.php
//get number of rows for X,Y coords in the table
while($row = mysqli_fetch_assoc($coord_result)){
//naming X,Y values
$x_pos = $row['x_coord'];
$y_pos = $row['y_coord'];
//draw a box with a DIV at its X,Y coord
$html = "<div id='desk_box' style='style:absolute;
left: " . $x_pos. " px;
top: " . $y_pos. " px;'>box number</div>";
}
//create a JSON
echo $_GET['callback'] . '(' . json_encode($html ) . ')';
I'm not sure how well i'll be able to explain this, but here goes.
I have a website for attractions. Let's say that one of my categories is Historical villages.
When the user opens the Historical villages page he gets a list of villages displayed from the database. The way I display them is: Name plus a picture of the attraction.
What I want to do is unable the user to click on of the villages (by making the name and picture a clickable link) and the user to be redirected to a page that will run a php script that will display more information from the database about the selected village. That way I will only have one page for all attractions that will display different information every time a user selects something different, instead of hardcoding all the pages.
This is my code displaying the lits of villages:
$sql = "SELECT `Name`, `Location`, `Description`, `Airport`, `imglink`, `pagelink` "
. "FROM `attractions` "
. "WHERE `Category`='HistV'";
$result = mysql_query($sql, $link);
if (!$result) {
echo "DB Error, could not query the database\n";
echo 'MySQL Error: ' . mysql_error();
exit;
}
while ($row = mysql_fetch_assoc($result)) {
echo $row['Name'];
echo "<img src='" . $row['imglink'] . "'>";
}
Do any of you have any suggestions on how to make this output a link and the make it run the PHP to show the users selection?
Your while condition changed to like this,
while ($row = mysql_fetch_assoc($result)) {
/* For example ,
$row['pagelink'] must contains the pagelink as belowed here
/viewVillage.php?village_id=1
/viewVillage.php?village_id=2 and so on. */
echo "<a href='" . $row['pagelink'] . "'>"
. $row['Name'] .
. "<img src='" . $row['imglink'] . "'>
</a>";
}
This will generate your list of villages like this,
<a href="/viewVillage.php?village_id=1">
Village name 1
Village Image 1
</a>
<a href="/viewVillage.php?village_id=2">
Village name 2
Village Image 2
</a>
<a href="/viewVillage.php?village_id=3">
Village name 3
Village Image 3
</a>
.....
When you click on any of the link, it will redirected to viewVillage.php page. Now you can get the particular village using $_GET['village_id']
viewVillage.php
if(isset($_GET['village_id']]) && $_SERVER['REQUEST_METHOD'] == 'GET' ) {
$villageId = $_GET['village_id'];
// Then do your stuff over here
}
On your current page
while ($row = mysql_fetch_assoc($result)) {
/* For example ,
$row['pagelink'] should be a village id */
echo "<a href='/attractions.php?village=" . $row['pagelink'] . "'>"
. $row['Name'] .
. "<img src='" . $row['imglink'] . "'>
</a>";
}
Now it would print something like
Vilage Name <img src="urltoimage">
When you click on this link you will be sent to a file called "attractions.php"
Create this file in the same directory and it should have the following php in it
<?php
$villageId = $_GET['village']; //this gets the id of the village from the url and stores
//it in a variable
//now that you have the id of the village, perform your sql lookup here
//of course you will have to fill this is, as I don't know your actual table fields and names
$sql = "SELECT * FROM Attractions WHERE villageID = `$villageID`";
//now perform the query, loop through and print out your results
?>
Does this make sense?
I have a multiple drop down that goes from Country/State/city/destination.
What I want this plugin to do next, is once the destination menu is selected, the page will automatically display some general information about that destination on the same page without reloading.
The general info is in the same table as my destination drop down menu is, but under different columns.
So how can I get this information to display its self possibly in a text box or something similar only when the final distention menu is selected.
Here are some parts of my code thus far, I don't believe posting everything is necessary and might be a little confusing. PS-I am a beginner.
This is an example of my javascript which calls from my ajax.php file for the array to populate the drop down menu...
jQuery(".wrap").on('change', '#city', function() {
var querystr2 = 'cityid=' +jQuery('#city :selected').val();
jQuery.post("<?php echo plugins_url(); ?>/Destination_Drop_Down_Menu/ajax.php", querystr2, function(data) {
if(data.errorcode ==0){
jQuery('#descbo').html(data.chtml)
}else{
jQuery('#descbo').html(data.chtml)
}
}, "json");
});
This is part of my ajax.php file that previous example of jQuery is pulling information from.
$city_id = isset($_POST['cityid']) ? $_POST['cityid'] : 0;
if ($city_id <> 0) {
$errorcodeD = 0;
$strmsg = "";
$sqlD="SELECT * from destination WHERE IDCity = ". $city_id . " ORDER BY name;";
$resultD=mysql_query($sqlD);
$contD=mysql_num_rows($resultD);
if(mysql_num_rows($resultD)){
$chtmlD = '<select name="destination" id="destination"><option value="0">--Select Destination--</option>';
while($row = mysql_fetch_array($resultD)){
$chtmlD .= '<option value="'.$row['IDDestination'].'">'.$row['name'].'</option>';
}
$chtmlD .= '</select>';
echo json_encode(array("errorcode"=>$errorcodeD,"chtml"=>$chtmlD));
}else{
$errorcodeD = 1;
$strmsg = '<font style="color:#F00;">No Destination available</font>';
echo json_encode(array("errorcode"=>$errorcodeD,"chtml"=>$strmsg));
}
And MY html section that would display everything.
<h2>Destination</h2>
<div class="wrap" id="descbo">
</div>
So basically what ever destination the user chooses, the specific information for that destination will render its self on the screen in separate boxes or text areas.
Thank you!
So, if I understand correctly, you want your php script to return data from your destination table when a particular destination is selected. You said you don't want the page to reload, but I'll assume you're OK with issuing another AJAX request to the server. If that's the case, you can simply create another delegated jQuery handler for the destination <select>:
jQuery(".wrap").on('change', '#destination', function() {
var data = {destinationid: this.value};
jQuery.post("url/to/script.php", data)
.done(function(response) {
jQuery('#descbo').html(response.html);
});
Then, in your PHP, you could have something like this:
$destination_id = isset($_POST['destinationid']) ? $_POST['destinationid'] : 0;
...
$sqlD="SELECT * from destination WHERE ID = ". $destination_id . " ORDER BY name;";
$resultD=mysql_query($sqlD);
if(mysql_num_rows($resultD)){
$chtmlD = '<div class="destination">';
while($row = mysql_fetch_array($resultD)){
$chtmlD .= '<p>' . $row['whatever'] . '</p>';
}
$chtmlD .= '</div>';
echo json_encode(array("errorcode"=>$errorcodeD,"chtml"=>$chtmlD));
} else {
...
}
That will replace your original destination <select> with a div containing the destination description (or whatever the content is). If you don't want to replace the select, you could simply have the JS update a different element on the page, e.g.
jQuery('#some_other_element').html(response.html);