I have this code
<?php
if(!empty($auction['Auc']['beginner'])){
?>
<?= $html->image('badge/beginner_icon.png', array('width'=>"30", 'height'=>"30", 'border'=>"0", 'alt'=>"Beginner auction", 'title'=>"Beginner auc"))?>
<div class="tooltip">
<label>Beginner</label>
<label>For an explanation please click here</label>
</div>
<script>
$(function() {
$("#trigger_beginner").tooltip();
});
</script>
<?php
}
?>
Issue is when I have two auctions with same auction type for e.g like beginner in this case, then tooltip is only working for one auction. I want it to display tooltip on all similar auctions..
Change your code to use this:
<?php if(!empty($auction['Auc']['beginner'])){?>
<?= $html->image('badge/beginner_icon.png', array('width'=>"30", 'height'=>"30", 'border'=>"0", 'alt'=>"Beginner auction", 'title'=>"Beginner auc"))?>
<div class="tooltip">
<label>Beginner </label>
<label>For an explanation please click here</label>
</div>
<script>
$(function() {
$(".trigger_beginner").tooltip();
});
</script>
<?php } ?>
ID has to be unique so you need to use different IDs or a class instead.
ID of elements should be unique. No two elements should have same ID. You should use CSS class as your jquery selector
$(function() {
$(".yourCssClassName").tooltip();
});
Assuming all your auction items has the class yourCssClassName
Related
I want to randomly display three divs (of the same class ".post-content") from a specific url.
I can display contents of a div from another url (with consent) using the following code, but it lacks the randomisation I need:
<script>
$(function(){
var contentURI= 'http://www.example.com/ .post-content';
$('#response').load('grabber.php?url='+ contentURI);
});
</script>
<?php echo file_get_contents($_GET['url']); ?>
<div id="response"></div>
EDIT This currently outputs a url with just the one div of that class. I need it to output x3 divs of the same class at random.
My skills are somewhat lacking to mash other code I've found into one concise code. Any assistance you can provide would be greatly appreciated. Thank you.
Found the answer...
JQuery
$.get("https://www.example.com", function(data) {
var $quotes = $(data).find(".container-articles-5"),
count = $quotes.length,
$random = function() {
return $quotes.eq(Math.floor(Math.random() * count));
};
$(".blog-ad-1").append($random);
});
HTML
<aside class="blog-ad-4">
<div class="blog-ad-5">
<div class="blog-ad-3">
<div class="blog-ad-1"></div>
</div>
<div class="blog-ad-3">
<div class="blog-ad-1"></div>
</div>
<div class="blog-ad-3">
<div class="blog-ad-1"></div>
</div>
</div>
</aside>
I have a list of items on my page from a DB table
I am trying to change the glyphicon when checked
<div class="div1">
<span id=".<?php echo $row['id']; ?>" style="color:black;" class="glyphicon glyphicon-eye-open"> </span>
</div>
this is the script on the top of my page:
<script>
$(document).ready(function(){
$(".div1").click(function(){
$(".div1").load("clicked.php");
});
});
</script>
clicked.php looks like:
<span id="<?php echo $row['id']; ?>" style="color:black;" class="glyphicon glyphicon-ok"> </span>
The problom is the when I click on one item - all the items change there glyphicons
What am I doing wrong?
You just have to remove & add new class:
$(document).ready(function(){
$(".div1").click(function(){
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
//Here you can add ajax call
});
});
There is no need to go all the way to the server to get a new span when all you are doing is removing a class and adding a new class to a span.
Also using the right scope, $(this) will stop it effecting all your div1 elements.
<script>
$(document).ready(function(){
$(".div1").click(function(){
//$(".div1").load("clicked.php");
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
});
});
</script>
And to make the code toggle from one to another on each click
<script>
$(document).ready(function(){
$(".div1").click(function(){
if ( $(this).children('span').hasClass('glyphicon-ok') ) {
$(this).children('span').removeClass('glyphicon-ok');
$(this).children('span').addClass('glyphicon-eye-open');
} else {
$(this).children('span').removeClass('glyphicon-eye-open');
$(this).children('span').addClass('glyphicon-ok');
}
});
});
</script>
I have three div tags, on click of a link I want to reload the second div tag only instead of loading the complete page, I want to keep the first and third div tag as static and second div tag should be dynamic?
<div class="first">
<?php echo $data->hospital_name;?>
</div>
<div class ="second">
//content//
<div>
<div class ="third">
//content//
<div>
First of all you should make the difference between your divs by making their IDs unique as Billy said in the comment. Classes are used to make a common selector for all elements. Create your HTML like below:
<div id="first">
<?php echo $data->hospital_name;?>
</div>
<div id="second">
//content//
<div>
<div id="third">
//content//
<div>
Now to load data in only a particular div, you can use Ajax request in three ways using jQuery.
$('#second').load("load.php");
OR
$.post('load.php?param=value',function(data){
$('#second').html(data);
});
OR
$.get('load.php?param=value',function(data){
$('#second').html(data);
});
OR
$.ajax({
url:"load.php";
data: yourDataObject,
success: function(data){
$('#second').html(data);
}
});
Hope all above will help a little
You can try load
$(".second").load("yourhtml.html");
Give id to second div and then try following
#secondDivId::after {
content:"";
}
it will refresh the second div.
Try this it's working :
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#link").click(function(){
$(".second").load("abc.html");
});
});
</script>
</head>
<body>
<div class="first">
<a id="link" href="patientLogin/patientVisit_details/<?php echo $data->patient_visit_id;?>"><?php echo $data->hospital_name;?></a>
</div>
<div class ="second">
//content//
<div>
<div class ="third">
//content//
<div>
</body>
</html>
Here, abc.html is the file where your content exist that you want to display in <div class="second">...</div> on click the link.
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 am trying to add a new div to the page when you click on NEW DIV?
How could I do this? Can someone point me in the right direction?
More example code is always helpful, but I'll try to give you some basics.
<div id="Content">
<button id="Add" />
</div>
$(function () {
$('#Add').click(function () {
$('<div>Added Div</div>').appendTo('#Content');
});
});
There are a bunch of different ways, it depends on what you want to do. A simple way is like this:
$('#id').html('<div>Hello</div>')
Which replaces the inner html of item with id 'id' with "Hello". So this:
<div id='id'>Old Html </div>
Would become:
<div id='id'><div>Hello</div></div>
And this:
$('#id').after('<div>Hello</div>')
Would transform the "Old Html" into this:
<div id='id'>Old Html</div>
<div Hello </div>
Check out www.visualjquery.com and select the Manipulation button. It gives you more than you could need to know in an easy to explore fashion.
Make sure to use the $(document).ready function in jQuery. You need this to "run" the script once your page is loaded and enable the action that is being called on this dummy button to append a new div to an existing div.
You can also use this to append anything you'd like to other elements on the page by using jQuery selectors such as .class or #id.
<div id="Content">
<button id="Add" />
</div>
$(document).ready(function() {
$('#Add').click(function () {
$('<div>Added Div</div>').appendTo('#Content');
});
});
Another useful option is to replace the contents of a tag with jQuery. You can do this using the .html() function.
<div id="Content">
<p id="changed">Hello World!</p>
<button id="change_content" />
</div>
$(document).ready(function() {
$('#change_content').click(function () {
$('#changed').html('Goodbye World');
});
});
Hope this helps!