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();
});
}
});
});
Related
I am using rest to get some data and populate two divs with the content I am getting. This rest ajax call is on index.html.
These divs I am populating with content from the rest call are on page1.html which I am loading using the document.on ready inside the index.html at the end of the page.
The problem I am facing is sometimes when index.html loads, the divs are populated and sometimes they are not. I have to refresh the page for the divs to be populated. Any ideas or help will be appreciated. It may be code order or maybe I have to load the content on the success of the call?
<!--check if ID is passed-->
if ($.isNumeric(id)) {
formPath = "forms/EditForm.html";
getItemDetails(id);
$("#form").load(formPath);
}
<!--make rest call-->
function getItemDetails(itemID) {
console.log(itemID);
var url = siteURL;
$.ajax({
url: url,
type: "GET",
async: true,
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
var items = data.d.results;
$.each(items, function (index, item) {
step1AcknowledgementValue = item.Acknowledgement;
});
//**Populate Request Data**
//Request#
$("#requestNumberSpan").html(requestNumber);
//Step1
$('#step1Acknowledgement').html(step1AcknowledgementValue);
}
},
error: function (error) {
console.log(JSON.stringify(error));
}
});
}
I have a html form to make an order in a shop by clicking a button called Order.(button_id="order")
At the button click event i have performed a ajax request to a page(itemOrder_php2.php) which sends some data in the form to that mentioned page. It's working correctly. But the problem is ajax request is not functioning when two or more users order at the same time. Please help me to work with multiple ajax requests. Thank you! here is my code.
$(document).ready(function(){
$("#order").click(function(e){
e.preventDefault();
$.ajax({type: "POST",
url: "itemOrder_php2.php",
data: { selectedItem: $("#selectedItem").val(), sizeUnit: $("#sizeUnit").val(), quantity: $("#quantity").val(), value: x, lSize : $("#lSize").val(), lPrice : $("#lPrice").val() },
success:function(result){
$("#orderResult").html(result);
}});
});
});
Handle the click event with document on...
$(document).ready(function(){
$(document).on('click','#order',function(e){
e.preventDefault();
$.ajax({type: "POST",
url: "itemOrder_php2.php",
data: { selectedItem: $("#selectedItem").val(), sizeUnit: $("#sizeUnit").val(), quantity: $("#quantity").val(), value: x, lSize : $("#lSize").val(), lPrice : $("#lPrice").val() },
success:function(result){
$("#orderResult").html(result);
}});
});
});
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');
});
});
I am trying to make a stepy-form for my project. What I want to do is I want to submit all my data step by step in stepy-form so I used an AJAX request for this purpose, but When I am trying to save it it's not working. So I used noConflict Method to avoid jQuery conflicts but I still have the same problem. I am using adminEX template And Not getting any error message. So can anyone help me?
<script src="ajax/jquery.min.js"></script>
<script>
$.noConflict();
Jquery(document).ready(function(){
$('#stepy_form').click(function(){
$.ajax({
type: 'POST',
url: 'ajax/insert_all.php',
data: {
txtVehicleNo: txtVehicleNo,
SltType: SltType,
txtPANNumber: txtPANNumber,
txtManufacture: txtManufacture,
txtModel: txtModel,
txtEngineNumber: txtEngineNumber,
txtChassisNumber: txtChassisNumber,
txtOwnerName: txtOwnerName,
txtUnlaidenWt: txtUnlaidenWt,
txtGVW: txtGVW
// qid: 'form1'
},
//alert('hello');
//async: true,
//cache: false,
success: function(result) {
alert('SUCCESS');
//$('#target').html(result);
}
});
});
});
</script>
And this one is the URL ,insert_all.php
$qid = $_POST['qid'];
echo $qid;
You are not using 'no conflict' with jquery and accessing it using $. Change $ with jQuery like this
$.noConflict();
jQuery(document).ready(function(){
jQuery('#stepy_form').click(function(){
jQuery.ajax({
type: 'POST',
url: 'ajax/insert_all.php',
data: {
txtVehicleNo: txtVehicleNo,
SltType: SltType,
txtPANNumber: txtPANNumber,
txtManufacture: txtManufacture,
txtModel: txtModel,
txtEngineNumber: txtEngineNumber,
txtChassisNumber: txtChassisNumber,
txtOwnerName: txtOwnerName,
txtUnlaidenWt: txtUnlaidenWt,
txtGVW: txtGVW
},
success: function(result) {
alert('SUCCESS');
//$('#target').html(result);
}
});
});
});
I do believe am over-complicating this, but I have a jQuery modal that talks with a PHP file. The file has all the form and validation, but it's included in the modal. The event is triggered on right-click (so a user right clicks the folder to edit, selects "Edit", the action below triggers. It's supposed to send the folder id to the modal, so the modal displays the edit form with the correct folder. Right now, it doesn't send anything.)
So I have the jquery (script.js):
"action": function(obj) {
var data = {'pid': obj.attr("id")};
$.post("/folder/edit.php", data, function (response) {
$('#modalEditFolder').modal('show');
});
}
// also tried this:
$.post("/folder/edit.php", data, function (response) {
$('#modalEditFolder').data('pid', obj.attr("id")).modal('show');
});
// and this
$.ajax({
type: "POST",
url: "/view/folder/edit.php",
data: {pid: obj.attr("id")},
success: function(html) {
$('body').append(html);
$('#modalEditFolder').modal('show');
}
});
The modal (modal.php):
<div class="modal-body">
<?php include_once("/folder/edit.php"); ?>
</div>
The PHP file (edit.php):
<?php echo $_POST['pid']; ?>
How can I get both the modal and php form to get the PID variable?
try this :
$.ajax({
type: "POST",
url: "/view/folder/edit.php",
cache: false,
data: {'pid': obj.attr("id")}
}).done(function(html) {
$('body').append(html);
$('#modalEditFolder').modal('show');
});