I have 6 buttons(with tooltips) that are generated through PHP and they are all disabled except for the first button. The disabled buttons will only be enabled based on the record on the database.
By the way, I used jquery tooltip http://jquery.bassistance.de/tooltip/demo/
I enabled the tooltip for all elements with the title attribute
<script type="text/javascript">
$(document).ready(function() {
$('*').tooltip({
showBody: " - ",
});
});
</script>
It worked fine when the page first loads or when the page is refresh.
Now I have a function that check if the buttons status are changed from disabled to enabled. After that I fetch the result and put in a variable $buttons then print it on the div that holds the current buttons.
<script type="text/javascript">
document.getElementById("menus").innerHTML = <?php echo json_encode($buttons, JSON_HEX_APOS | JSON_HEX_QUOT); ?>;
</script>
The problem is that the tooltip reverts back to the default tooltip.
I'm not sure if it's in the css or the javascript since I'm not an expert.
The problem is that you're adding content AFTER you've called the .tooltip(...) stuff.
try calling .tooltip on the content you add into the .innerHtml AFTER you've made the call to get the new content.
Related
I have a problem with colorbox:
I have a page that would receive part of its content by AJAX. Now within that ajax retrieved content there are Colorbox links as well. Now these links don´t work, or rather said the first click would not work (but would lead to the link within the browser except the link within a colorbox), now after having the first click (which would not work as described before), hitting the back button of the browser all further links would display - as wanted - in a colorbox.
I tried several browsers with all having the same result. So I thought - especially since after having gone wrong once then working correctly - this could probably be a problem of having the colorbox library not in the cache.
So I tried to add this line of code (except for being on the main page anyway) within the ajax retrieved content
<script type="text/javascript" src="/js/jquery.colorbox-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".cbDetails").colorbox();
}
</script>
which leads to the error explained above not happening anymore but rather doubling and trippling the colorbox layers so to say, which means, after having hit 2 different colorbox links one would need 2 clicks to close the colorbox, after having hit 3 different colorboxes one would need 3 clicks to close those third colorbox and so on...
As I was asked to do so, here is the relevant code:
Now that is the main page including that:
<script type="text/javascript">var currentTime = '<? print date("F d, Y H:i:s", time())?>';</script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="/js/superfish.js"></script>
<script type="text/javascript" src="/js/custom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".cbDetails").colorbox();
});
</script>
as well as in the body then that:
echo '<button style="width:60px;" class="order" title="Ordern">Ordern</button>';
which would create work out good. But if I have the second part, so that one:
echo '<button style="width:60px;" class="order" title="Ordern">Ordern</button>';
being placed on the same page by AJAX it would not work any more (while having that AJAX is crucial to me).
It could be that you're using a class to select, $(".cbDetails").colorbox(); would apply to all elements with that class and open up a lot of windows as you're describing. Try to target your clicks more specifically with id's or $(this).
$(document).ready(function(){
$(".cbDetails").on("click", function()
{$(this).colorbox();});
});
I have a form that is dynamically created, so I can't edit the layout of the form itself. However, I want to add a title above one of the text input fields in the form. I have given that field a unique css ID and am using the following script to try and add my heading before it:
<script type="text/javascript">
$('<h5 class="form_title">Calculate Return</h5>').insertBefore('#price');
</script>
For some reason this won't work though, can anyone think why that might be. Here is the page in question
http://www.theres-a-thought.com/client-yourdream/?page=property_submit
Add document ready to your code -
<script type="text/javascript">
$(document).ready(function() {
$('<h5 class="form_title">Calculate Return</h5>').insertBefore('#price');
});
</script>
Looking at your page, I don't see where #price is defined. Maybe it is added later via JS and i missed it..
You are using jquery in no-conflict mode, and you need to wrap your code in document ready..
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('<h5 class="form_title">Calculate Return</h5>').insertBefore('#price');
});
</script>
Running this; however, has no affect on the page(from what i can see).
The code below works because the ID exists. It isn't what you are trying to accomplish, but it should get you started.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('<h5 class="form_title">Calculate Return</h5>').insertBefore('#property_name');
});
</script>
i have recently started coding in PHP and im wondering how i can show a div defined in the adress bar (example: www.yourwebsite.com/index.php?divtoshow=home)
The div is hidden with css, display:none;
then i want it to display the home div
i have tried using jquery, but i cant seem to get the variable to be implamented into the script
I already have the following for when i click the home icon:
$(".chome").click(function(){
$("#home").show(500);
});
First, get the name from the query string:
<?php $divtoshow = $_GET["divtoshow"]; ?>
Second, add some JQuery to display the div on page load:
<script>
$(document).ready(function() {
$("div[id=<?php echo $divtoshow; ?>]").show();
});
</script>
I've tried several options to try and load the content from a div on one page with id="container" into a div on a different html page id="landing".
I used the answer here and also lots of variations of it
Load content of a div on another page
I've run a test and Jquery is being loaded.
The test files are here http://www.salcombeyurts.co.uk/test/landing.html
My code looks like this:
<script type="text/javascript">
$('#landing').load('source.html #container');
</script>
This will eventually end up on a PHP page. Part of a Joomla site.
You run the script before the #landing div is defined.
Run your code after the DOM ready event
$(function(){
$('#landing').load('source.html #container');
});
It seems like the suggestion you got was to do an AJAX request and load the entire page into the #container div on the current page, which is not a bad idea. What you seem to be trying to do, on the other hand, is load the page and then get the content of a div inside that page and put it in a container div on the current page, which is overly complicated and a bad solution to what ever the problem is.
Here is my solution none the less
$(function() {
$.get('page with the div you want', function(data) {
var content = $(data); //turn the page into a jquery object
var div = content.find('#div'); // this is the div you want the content from
$('#container').html(div.html()); // this will set the content of the current div
});
});
I would move your script to the bottom of the page and replace it like so.
Original:
<script type="text/javascript">
$('#landing').load('source.html #container');
</script>
New:
<script type="text/javascript">
$(document).ready(function() {
$('#landing').load('source.html #container');
});
</script>
Note the space removal between source.html and #container.
I want to be able to click on a link lower down my PHP page, it send a variable and outputs the result in a <div> tag at the top half of the page.
I've linked to latest jquery, and so far I have this in my <head>:
<script type="text/javascript">
$().ready(function() {
$("#result").load("crimes_result.php");
});
</script>
And in my <body>:
<div id="result"></div>
What I need though, is that the div to be shown and depending on the result of a variable sent by a link the user clicks lower down the page.
like crimes_result.php?id=4334 or crimes_result.php?id=54543
How can I finish my script so it does that?
NOTE: I'm useless in ajax/jquery/javascript
If I understand correctly, simply call .load() from a click event and pass it the href of the link:
HTML:
<a class="loadlink" href="crimes_result.php?id=4334">Click Me<a>
JS:
$(".loadlink").click( function(event) {
event.preventDefault();
$("#result").load($(this).attr("href"));
});
Example: http://jsfiddle.net/jtbowden/ueucL/1/