i have some trouble here...
lets say i have a element like this...
bootstrap(document).ready(function() {
bootstrap('#popinquiry').popover({trigger:'hover'});
});
i using noConflict on my source code.. and then i have a element like this..
<a href='#' id='popinquiry' rel='popover' title='Popover Title'>heree</a>
and after i load the page.. the popover was shown, but the trigger i set above doesnt work.. so i must click the "heree" first too show my popover.. but when i write the trigger direct on 'popinquiry'
<a href='#' id='popinquiry' rel='popover' data-trigger='hover' title='Popover Title'>heree</a>
The option worked.. can you help me?? the problem is all off popover options parameter
your javascript:
<script>
$(function ()
{ $('#popinquiry').popover();
});
</script>
your html :
<div class="well">
hover for popover
</div>
try this code; I hope it will solve your problem:
JavaScript:
<script type="text/javascript">
$(function () {
$(".btn").popover({
trigger: 'hover',
placement : 'bottom'
});
});
</script>
HTML:
Popover
Further you can checkout this page for more working examples - http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-popovers.php
Related
I am having a working while loading a div, $(document).ready(function() { works well before div load, but it stop working after div loaded. Why is it happening?
Here is the sample of code I am working with:
<div id="abc0">
<div id="abc">
<script>
$(document).ready(function() {
alert("test");
});
</script>
</div>
</div>
And here is the load function I am using:
$("#abc0").load('mypage #abc');
Use callback function for alert.
$("#abc0").load("mypage #abc > *", function(){
alert("test");
});
$(function() {
alert("test me");
});
Some time you have to write jQuery instead of $
jQuery(document).ready(function($) {
//do jQuery stuff when DOM is ready
});
Hello & thanks for your time!
I'm trying to set up buttons for categories that when clicked load that categories first item in the vis Contained div. Then 'next' and 'prev' buttons in the loaded div data that switch to other items in that category.
So far I have:
php:
<nav>
<button onclick="changeContent('content1')">content1</button>
</nav>
<section id="main">
<div id="visContainer"><div>
</div>
</section
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="/js/jquery.min.js"><\/script>')</script>
<script src="js/javascript.js"></script>
js:
$(function(){
function changeContent(content){
$('#visContainer').load('divList.html' content);
};
});
along with a divList.html file that has different divs listed (filled w text for now).
I'm getting an 'Unexpected identifier' on the function changeContent line in the js and it keeps saying changeContent is not defined (when button clicked). I thought it may be something to do with my declaration or the jQuery but I can't figure out where. I'm new to this so any help would be much appreciated!
$(function(){ ... });
That function creates a new scope, making changeContent unavailable in the window scope where your inline event handler lives. Quick fix would be :
$(function(){
window.changeContent = function(content){
$('#visContainer').load('divList.html' content);
}
});
A better solution would be to remove the inline event handler.
<button id="myButton">content1</button>
and JS:
$(function(){
$('myButton').on('click', function() {
$('#visContainer').load('divList.html #content1');
});
});
I have a simple table with buttons: <button class='btn btn-info' href='#'>More</button>, and I need that when user click by "More" button then array ($records, for example) and "Less" button will be shown under "More" button. For example, $records[0]="1", $records[1]="2". Please, I don't know JavaScript and JQuery very well, but I need to do it using Ajax. So, I very need your help. Thank you.
UPDATE:
$("button.btn-info").click(function() {
alert('click');
});
It's code for clicking by "More button", but I don't know how to write $records array under this button with "Less" button (which will hide the array by click) at the end.
PHP (sample only):
<?php
$records = array(1,2,3,4,5,6,7);
?>
HTML:
<html>
<body>
<div id="more">
<button>More</button>
</div>
<div id="less" style="display: none;">
<div id="codes" style="border-top: 1px dotted #d0d0d0;">
<?php
for($i=0; $i<count($records); $i++) {
printf("$records[%d] = %d<br />",$i,$records[$i]);
}
?>
</div>
</div>
</body>
</html>
JS:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var i = 1;
$('div#more button').click(function() {
$('div#less').toggle();
if (i) { $(this).html('Less'); i=0; } else { $(this).html('More'); i=1; }
});
});
</script>
P.S. Do not forget to include the jQuery plugin or this won't work.
EDIT: There it is jquery.min.js
Demo fiddle: http://jsfiddle.net/fe9wv/
You can use Jquery for this, below is a rough example
Assumptions:
ALL the buttons have an ID(required for fetching data through ajax)
The table cell in which you have the button ,also has a with display style as hidden and class as 'dataspan'
$('.btn-info').live('click',function(){
var id = $(this).attr('id');
$.ajax({
type : "POST",
url: "YOUR TARGET URL",
dataType : "HTML",//you can also use JSON
data : 'id=' + id,
success: function(data)
{
$(this).siblings('.dataspan').html(data);
$(this).siblings('.dataspan').append('<button class="hidedata" value="HIDE"/>');
$(this).siblings('.dataspan').show();
}
});
});
//FOR hiding the data
$('.hidedata').live('click' , function(){
$(this).siblings('.dataspan').hide();
});
Please note that as per the latest JQuery release the .live function has been deprecated, if you are using the latest version I will strongly recommend you to switch to delegate function
I am a newby in ajax and php and I would very much appreciate it if you could help me out. Seeing that I only know a little bit javascript and php I really don't know how to remedy this problem could you help me please! I've been hunting down a fix but couldn't find any, hopefully my search will stop here. I'll try my best to be clear in my explanation.
I would like this:
load html page called ducks
to load into the myDiv area an html page called ducks.html.
I would also like that when I click on on this:
load a list of html links
I would like it to load an html page with a list of links that when clicked will load into the myDiv area without reloading the whole page.
And lastly I would like to set up the myphpscript php file. To load a page with a list of links that will appear in the myDiv area and when I click on one of those links it will load likewise into the myDiv area.
This is my code
<!-- This is your PHP script... myphpscript.php -->
<?php
$contentVar = $_POST['contentVar'];
if ($contentVar == "con1") {
include 'con2.html';
} else if ($contentVar == "con2") {
echo "<a href='con2'>View</a>";
} else if ($contentVar == "con3") {
echo "Content for third click is now loaded. Any <strong>HTML</strong> or text you wish.";
}
?>
<!-- This is the rest of my code -->
<html>
<head>
<script type="text/javascript" src="jQuery-1.5.1.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
function swapContent(cv) {
$("#myDiv").html('<img src="loader.gif"/>').show();
var url = "myphpscript.php";
$.post(url, {contentVar: cv} ,function(data) {
$("#myDiv").html(data).show();
});
}
//-->
</script>
<style type="text/css">
#myDiv {
width:200px; height:150px; padding:12px;
border:#666 1px solid; background-color:#FAEEC5;
font-size:18px;
}
</style>
</head>
<body>
<a href="#" onClick="return false"
onmousedown="javascript:swapContent('con1');">Content1</a>
<a href="#" onClick="return false"
onmousedown="javascript:swapContent('con2');">Content2</a>
<a href="#" onClick="return false"
onmousedown="javascript:swapContent('con3');">Content3</a>
<div id="myDiv">My default content for this page element when the page initially loads</div>
</body>
</html>
It sounds to me that if you want an external page to load when something is clicked, you need to perform an ajax GET or POST request, then print the results to the div:
http://api.jquery.com/jQuery.post/
If you just want to change the contents of the div to some other text, you can use something like jQuery.html: http://api.jquery.com/html/
<script>
$("#idForLink").click(function () {
var htmlStr = "The new text to show";
$('#myDiv').text(htmlStr);
});
</script>
Without using jQuery, your example above is sending self posts to echo contentVar which will always refresh the page.
See this fiddle for a jquery+css solution to your problem [NO PHP REQUIRED]: http://jsfiddle.net/bYNeg/
If you are simply grabbing HTML from another file I would use the load method, as its quick and easy:
$(document).ready(function(){
$('#myDiv').load("someFile.html");
});
For more extensive requests you can use Post and Get. They allow you to pass data with the URL request in order to affect the results that are returned. Obviously your requested URL would need to be PHP/ASP and handle the request in this case.
JAVASCRIPT:
<script type="text/javascript">
$(document).ready(function(){
// this is your mouse event (click) listener
$('.destination_div').on('click','a',function() {
var url = $(this).attr("href");
$('.destination_div').load(url);
return false;
});
});
</script>
Make your HTML anchors simple, do not include inline javascript, because the on("click") handles it already.
HTML:
Your HTML with links
I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had
<div id="nav">
a link </div>
<div id="content>show the stuff</div>
From the comments below - the OP stated the following :
I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html
Alt 1: Use jquery tabs:
See demo and code here: http://jqueryui.com/demos/tabs/
Alt 2: Hide/show div in same html file:
HTML:
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
jQuery:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
Demo: http://jsfiddle.net/5NEu3/3/
Alt 3: Load from server ondemand:
To load html into your main div you should use: http://api.jquery.com/load/
Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.
Html
Show content 1
Show content 2
jQuery
$("#nav a").click(function(e){
e.preventDefault();
$('#maindiv').load($(this).attr("href"));
});
Using jQuery, you could do something like this.
This will open the site <a href="example.html"> and put it inside of the <div id="content"> when you click it, and then disable changing the whole site.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">
Some page
Some other page
My page
</div>
<div id="content">
show the stuff
</div>
Something like this:
function setContent(div, content)
{
getElementById(div).innerHtml = content;
return false; // return false to ignore the click
}
a link
to show a hidden div (i think this is what you wanted)
the javascript (using jQuery)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showdiv").click(function () {
$("#hiddendiv").show();
});
});
<script>
the html
Show the Div
<div id="hiddendiv" style="display:none;">Content here</div>
you can see it in action here