Dynamic content not shown after Ajax - javascript

This question is related to this one.
I'm using Tooltipster JQuery plugin to show tooltips on my website like:
HTML
<div class="tooltip" data-id="'.$comment['id'].'">Hover me!</div>
JS
<script type="text/javascript">
$(document).ready(function() {
$('.tooltip').tooltipster({
content: 'Loading...',
functionBefore: function(instance, helper){
var $origin = $(helper.origin);
$.ajax({
type: "POST",
url: baseUrl+"/requests/load_profilecard.php",
data: 'id='+ $origin.attr('data-id')+"&token_id="+token_id,
cache: false,
success: function(html) {
// call the 'content' method to update the content of our tooltip with the returned data
instance.content(html);
}
});
},
interactive:true,
contentAsHTML:true,
maxWidth:250
});
});
</script>
Anyway this doesn't work on Ajax dynamic content, basically I load via Ajax new content with a function:
function exploreTracks(start, filter) {
$('#load-more').html('<div class="load_more" style="height: 232px;"><div class="preloader-loadmore preloader-center"></div></div>');
if(filter == '') {
q = '';
} else {
q = '&filter='+filter;
}
$.ajax({
type: "POST",
url: baseUrl+"/requests/load_explore.php",
data: "start="+start+q+"&token_id="+token_id,
cache: false,
success: function(html) {
$('#load-more').remove();
// Append the new comment to the div id
$('#main-content').append(html);
// Reload the timeago plugin
jQuery("div.timeago").timeago();
// Update the Track Information
updateTrackInfo(nowPlaying);
}
});
}
New contents on mouse hover don't show any tooltip, from console I can't see any error or warning and on network load_profilecard.php is not called.
I have placed the script (same JS as above) directly on my content page, so why the tooltip is not shown on mouse hover?
My solution
As suggested in comments by Evan I used delegation option for this purpose.
$(function() {
$('body').on('mouseenter', '.tooltip:not(.tooltipstered)', function(){
$(this)
.tooltipster({
content: 'Loading...',
functionBefore: function(instance, helper){
var $origin = $(helper.origin);
$.ajax({
type: "POST",
url: baseUrl+"/requests/load_profilecard.php",
data: 'id='+ $origin.attr('data-id')+"&token_id="+token_id,
cache: false,
success: function(html) {
// call the 'content' method to update the content of our tooltip with the returned data
instance.content(html);
}
});
},
interactive:true,
contentAsHTML:true,
maxWidth:250 })
.tooltipster('open');
});
});

Related

How To add another post name/variable inside ajax script

<script type="text/javascript">
$(function() {
$("#epdate").bind("change", function() {
$.ajax({
type: "GET",
url: "change6-emp.php",
data: "epdate="+$("#epdate").val(),
success: function(html) {
$("#output").html(html);
}
});
});
});
</script>
i have this code and i want to add another variable
inside ajax script adding another
data: "empname="+$("#empname").val(),
dopesnt work i hope someone would help me. thank you
and how can i call a postname or make a postname into session an call it into another php page?
Actually, there are multiple ways, either separate them using a & character.
<script type="text/javascript">
$(function() {
$("#epdate").bind("change", function() {
$.ajax({
type: "GET",
url: "change6-emp.php",
data: "epdate=" + $("#epdate").val() + "&empname="+$("#empname").val(),
success: function(html) {
$("#output").html(html);
}
});
});
});
</script>
Or alternatively, you can use an object which holds the name-value pair.
<script type="text/javascript">
$(function() {
$("#epdate").bind("change", function() {
$.ajax({
type: "GET",
url: "change6-emp.php",
data: { epdate : $("#epdate").val(), empname : $("#empname").val() },
success: function(html) {
$("#output").html(html);
}
});
});
});
</script>
UPDATE 1: You can also pass it as an array in the following format,
data : [{
name : 'epdate',
value : $("#epdate").val()
}, {
name : 'empname',
value : $("#empname").val()
}],
UPDATE 2: There is build in functions in jQuery to do the same, use [serialize()][] or serializeArray() method for that. You can apply it on a form element or input elements and which generates based on the input elements name attribute.
data : $('#epdate,#empname').serialize(),
// or
data : $('#epdate,#empname').serializeArray()
,

Initialize jquery again after replacing list with ajax call

