I am using jquery to open popups. My popup content consist of image and text.
When I click pop1 I get my pop1 content. When I click pop2 for few seconds I see my pop1 content and then my pop2 loads. How can I fix this?
my popup code:
$(document).ready(function(){
///////LINKS - POPUP////////
$('#all').delegate('a.pop-lnk', 'click', function(){
var page = $(this).attr('id');
$('#popup').empty();
$('#gr-out').css({ opacity: 0.7, 'width':$(document).width(),'height':$(document).height()}).show();
$('#popup').css({'display': 'block'});
$('#popup').load("../phpHandler.php?page="+ page);
})
$('body').delegate('.hide-it', 'click', function(){
$('.hide-it').hide();
})
});
my php that handles the links (phpHandler):
<?php
$page = $_GET['page'];
$pages = array('pop1',
'pop2');
if (!empty($page)) {
if(in_array($page,$pages)){
$page .= '.php';
require_once('../' . $page . '');
}
else require_once('../err.php');
}
else require_once('../err.php');
?>
That is because you first show the element containing the previously loaded pop1 content
$('#gr-out').css({ opacity: 0.7, 'width':$(document).width(),'height':$(document).height()}).show();
$('#popup').css({'display': 'block'});
and then you start to load the new content
$('#popup').load("../phpHandler.php?page="+ page);
It is not a caching but a timing issue :)
Show the popup in a .load callback so that the html is loaded before you show it.
$('#popup').load("../phpHandler.php?page="+ page, function(){
$('#popup').css({'display': 'block'});
});
When you hide your modal, clear out its contents.
$('body').delegate('.hide-it', 'click', function(){
$('.hide-it').hide();
$('#popup').empty();
})
});
Related
I have tinymce working well FIRST time you click the button, but after that it doesn't init anymore, no errors however.
To get editor again you need to refresh page.
Is it possible to get init editor to the text area every time you open the modal without refreshing page ?
$(document).ready(function() {
$(document).on('click', '.btn.modal', function() {
var title = $('.modal-title'),
content = $('.modal-body'),
footer = $('.modal-footer');
$.post('units.php', { addnew: 'unit' }, function(r) {
title.html(r.title);
content.html(r.content);
footer.html(r.btns);
tinymce.init({ selector: 'textarea' });
$('#modal').modal('show');
},'json');
});
});
The problem is you are using the general initialisating, which probably conflits with the textarea(s) which already have been initialised... .
The best way to solve this is by destroying all the initialised tinymce first using:
$('textarea').tinymce().remove();
and then initialising them again like this:
tinymce.init({ selector: 'textarea' });
In your example this would be:
$(document).ready(function() {
$(document).on('click', '.btn.modal', function() {
var title = $('.modal-title'),
content = $('.modal-body'),
footer = $('.modal-footer');
$.post('units.php', { addnew: 'unit' }, function(r) {
title.html(r.title);
content.html(r.content);
footer.html(r.btns);
$('textarea').tinymce().remove();
tinymce.init({ selector: 'textarea' });
$('#modal').modal('show');
},'json');
});
});
I am pulling the 50 most recent records from a mySQL database. Each goes into a DIV which has Isotope and works perfectly - DIVs animate, reset, etc.
Using AJAX to call for the next 50 records using OFFSET, however, the new records load into new DIVs but Isotope's classes are not applied to them (as seen via Web Inspector.)
THE SET UP:
index.php = calls the database when loaded in the browser, Isotope works fine. A link on index.php (a#update_newImages) triggers a listener to load "load-ajax.php".
load-ajax.php = an external page which only has the SQL SELECT and PDO loop. These records load but w/o Isotope applied, thus the problem.
code from index.php
...database connection info and query code go here
$filter = ""; // appears in the echo'd DIV below, for filtering the ISOTOPE divs. Turned off til this injection problem is solved
//ISOTOPE SETTINGS, in <HEAD>
var $container = $('#theContent');
$container.isotope({
layoutMode : 'fitRows', //leave blank for default masonry
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
in BODY:
<div id="theContent">
<?php
for($i=0; $links = $query_links->fetch(); $i++){
echo "<div class=\"".$filter." box\">" . $links['ATtitle']."<br>" . "#" . $links['LID']."-
". $links['descr']."</div>";
}
?>
</div><!-- theContent -->
<script> // RIGHT BEFORE BODY TAG CLOSES
var offset_newImages = 0; // initial offset value
var newImages = document.getElementById('update_newImages'); // a link on the page
newImages.addEventListener('click', function() {
event.preventDefault();
offset_newImages += 50; // increments batches of records
$.get('load-ajax.php?loadDataType=newImages&offset='+offset_newImages, function(data) {
$("#theContent").hide().html(data).fadeIn(600);
//**EDIT**
alert('Load was performed.'); // callback on success, works - is this where the Isotope "appended" code would go?
}, false);
});
</script>
code from load-ajax.php
...database connection info goes here
$offset = $_GET["offset"]; // from URL
$filter = ""; // for filtering the ISOTOPE divs, turned off til the injection problem is solved
for($i=0; $links = $query_links->fetch(); $i++){
$showList = "<div class=\"".$filter." box\">" . $links['ATtitle']."<br>" . "#" . $links['LID']."-
". $links['descr']."</div>";
echo $showList; // this is where ISOTOPE is not applied after each AJAX injection
}
I am thinking there is a call back solution but am unsure what to do next.
NOTE: I have experimented with the Isotope + infinite scroll by Paul Irish, but cannot use it here until I can convert infinite scroll's paging mechanism to JSON from mySQL. Next project.
EDIT: I have revised index.php to read as follows. The problem persists, but I think it's almost there. The ajax is working, but when Isotope kicks in it does not add its classes on the new DIVs.
<head>
<script type="text/javascript">
$(document).ready(function(){
//ISOTOPE SETTINGS
var $container = $('#container');
$container.isotope({
layoutMode : 'fitRows', //leave blank for default masonry
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
});
</script>
goes right before </body>:
<script>
var offset_newImages = 0; // initial offset value
var newImages = document.getElementById('update_newImages'); // a link on the page
newImages.addEventListener('click', function() {
offset_newImages += 50;
$.ajax({
type: 'GET',
url: "load-ajax.php?offset="+offset_newImages,
success:function(data){
// alert(data); // works
$("#container").hide().html(data).fadeIn(600) // fades in the new recordset
$container.isotope('insert', data);
}
});
});
</script>
So to wrap up, the new data loads into the DIVs - I can see it until I resize the browser window in any way, which is where Isotope kicks in and hides the new DIVs with its CSS.
Isotope has a number of methods for recalculating the layout after dynamically inserting new content.
I have this problem: I use colorbox to make those jQuery popups (colorbox). The problem is that I want to fade in the content smoothly via ajax without that loading div which you can see right before the content shows up.
When I disable the loading div via opacity it is gone, but I can't fade in my content smoothly. It just pop-ups suddenly.
<script type="text/javascript">
$(document).ready(function(){
$(".register_link").colorbox({
initialWidth:'886',
initialHeight:'410',
fixed:'true',
scrolling:'false',
transition:'fade',
onOpen: function(){
$("#colorbox").css("opacity", 0);
},
onComplete: function(){
var title = 'Register';
$('#cboxTitle').text(title);
$("#colorbox").css("opacity", 1);
}
});
});
</script>
You can use the jQuery animate() function, instead of the .css() function
onComplete: function(){
var title = 'Register';
$('#cboxTitle').text(title);
$("#colorbox").animate({"opacity": 1});
}
I'm using Twitter Bootstrap's Popover feature on a sidebar. The sidebar is fetched and reloads the content every 30 seconds. I'm suing XMLHttpRequest to reload the content of the sidebar by fetching a file called stats.php.
The following code is the "refresh" code which resides in the header of the page.
function onIndexLoad()
{
setInterval(onTimerCallback, 30000);
}
function onTimerCallback()
{
var request = new XMLHttpRequest();
request.onreadystatechange = function()
{
if (request.readyState == 4 && request.status == 200)
{
document.getElementById("stats").style.opacity = 0;
setTimeout(function() {
document.getElementById("stats").innerHTML = request.responseText;
document.getElementById("stats").style.opacity = 100;
}, 1000);
}
}
request.open("GET", "stats.php", true);
request.send();
}
The above code works flawlessly, however, after it reloads the #stats div, the popover no long does what it's supposed to - popup.
The popover code is in the stats.php in a foreach() loop because I have multiple popover scripts I need because there are multiple popovers on the sidebar.
Here's my popover code:
$(document).ready(function() {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
});
The $id and $title are dynamic as they are pulled from the foreach() loop.
How can I fix it so after the div reloads, the popover function will reinitialize?
$("a[rel=popover_controller_$cid]").on({
mouseenter: function () {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
}
});
I have also tried:
$("a[rel=popover_controller_$cid]").on("mouseover", function () {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
});
.live is depreciated. use .on delegation
try something like this:
$('#stats').on("mouseenter", "a[rel=popover_controller_$cid]",function () {
$('a[rel=popover_$id]').popover({
placement:'right',
title:'$title',
content: $('#popover_content_$id').html()
});
});
This delegates the mouseenter event from #stats to a[rel=popover_controller_$cid] and because the event is delegated it will still fire when #stats contents are replaced.
be careful - you will keep initializing popover on each mouseover. that might be bad.
while you are at it - you should use jquery's ajax instead of native xhr. its easier and more cross browser.
$.get('stats.php', function(d){
$('#stats').html(d);
};
--
setInterval(function(){
$.get('stats.php', function(data) {
$('#stats').html(data);
});
}, 30000);
I have a page that generates a google map on page load that I would like to call from another page via a link. Here is how I'm creating the google map inside a colorbox:
// show_map.php
jQuery(document).ready(function(){
$.colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});
Here is my attempt but something tells me I've headed down the wrong path. Should I use the modal window for something like this or is there a better way?
$(document).ready(function() {
$('.show_map').click(function() {
$.get("show_map.php", function(data) {
// alert(data);
})
});
If I've understood correctly, colorbox is already designed to do what you want to do. You don't need to use extra ajax calls (it's already built in). Just set the href option to your page instead of your inline html (then of course remove the inline:true option). The full code (in the page with the link to your map):
$(document).ready(function() {
$('.show_map').click(function() {
$.colorbox({
href: "show_map.php",
width:"643px",
height:"653px"
});
})
});
You can also load any external page if you add the iframe: true option to that code.
Either you use jQuery's .getScript() if the page only contains JavaScript or you can use .load() to insert the page content into the DOM.
$(document).ready(function() {
$('.show_map').click(function() {
$('.some-element').load("show_map.php");
})
});
EDIT: a better approach
have the colorbox inline instead. Saves a round trip to the server.
$(document).ready(function() {
$('.show_map').colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});