I have a modal that shows content pulled via an ajax call. In this content there is an image slider. The slider works and the images have loaded but they still do not show. Only when I hit f12 to use firebug to try and find out if the images are loaded do the images show on the page. This only happens if firebug is not detached from the browser. It's almost as though they need a kick to show on the page.
I'm using Foundation 4 reveal for the modal
I've searched for a similar problem but can't seem to find anything out there. #
How do I get the images to show after the content has been added to the #popout div.
My code is below
(function($) {
$('.rslides li').click(function(e) {
e.preventDefault();
var project_id = $('.rslides1_on .popout-link').data('project-id');
var url = '/popout-content.php?aid=' + project_id;
params = {
aid: project_id
};
$.ajax({
type: 'GET',
url: 'popout-content.php',
data: params,
dataType: 'html',
success: function(html) {
if (html != 'empty') {
$('#popout').foundation('reveal', 'open');
$('#popout').html(html);
}
}
});
});
})(jQuery);
Related
So I am building a user profile section in front-end Wordpress, and loading different content dynamically in jQuery tabs to break up the UI a bit. I early on switched from loading this all in on page load to using ajax to call in the php files for the user profile only on demand.
This was not working so I added a console.log to the success action to see what is going on. Funnily this function works to load in the php files, but ONLY IF I have console.log enabled. To be clear, when I check the network tab under XHR requests, both with console.log and without console.log I get a 200 status back from the server, it just doesn't render if I am not declaring that success action to the console.
Any ideas why?
$('.profileTabs ul li a').click(function(e) {
e.preventDefault();
var tab_id = $(this).attr('id');
$.ajax({
type: "GET",
url: cyberAjax.ajaxurl,
dataType: 'html',
data: ({
action: 'ajax_load_tabs', id: tab_id
}),
success: function(data){
$('#tab'+tab_id).html(data);
console.log( $('#tab-'+tab_id).html(data) );
},
error: function(data)
{
alert("Error!");
return false;
}
});
});
For reference, my approach was influenced by this article.
So I have the below in my functions.php - this all works with console.log so I don't think the cause lies here:
function ajax_load_tabs() {
$tab_id = $_GET['id'];
if ($tab_id == 'ui-id-7') {get_template_part( '/page-templates/dashboard/broker-dashboard', 'onboarding' );}
elseif ($tab_id == 'ui-id-8') {get_template_part( '/page-templates/dashboard/broker-dashboard', 'tasks' );}
elseif ($tab_id == 'ui-id-9') {get_template_part( '/page-templates/dashboard/broker-dashboard', 'incidents' );}
die();
}
add_action('wp_ajax_ajax_load_tabs', 'ajax_load_tabs');
add_action('wp_ajax_nopriv_ajax_load_tabs', 'ajax_load_tabs');
I would like to open a lightbox frame with a PDF file inside.
I am already able to do it by using data-lightbox="iframe" and the pdf filename as href tag.
The main problem is that i modify this PDF file on the fly (by FPDF/FPDFI) and i need to pass an array from jQuery to PHP PDF generation page.
When I push the "Generate" button on the page, i populate the array and next i send it by $.ajax POST with the array as data, but i don't know how to show it straight back to lightbox without saving it on the webserver
I don't know the method i should use to solve this problem
$('.generate').on('click', function(e) {
var data = [];
e.preventDefault();
$('input').each(function(el) {
if ($(this).hasClass('bt-switch')) {
tempval = $(this).bootstrapSwitch('state');
} else {
tempval = $(this).val();
}
data.push(tempval);
});
$.ajax({
type: "POST",
url: "function.php?act=gen",
data: {
arr: data
},
success: function(data) {}
});
});
I want my charts and page data has to be changed at certain time without refreshing the page.
I used an ajax request to reload the page or specific div, but when I do that morris.js charts are disappearing. Here is my ajax request. (actually I want full page refresh but if I do that it'll blink page and can't navigate through the page even if I change interval time to be longer).
function updateShouts() {
var selectedAds = 1;
var div = $('#refresh').html();
$.ajax({
url: "<?= base_url() ?>owner/dashBoard",
type: 'POST',
data: {
selectedAds: selectedAds
},
success: function(data) {
if (status) {
/* $("#refresh").load(location.href + " #refresh");*/
location.reload();
}
}
});
}
setInterval("updateShouts()", 4000);
updateShouts();
I've posted the same question before, but I didn't get any feedback!However, I still can't solve this problem.
So I have an index.php which displays users in my database. I'm using a jquery UI dialog form to add new user.The problem is that I want to display a message when a new user is added and show it in the table that displays the user. I succeeded to add records to the database, but I have to refresh the entire page to make the new items added visible in the table. Here is my table :
<div id="users">
<tr>
<td>//users's informations</td>
</tr>
</div>
the jquery code that adds the users :
//some vars
dataString = //dataString
$.ajax({
type: "POST",
url: "create.php",
data: dataString,
success: function () {
$(#users).load("index.php", function () {
display_message("user added");)
};
}
});
$(this).dialog("close");
return false;
So when I click to create a new user ;it just shows me a blank page of index.php loading. Please help, thank you.
you have forgotten to place " around the selector
success: function() {
$("#users").load("index.php", function() {
-------------------^
display_message("user added");
)};
}
EDIT:
but I have to refresh the entire page to make the new items added visible in the table.
if you want to refresh the whole page either in the success callback or after the dialog close put this line
location.reload(true);
Assuming you are retreiving user's info from your ajax's request:
success: function(userinfos) {
$("#users").append($('<tr><td>'+userinfos+'</td></tr>'))
display_message("user added");
}
In your create.php, format the div with html. Make sure this html is printed in the page and not stored in a variable.
This is the format which you want to show in index.php. Then on your success function write it in the below way.
$.ajax({
type: "POST",
url: "create.php",
data: dataString,
success: function (data) {
$("#users tr td").html(data);
}
});
this is an ajax method that inserts the data into a db and should supposedly display the new content.
<script type = "text/javascript">
$(document).ready(function() {
$('#submit').live('click', function(eve) {
eve.preventDefault() ;
var form_data = {
title: $('#title').val()
};
$.ajax({
url: "http://localhost/ci/index.php/chat/comment",
type: 'POST',
data: form_data,
success: function(msg) {
alert(msg);
}
});
});
});
</script>
However in my /chat/comment, i am loading the view again, i.e, user submits a comment, load the view again and the comment should be there. My response from server is the view's HTML. However the view comes with all the divs and there are many of them. I need to retrieve only part of the div, say, #commentspace from the ajax on success.
Look at the jQuery $.load() function?
Example
Inside "firstpage.html"
$('#content').load('secondpage.html #content');