I have a Prestashop module to display a list of latest products from different product categories. On top of the list of products are menu links like: ALL, CATEGORY 1, CATEGORY 2, CATEGORY 3, etc. When page opens, it displays "All" the latest products. But when I click on Category 1 for instance, it uses Ajax to load only products belonging to the category I clicked.
I implemented this jquery plugin on the module - https://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview/.
The main jquery file grid.js is loaded before the end of the </body> and initialize by adding the code below before the end of the </body> too:
<script>
$(function() {
Grid.init();
});
</script>
This works well when the page is just opened. But when any of the category links are clicked. The products for that category are loaded but the grid jquery expanding grid does not work again.
In the js file for the module loaded within the <head> of the page, I noticed that the ajax call for the categories are made with the code below:
$(document).on('click','#list-category-new-product li a',function(e){
$('#blocknewproducts1_reload').addClass('active').prepend($('.newproduct_ajax_loader').html());
$('#blocknewproducts1').css('opacity', '0.7');
e.preventDefault();
$.ajax({
type: 'POST',
headers: { "cache-control": "no-cache" },
url: baseDir + 'modules/blocknewproducts1/newproduct_ajax.php',
async: true,
cache: false,
dataType : "json",
data: 'ajax_new_product=1&p=1&id_category='+$(this).attr('data-id'),
success: function(jsonData,textStatus,jqXHR)
{
$('#blocknewproducts1').html('');
$('#blocknewproducts1').html(jsonData.blocknewproduct);
$('#blocknewproducts1').css('opacity', '1');
}
});
});
I don't know much about jquery so I am wondering how I can get the expanding preview to work when the various categories are clicked and products loaded via ajax.
the
<script>
$(function() {
Grid.init();
});
</script>
is a one off function, you need to call it again in your success call like so
$(document).on('click','#list-category-new-product li a',function(e){
$('#blocknewproducts1_reload').addClass('active').prepend($('.newproduct_ajax_loader').html());
$('#blocknewproducts1').css('opacity', '0.7');
e.preventDefault();
$.ajax({
type: 'POST',
headers: { "cache-control": "no-cache" },
url: baseDir + 'modules/blocknewproducts1/newproduct_ajax.php',
async: true,
cache: false,
dataType : "json",
data: 'ajax_new_product=1&p=1&id_category='+$(this).attr('data-id'),
success: function(jsonData,textStatus,jqXHR)
{
$('#blocknewproducts1').html('');
$('#blocknewproducts1').html(jsonData.blocknewproduct);
$('#blocknewproducts1').css('opacity', '1');
$(function() {
Grid.init();
});
}
});
});

How can I ajax only html table rows instead of sending the entire form inputs?

