I have a website with a search function. The user enters his search parameters, and a popup (via bpopup.js) is displayed with links to the results. I want the user to be able to click each link and have another iframe pop up with the data from that url. I plan to limit the user to 5 results at a time. Currently my search works fine, and the popup comes up with the list of links. However, when I click on each of the links, the data is loaded inside that particular iframe, not a new one. I want to be able to have multiple iframes open, which bpopup says is possible.
Here's the pertinent search.php code:
if($searcher->getResultCount() > 0) {
echo('<div><ul>');
foreach($searcher->getResults() as $result) {
$newclass="imagen" . $counter;
$url = '<a id="' . $newclass . '" href="' . $result['filePath'] . '">Test</a>';
echo('<li><em>' . $url . '</em></li>');
$counter++;
}
echo('</ul></div>');
} else.....
At the bottom of search.php is where I set up my bpopup:
$(document).on(function() {
$(function() {
$('#searchResults').bPopup({
content: 'iframe',
contentContainer: '.searchResults',
position: [200,200],
follow: [false, false],
opacity: 0,
scrollBar: 'true'
});
$('#imagen1').bind('click', "a.imagen1", function (e) {
e.preventDefault();
var urltoLoad = $(this).attr("href");
$('#result1').bPopup({
content: 'iframe',
contentContainer: '.resultcontent1',
follow: [false, false],
position: [50,200],
positionStyle: 'fixed',
closeClass: 'b-close1',
scrollBar: 'true',
escClose: 'true',
loadUrl: urltoLoad
});
});....
There is one #imagen set up for each of the 5 results.
And finally,
<div id = "searchResults"> </div>
<div id = "result1">
<a class="b-close"></a>
<div class="resultcontent1"></div>
</div>
<div id = "result2">
<a class="b-close"></a>
<div class="resultcontent2"></div>
</div>
<div id = "result3">
<a class="b-close"></a>
<div class="resultcontent3"></div>
</div>
Related
I was trying to implement like and dislike button to comments by the guidance from a tutorial, but i cannot get attributes from my code.
this is my html code including php
<a id="' . $quote->quote_id . '" data-toggle="tooltip" title="'. $language->list->tooltip->like .'" class="clickable like tooltipz"><span class="glyphicon glyphicon-plus red"></span></a>
<span class="up_votes"><?php echo ($vote_up); ?></span>
<a id="' . $quote->quote_id . '" data-toggle="tooltip" title="'. $language->list->tooltip->dislike .'" class="clickable dislike tooltipz"><span class="glyphicon glyphicon-minus red"></span></a>
<span class="up_votes"><?php echo ($vote_down); ?></span>
$quote->quote_id is integers like 1,2
$language->list->tooltip->like = Like comment
$language->list->tooltip->dislike = Dislike comment
$vote_up = total likes
$vote_up = total dislikes
this is the jquery part
//####### on button click, get user like and send it to vote_process.php using jQuery $.post().
$(".glyphicon").on('click', '.glyphicon', function (e) {
//get class name (down_button / up_button) of clicked element
var clicked_button = $(this).children().attr('class');
//get unique ID from voted parent element
var quote_id = $(this).parent().attr("id");
if(clicked_button==='glyphicon-minus') //user disliked the content
{
//prepare post content
post_data = {'quote_id':quote_id, 'vote':'down'};
//send our data to "vote_process.php" using jQuery $.post()
$.post('processing/process_votes.php', post_data, function(data) {
//replace vote down count text with new values
$('#'+quote_id+' .down_votes').text(data);
//thank user for the dislike
}).fail(function(err) {
//alert user about the HTTP server error
alert(err.statusText);
});
}
else if(clicked_button==='glyphicon-plus') //user liked the content
{
//prepare post content
post_data = {'quote_id':quote_id, 'vote':'up'};
//send our data to "vote_process.php" using jQuery $.post()
$.post('processing/process_votes.php', post_data, function(data) {
//replace vote up count text with new values
$('#'+quote_id+' .up_votes').text(data);
//thank user for liking the content
}).fail(function(err) {
//alert user about the HTTP server error
alert(err.statusText);
});
}
});
//end
});
in jquery part i am trying to know which button is clicked by user and get id of that button
.attr('class') will return all classes that are assigned to the element, which is not working as you are comparing the entire class list against a specific class (i.e 'class1 class2 class2' != 'class2').
.hasClass('specific-class') will return a boolean value depending on if that specific class has been assigned to the element in question.
Recommended Solution
You can simplify the code a little, the code below attaches a click event to anything with the class .glyphicon before using hasClass(".glyphicon-minus") or hasClass(".glyphicon-plus") to check if it is a down or up vote.
From here there are two alternatives to update the total vote for each post, you can either use your current technique (finding the closest wrapping class - I've used .post in this example) or you can add attributes to the UI elements which identify the elements that belong to that post - i.e. for="post1".
I've included the code for the second option as it is a bit shorter, but left it commented out.
There is also a check to see if the new total is 0, which then stops the process so that you cannot get negative votes. I've left this check commented out, but you can uncomment it if needed.
Hope that helps, let me know if you needed anything else.
$(".glyphicon").click(function() {
vote = 0;
// Check if negative vote
if ($(this).hasClass("glyphicon-minus")) {
vote = -1;
}
// Check if positive vote
if ($(this).hasClass("glyphicon-plus")) {
vote = 1;
}
// Update individual vote count
newVoteTotal =
parseInt($(this).closest(".post").find(".votes").text()) + parseInt(vote);
// Uncomment if statement and closing bracket if you want to stop usings from being able to give negative votes
//if ( newVoteTotal != "-1" ) {
$(this).closest(".post").find(".votes").text( newVoteTotal );
//}
// ALTERNATIVE using 'for' attributes
// postID = $(this).attr("for");
// newVoteTotal = parseInt($(".votes[for='" + postID + "']").text()) + parseInt(vote);
// $(".votes[for='" + postID + "']").text(newVoteTotal)
})
.post {
padding: 20px;
border: 1px solid black;
}
.post-body {
padding-bottom: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post" id="post1">
<div class="post-body">
Lorem ipsum post 1.
</div>
<button class="glyphicon glyphicon-plus" for="post1">Vote Up</button>
<button class="glyphicon glyphicon-minus" for="post1">Vote Down</button>
<span class="votes" for="post1">0</span>
</div>
<div class="post" id="post2">
<div class="post-body">
Lorem ipsum post 2.
</div>
<button class="glyphicon glyphicon-plus" for="post2">Vote Up</button>
<button class="glyphicon glyphicon-minus" for="post2">Vote Down</button>
<span class="votes" for="post2">0</span>
</div>
Specific Solution
I have tried to create a specific solution for your code structure, I believe this will work. Changes include:
$(".glyphicon").on('click', function(e) { - corrected your creation of the click event
var clicked_button = $(this).attr('class') - you can gather all classes if you wish (as later we will just check for a presence of a single class) .attr() docs
if (clicked_button.includes('glyphicon-minus') - this checks the full list of classes we gathered early, to see if a specific class is present (and returns true if it is). .include() docs
I have removed all the code that sends the info server side, and replaced it with a console.log() message to prove we have gathered all the parameters you wanted. You can add your old code back in for your production site.
//####### on button click, get user like and send it to vote_process.php using jQuery $.post().
$(".glyphicon").on('click', function(e) {
//get class name (down_button / up_button) of clicked element
var clicked_button = $(this).attr('class');
//get unique ID from voted parent element
var quote_id = $(this).parent().attr("id");
if (clicked_button.includes('glyphicon-minus')) //user disliked the content
{
// POST like
console.log("Liked quote-id=" + quote_id + " (via class " + clicked_button + ")");
} else if (clicked_button.includes('glyphicon-plus')) //user liked the content
{
// POST dislike
console.log("Disliked quote-id=" + quote_id + " (via class " + clicked_button + ")");
}
});
//end
.glyphicon {
width: 50px;
height: 50px;
display: inline-block;
}
.red {
background: red;
}
.like {
border-bottom: 5px solid green;
}
.dislike {
border-bottom: 5px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="1" data-toggle="tooltip" title="Like comment" class="clickable like tooltipz"><span class="glyphicon glyphicon-plus red"></span></a>
<span class="up_votes">0</span>
<a id="1" data-toggle="tooltip" title="Dislike comment" class="clickable dislike tooltipz"><span class="glyphicon glyphicon-minus red"></span></a>
<span class="up_votes">0</span>
1st:
$(".glyphicon").on('click', '.glyphicon', function (e) {
//you need to change it to
$(document).on('click', '.glyphicon', function (e) { // if its dynamically generated element or you toggle `.glyphicon` class ..
// else you can just use
$('.glyphicon').on('click' , function(){
//code here
})
2nd: To check the classes you need to use hasClass
and on the next line
var clicked_button = $(this).children().attr('class');
you already in the click event of glyphicon so no need to use children() here .. and if you console.log($(this).attr('class')) it will output glyphicon glyphicon-plus red
var clicked_button = $(this);
if(clicked_button.hasClass('glyphicon-minus')){
}
Note: after change your code with my notices above .. you can then console.log(quote_id)
In my webpage I am using jquery tabs.
<script type="text/javascript">
$(document).ready(function()
{
$('#horizontalTab').responsiveTabs({
rotate: false,
startCollapsed: 'accordion',
collapsible: 'accordion',
setHash: true,
disabled: [3,4],
activate: function(e, tab) {
$('.info').html('Tab <strong>' + tab.id + '</strong> activated!');
}
});
$('#start-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('active');
});
$('#stop-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('stopRotation');
});
$('#start-rotation').on('click', function() {
$('#horizontalTab').responsiveTabs('active');
});
$('.select-tab').on('click', function() {
$('#horizontalTab').responsiveTabs('activate', $(this).val());
});
});
</script>
<div id="horizontalTab" style="margin-top:10px;">
<ul class="tabul">
<li class="tabli">
<?php echo lang('purchasedtickets');?>
</li>
<li class="tabli"><?php echo lang('gifted').' '.lang('tickets');?></li>
<li class="tabli"><?php echo lang('received').' '.lang('tickets');?></li>
</ul>
<div id="purchased"></div>
<div id="gifted"></div>
<div id="received"></div>
</div>
When I click on tab2 ie, #gifted tab, the corresponding result will be fetched from an ajax call and will be set to div with id gifted. In this sections I am using Codeigniter pagination. If I click on pagination link 2 of gifted section, the URL will come like http://domain.org/project/video/tickets/2#gifted where 2 in the URL is the page number.
After this, when I click on any other tab say tab1 ie, purchased tab, then the link of page will come like http://domain.org/project/teshot/video/tickets/2#purchased (instead of http://domain.org/project/teshot/video/tickets#purchased) which is appending the url of previous section.
I want to avoid this problem. How can I solve this?
Can ayone help me?
Thanks in advance.
I put Jquery Tools's Overlay in my site to show a projects' info in several overlays. This works pretty ok, but I have been trying to 'automate' the code to read new projects and load them in overlays. What happen looks ok, but no matter which project I click, the overlays allways load the content of the first project...
I did a lot of googling around and copy-pasting to get this far, I am not (yet) much of a programmer, I hope the code doesn't scare you guys.. ;-)
Anyway, here's a link: http://www.wgwd.nl/test
If you click 'Projects' a normal div opens that loads all the projects it finds (two, for now). When you click one it opens that content in 3 overlays. As said, unfortunately it allways loads the same content independent of which project you click.
I have tried to assign the JScript a unique function name (generated with php from the project's filename) but that doesn't seem to work.
Any ideas? here's my code :
<?
//reads projectfolder and distills
//a basename out of the project description.txt
$textfiles = glob('content/projects/*.txt', GLOB_BRACE);
foreach ($textfiles as $textfile) { ?>
<div id="details"> <?
$pad = pathinfo ($textfile);
$base_name = basename($textfile,'.'.$pad['extension']);
// the link that opens the overlays. Don't think the "id" tag is nescessary
echo '<a id="'.$base_name.'" href="#" onclick="'.$base_name.'()"><img src="'.$base_name.'/main.jpg"/></a>' ?>
<!-- defines overlay, hidden by default -->
<div id="dragwindow1" class="overlay ol1">
<a class="close"></a>
<?
include ('content/projects/'.$base_name.'/content.txt');
?>
</div>
</div>
<?
// the description of each project
include ($textfile);
?>
<script>
// within the foreach open all overlays with function name $base_name
var <?=$base_name?> = function () {
$("a[rel]").each(function() {
$(this).overlay().load();
});
}
</script>
<hr />
<? } //end foreach ?>
</div>
<!-- somehow, without defining these links, the whole 'open all overlay' thing doesn't work -->
<a rel="div.overlay:eq(0)" type="button" style="display: none">first</an>
<a rel="div.overlay:eq(1)" type="button" style="display: none">second</a>
<a rel="div.overlay:eq(2)" type="button" style="display: none">third</a>
<script type="text/javascript">
$(function projects() {
// positions for each overlay
var positions = [
[120, '15%'], //uppper left, #1
[70, '60%'], // lower left, #2
['60%', '40%'], // lower right, #3
];
// setup triggers
$("a[rel]").each(function(i) {
$(this).overlay({
// common configuration for each overlay
oneInstance: false,
// setup custom finish position
top: positions[i][0],
left: positions[i][1],
});
});
});
</script>
Thx in advance!
EDIT: I edited the code to omit all that's unrelated
The question remains: Javascript only returns the content of the first call in the foreach loop. Is there anyway to generate multiple instances of the javascript for each loop in the PHP?
SOLVED! With big, big, help of a friend, who redefined how multiple Overlays from Jquery Tools could work (and should have worked in the first place...)
Without getting too much into it, here's the code for future reference:
Basically the trick is:
// open all overlays
function openAll(currentOverlays) {
$(currentOverlays).each(function()
{
$(this).overlay().load();
});
}
The complete page is now something like this:
<script type="text/javascript">
$(function () {
// positions for each overlay
var positions = [
['60%', 540], // lower right, #3
[80, '65%'], // lower left, #2
[120, '12%'], //uppper right, #1
];
// setup triggers
$("div.overlay").each(function(i) {
$(this).overlay({
// some configuration for each overlay
// positioning the overlays
top: positions[i % 3][0],
left: positions[i % 3][1]
});
});
});
// open all overlays
function openAll(currentOverlays) {
$(currentOverlays).each(function()
{
$(this).overlay().load();
});
}
// close all overlays
function closeAll(currentOverlays) {
$(currentOverlays).each(function()
{
$(this).overlay().close();
});
}
</script>
<div id="projectstarter">
<h2>Projects</h2>
<div class="maindetails">
<a class="close"></a> <!-- defines a close button for the overlay -->
<?
$textfiles = glob('content/projects/*.txt', GLOB_BRACE);
rsort($textfiles);
foreach ($textfiles as $textfile) {
$pad = pathinfo ($textfile);
$base_name = basename($textfile,'.'.$pad['extension']);
echo '<a href="#" onclick="openAll(\'div.'.$base_name.'\')">';
echo '<img src="./content/projects/'.$base_name.'/projectimage.jpg" class="thumb"/></a></div>';
include '$textfile'; //project description
} // end MAIN foreach ?>
</div>
</div>
<div id="projects">
<?
foreach ($textfiles as $textfile) {
$pad = pathinfo ($textfile);
$base_name = basename($textfile,'.'.$pad['extension']); ?>
<div id="dragwindow3" class="<?=$base_name?> overlay ol3">
<a class="close"></a>
<h2>Media</h2>
<div class="details">
// include media here
</div>
</div>
<div id="dragwindow2" class="<?=$base_name?> overlay ol2">
<a class="close"></a>
<h2>Credits</h2>
<div class="details">
// include credits here
</div>
</div>
<div id="dragwindow1" class="<?=$base_name?> overlay ol1 ">
<a class="close"></a>
<h2>Content</h2>
<div class="details">
// include content here
</div>
</div>
<? } ?>
<script>
$( "#projectstarter" ).overlay();
$( "#projectstarter" ).draggable().resizable({ghost: true});
$( ".ol1" ).draggable().resizable({ghost: true});
$( ".ol2" ).draggable().resizable({ghost: true});
$( ".ol3" ).draggable().resizable({ghost: true});
</script>
I am using bpopup with multiple popup links on the page and multiple content for each link. To associate the JQuery with each link, I use a [id^="div_name"]. The JS is given below:-
$(document).ready(function()
{
console.log( 'ready!' );
$('[id^="click"]').bind('click', function(){
$('[id^="profile"]').css('display','inline');
$('[id^="profile"]').bPopup({
modalClose: true
, opacity: .8
, positionStyle: 'fixed'
, fadeSpeed: 'slow'
, followSpeed: 'slow'
});
});
});
The corresponding PHP script has:-
<?php
foreach($listings as $listing)
{
<a id="click" href="some url"><?php echo $listing->profile_link;?></a>
<div id="profile" style="background-color:#fff; width:400px; height:400px; display:none; "><?php echo $listing->company_name; ?></div>
}
The listings are all being associated with the popup action. However, their content is the same as the last $listings->company_name. However, I want the content to have individual company names. I realize that I am using the same div-id and after the content is being rendered on the browser, it associates the last one to all the popups. How do I work around this?
I am trying to update a value within the jquery ui tab via a ui dialog.
The expected process as such:
From tab display, user clicks on the edit link.
Prompts a ui dialog box with form for user to input value.
User input value and save changes.
After saving, user is brought back to the tab with the updated value.
I have issues on point 4, and here are the codes so far.
HTML:
<div id="acc">
<input type="text" id="edit_acc" value="">
</div>
<div id="tabs">
<ul>
<li>Tab One</li>
<li>Tab Account</li>
<li>Tab Three</li>
</ul>
</div>
<div id="one">
<p>Tab One Listing</p>
</div>
<div id="account">
<p>Tab Account Listing</p>
<table width="100%">
<?php
while ($rows = mysql_fetch_array($query))
{
echo '<tr>';
echo '<td id="editacc_'.$rows['id'].'">'.$rows['name'].'</td>';
echo '<td><a id="acc_'.$rows['id'].'" class="link_acc" href="#">Edit</a></td>';
echo '</tr>';
}
?>
</table>
</div>
<div id="three">
<p>Tab Three Listing</p>
</div>
Javascript:
$('#tabs').tabs({
ajaxOptions: {
error: function(xhr, index, status, anchor)
{
// if page does not exist, this will load
$(anchor.hash).text('Could not load page');
}
}
});
$('.link_acc').click(function() {
acc = $(this).attr('id');
acc = acc.replace('acc_', '');
$.post('get.php', { item: acc}).success(function(data) {
$('#edit_acc').val(data);
});
// prompt dialog box with the value of the stated id
$('#acc').dialog({
title: 'Edit Account',
modal: true,
buttons: {
"Save": function() {
var data = $('#edit_acc').val();
$.post('set.php', { item: acc, val: data}).success(function() {
$('#tabs').tabs('load', 2);
$('#acc').dialog( "close" );
});
},
Cancel: function() {
$(this).dialog( "close" );
}
}
});
});
get.php - retrieve value from the database
if (isset($item))
{
// check for the cat id
$query = mysql_query('SELECT name FROM acc WHERE id = '.$item);
$rows = mysql_num_rows($query);
if ($num_rows == 1)
{
while ($result = mysql_fetch_array($query))
{
echo $result['name'];
}
}
}
set.php - update the database
if (isset($item))
{
mysql_query('UPDATE acc SET name ="'.$val.'" WHERE id = '.$item);
}
I have 2 questions:
how to get display refreshed and displayed the updated value within the tab Account listing?
is there a better/neater way to in the passing of the referencing the id instead of using the id attr and replacing it?
Thank you in advance.
You don't need an ajax request to get the data. You can read it from the table cell.
Replace
$.post('get.php', { item: acc}).success(function(data) {
$('#edit_acc').val(data);
});
with
var valueHolder = $(this).parent().prev();
$('#edit_acc').val(valueHolder.text());
And if you want to update the data after the save-request in the table cell, you can use the variable again:
valueHolder.text(value);
P.s.: in your code you have the id 'account' twice, this is not allowed, ids have to be unique; in the javascript code you're using the id 'acc', so you should use it in the html too.
=== UPDATE ===
Also see this example.
P.s.: you should remove the $('#tabs').tabs('load', 2); and move the divs with the ids one, account and three into the div with the id tabs.