I have tried to ajax using post to jsp script my html table rows for weeks now with no success.Can anyone please guide me on this?Below is what I have done so far.
window.addEventListener("DOMContentLoaded", function () {
var form = document.getElementById("updateDealPmtForm");
document.getElementById("btn").addEventListener("click", function () {
$('#notSoCoolGrid > tr').each(function(event) {
event.preventDefault();
var postData = {
paymentId:$('#paymentId').text(),
id:$('#deald').text(),
pType:$('#pType').text(),
pAmt:$('#pAmt').text(),
currency:$('#currency').text(),
pInvDate:$('#pInvDate').text(),
pRecDate:$('#pRecDate').text(),
comments:$('#comments').text()
};
console.log(postData);
$.ajax({
async: false,
type: "POST",
cache: false,
url: "/update_deal_pmt_script.jsp",
data: postData.$('input, select').serialize() ,
success: function(msg){
alert("submitted");
}
});
});
});
If I correctly understand your need, you want to transmit the content of your rows, each in the form showed in your current postData.
So this can be made at once for all rows (instead of ajaxing successively each of them).
It might be something like this:
window.addEventListener("DOMContentLoaded", function () {
var form = document.getElementById("updateDealPmtForm");
document.getElementById("btn").addEventListener("click", function () {
event.preventDefault();
var postData = [];
$('#notSoCoolGrid > tr').each(function(event) {
postData.push(
paymentId:$('#paymentId').text(),
id:$('#deald').text(),
pType:$('#pType').text(),
pAmt:$('#pAmt').text(),
currency:$('#currency').text(),
pInvDate:$('#pInvDate').text(),
pRecDate:$('#pRecDate').text(),
comments:$('#comments').text()
);
});
console.log(postData);
$.ajax({
async: false,
type: "POST",
cache: false,
url: "/update_deal_pmt_script.jsp",
data: postData,
success: function(msg){
alert("submitted");
}
});
});
});
Note that I choosed (the simplest way, IMO) to make a simple array of rows, where each one is an object like you already structured them.
Last point: I notice you specified async: false.
I don't know why you did that, and so I kept it unchanged.
But note that it's not recommended, and is being on the road to become deprecated.
I finally was able to solve this issue,for that I want to post my answer it might be helpful for someone out there.My previous code was submitting a form before even ajax call being triggered and I have to use Classes instead of IDs to identify my rows.I had to change the code completely to be able to submit the form
$('#btn').click(function(e) {
e.preventDefault();
$('#notSoCoolGrid tr').each(function(i, tr) {
var postData = {
paymentId : $('.paymentId', tr).val(),
id : $('.deald', tr).val(),
pType:$('.pType', tr).val(),
pAmt:$('.pAmt',tr).val(),
currency:$('.currency',tr).val(),
pInvDate:$('.pInvDate',tr).val(),
pRecDate:$('.pRecDate',tr).val(),
comments:$('.comments',tr).val()
}
$.ajax({
async: false,
type: "post",
url: "/update_deal_pmt_script.jsp",
data: postData
})
.done(function(response) {
console.log(response);
})
.fail(function(x, status, error) {
alert("Error: " + error);
});
});
});

Dialog does not do autoposition

I use dialog from jQuery UI. On my website, content of the dialog is changing dynamically (custom autocomplete of typed text). I already set css max-height: 90%; on dialog, so on a long content, dialog should be fully visible. But, when dynamic content as automplete is generated, dialog is resized, but still in same position, so 40% of content is not visible, it os out of screen. How can I fix that, when long content is generated, dialog will be autpositioned to the middle of screen?
EDIT 1:
Here is litle part of code from my website:
$.ajax({
cache: false,
type: 'GET',
'url': URL_SAVE.expandVariables({}, {
'pres': self
}),
success: function(data) {
var label = $('<label>Open file:<label>').appendTo(dialogElement);
dt = data;
input = $('<input type="text" />').appendTo(dialogElement).autocomplete({
source: data,
autoFocus: true,
minLength: 0
});
dialog.open();
}
});
Here is demo, what is so similar to original jsFiddle
EDIT 2:
This is initialization code for dialog:
var dialogElement = $('<div></div>'),
input, dt, self = {
serverEditor: server('editor')
}, dialog = new Dialog(dialogElement, 'Open', {
'saveable': 'Open',
'width': 400,
'saveOnlyIf': function() {
return dt.has(input.val());
},
'ifNotSaved': function() {
alert('Please choose correct file name!');
}
}).on('save', function() {
$.ajax({
'type': 'GET',
'url': URL_SAVE.expandVariables({}, {
'pres': self
}) + input.val(),
'success': function(data) {
Presentation.unserialize(data);
}
});
});

Tooltip script. Need to correct code

$(function() {
$('.challenge').tooltip({html: true, trigger: 'hover'});
$('.challenge').mouseover(function(){
var that = $(this);
var ajaxQueue = $({
url: "<?=base_url();?>/ajax/challenge_tip",
type: 'POST',
cache: true,
data: {
'idd': $(this).attr("rel"),
},
dataType: 'json',
success: function(challenge_j) {
that.tooltip('hide')
.attr('data-original-title', challenge_j)
.tooltip('fixTitle')
.tooltip('show');
}
});
$.ajaxQueue = function(ajaxOpts) {
var oldComplete = ajaxOpts.complete;
ajaxQueue.queue(function(next) {
ajaxOpts.complete = function() {
if (oldComplete) oldComplete.apply(this, arguments);
next();
};
$.ajax(ajaxOpts);
});
};
});
});
it's my first experience with js and i need some help. for tooltips i use bootstrap tooltips.
when cursor hover on link, script send post data to controller and receive callback data. in the first hover script receives the data, but tooltip doesn't pop up, only the second hover. how i can fix it?
and one more question. can script will send the request only the first mouse hover, and the following hover will use the information from the cache?
and sorry my english ;D
It is hard to test cross domain
Here is what I THINK you need
$(function() {
$('.challenge').tooltip({html: true, trigger: 'hover'});
$('.challenge').mouseover(function(){
var that = $(this);
$.ajax({
url: "<?=base_url();?>/ajax/challenge_tip",
type: 'POST',
cache: true,
data: {
'idd': $(this).attr("rel"),
},
dataType: 'json',
success: function(challenge_j) {
that.tooltip('hide')
.attr('data-original-title', challenge_j)
.tooltip('fixTitle')
.tooltip('show');
}
});
});
});
Create flag for ajax query.
var isTooltipTextEmpty = true;
$('.challenge').mouseover(function(){
if(isTooltipTextEmpty) {
...add ajax query here)
}
}
And you need to trigger tooltip show event, when ajax query is ready like this
.success(data) {
$('.challenge').show();
isTooltipTextEmpty = false; //prevents multiple ajax queries
}
See more here: Bootstrap Tooltip

Categories

Resources