Add Ajax modal popup to another button - ajax

https://bpt9hyq9jz7t6wkd-26803830855.shopifypreview.com
On homepage, if you click on the cart button it'll show a popup of the cart, with what product was added, how many products are in the cart, etc. if you instead go here: https://bpt9hyq9jz7t6wkd-26803830855.shopifypreview.com/collections/all due to the fact that it is created with an app to improve filters, the button (both normal and quick view) is not connected to the modal popup. I've tried to figure it out, but while I can sorta understand Html and CSS, Ajax is new to me. I figured that this is the Ajax that calls upon the modal box? Any help would be appreciated:
initAddToCart: function() {
if (e(".add-cart-btn").length > 0) {
e(".add-cart-btn").click(function(n) {
n.preventDefault();
if (e(this).attr("disabled") != "disabled") {
var r = e(this).parents(".item-row");
var i = e(r).attr("id");
i = i.match(/\d+/g);
if (!window.ajax_cart) {
e("#cart-form-" + i).submit()
} else {
var s = e("#cart-form-" + i + " select[name=id]").val();
if (!s) {
s = e("#cart-form-" + i + " input[name=id]").val()
}
var o = e("#cart-form-" + i + " select[name=quantity]").val();
if (!o) {
o = 1
}
console.log(o);
var a = e(r).find(".featured-image").attr("src");
var p = e(r).find(".grid-link__title").text();
var amt = e(r).find(".grid-link__meta .product_price .grid-link__org_price span.money").text();
t.doAjaxAddToCart(s, o, a, p, amt)
}
}
return false
})
}
},
showLoading: function() {
e(".loading-modal").show()
},
hideLoading: function() {
e(".loading-modal").hide()
},
doAjaxAddToCart: function(n, r, a, p, amt) {
e.ajax({
type: "post",
url: "/cart/add.js",
data: "quantity=" + r + "&id=" + n,
dataType: "json",
beforeSend: function() {
t.showLoading()
},
success: function(n) {
t.hideLoading();
t.showModal(".ajax-success-modal");
e(".ajax-success-modal").find(".ajax-product-image").attr("src", a);
e(".ajax-success-modal").find(".added-to-wishlist").hide();
e(".ajax-success-modal").find(".added-to-cart").show();
e(".ajax-success-modal").find(".ajax-product-title").text(p);
e(".ajax-success-modal").find(".ajax_price").text(amt);
e(".ajax-success-modal").find(".ajax_qty").text(r);
e.ajax({
type: 'GET',
dataType: 'json',
url: '/cart.js',
success: function(cart){
e(".ajax-success-modal").find(".ajax_qtyA").text(cart.item_count);
}
});

Related

Leaflet markers duplicating, removeLayer problem

I have Ajax function in my Laravel project. I'm taking data from db and send them on Leaflet map.
When I have setInterval, markers starts to duplicate. Unfortunately removeLayer can not help me, or I'm ussing it wrong.
This is my code
function callAjax() {
$.ajax({
url: '/device_new',
type: 'GET',
dataType: 'json',
success: function(data) {
markerLayer.removeLayer();
var markerLayer = L.featureGroup().addTo(map);
var coordinates = data;
for (var i = 0; i < coordinates.length; i++) {
if (coordinates[i].x && coordinates[i].y) {
marker = L.marker([coordinates[i].x, coordinates[i].y])
.bindPopup("Device: " + coordinates[i].device_type + '<br>' + "Time: " + coordinates[i].datetime)
marker.addTo(markerLayer);
}
}
map.fitBounds(markerLayer.getBounds());
},
});
setInterval(callAjax, 3000);
}
Any idea what could be a problem?
removeLayer(<Layer>) removes a single given layer from the featureGroup.
You need
markerLayer.clearLayers()
to remove all layers.
Change your code to:
function callAjax() {
$.ajax({
url: '/device_new',
type: 'GET',
dataType: 'json',
success: function(data) {
markerLayer.clearLayers();
var coordinates = data;
for (var i = 0; i < coordinates.length; i++) {
if (coordinates[i].x && coordinates[i].y) {
marker = L.marker([coordinates[i].x, coordinates[i].y])
.bindPopup("Device: " + coordinates[i].device_type + '<br>' + "Time: " + coordinates[i].datetime)
marker.addTo(markerLayer);
}
}
map.fitBounds(markerLayer.getBounds());
},
});
setInterval(callAjax, 3000);
}
function loadMap() {
// Where you want to render the map.
var element = document.getElementById('osm-map');
// Height has to be set. You can do this in CSS too.
element.style = 'height:405px;', 'width:500px;';
// Create Leaflet map on map element.
map = L.map(element);
// Add OSM tile leayer to the Leaflet map.
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
map.pm.addControls({
position: 'topleft',
});
//********************** ADD HERE **************
var markerLayer = L.featureGroup().addTo(map);
}

Kendo Treeview expand and checkbox not working after new value was passed in from a dropdown list

new to stackoverflow and implementing treeview. I'm having an issue where whenever I select a different value from my dropdown list that would populate my treeview the expand and checkbox is not working anymore. But the first time works.
So I have ajax call that would grab a parameter from a dropdown list to return JSON data to populate my tree. Here's my code. I've been pounding my head for this error and I've also tried some solution in the kendo ui documentation but it just doesn't work. Really need some help. Thank you!
Here's my code:
dataB1 = #Html.Raw(Json.Encode(ViewData["branchList"]));
reloadNewBranch = #Html.Raw(Json.Encode(ViewData["reloadNewBranch"]));
$('#comboNewBranch').kendoAutoComplete({
dataSource: dataB2,
placeholder: "Enter branch name...",
value: reloadNewBranch
});
//Create TreeView
function onChange(e) {
$("body").css("cursor", "progress");
$('#hiddenPackageArray').val('');
document.getElementById("textTestpassId").innerHTML = 'At least one(1) template must be selected.';
$('#treeview').empty();
$.ajax({
url: '#Url.Action("LoadOldBranchTemplates", "Home")',
data: { oldBranchName: $("#comboOldBranch").data("kendoAutoComplete").value() },
dataType: "json"
}).done(function (result, textStatus, jqXHR) {
var viewModel = new kendo.data.HierarchicalDataSource({
data: result,
schema: {
model: {
id: "Id",
hasChildren: true,
children: "Templates"
}
}
});
$("#treeview").kendoTreeView({
loadOnDemand: false,
checkboxes: {
checkChildren: true
},
check: onCheck,
dataSource: viewModel,
dataTextField: ["TestPassName", "DisplayName"]
})
// gathers IDs of checked nodes
function checkedNodeIds(nodes, checkedNodes) {
for (let i = 0; i < nodes.length; i++) {
if (nodes[i].checked) {
checkedNodes.push(nodes[i].Id);
let filtered = checkedNodes.filter(function (listOfId) {
return listOfId != null;
});
$('#hiddenPackageArray').val(filtered);
}
if (nodes[i].hasChildren) {
checkedNodeIds(nodes[i].children.view(), checkedNodes);
}
}
}
// show checked node IDs on datasource change
function onCheck(e) {
console.log("I'm in onSelect function");
var checkedNodes = Array();
var treeView = $("#treeview").data("kendoTreeView");
var message = String();
checkedNodeIds(treeView.dataSource.view(), checkedNodes);
console.log("Checkbox changed :: " + this.text(e.node));
if (checkedNodes.length > 0) {
message = checkedNodes.join(" ");
} else {
message = "No package(s) are selected.";
$('#hiddenPackageArray').val('');
}
$("#result").html(message);
}
$("body").css("cursor", "default");
})
.fail(function (xmlHttpRequest, textStatus, errorThrown) {
$('#mainDiv').append('<p>Status: ' + textStatus + '</p>');
$('#mainDiv').append('<p>Error: ' + errorThrown + '</p>');
$('#mainDiv').append('<p>' + xmlHttpRequest + '</p>');
});
};

Ext.Msg.show in ajax not append the page

I have a function for saving data. Before saving data there is dialog confirmation Yes or No. While I click option Yes the page behind this is back to the gridview (it's list). What i want is while click Yes the page behind is not change.
This is my function :
function SaveData(StatusSubmit) {
var d = ControlToData();
if (state == FormState.ADD) {
ShowLoading("sa-body", "Updating data .. Please Wait ...");
$.ajax({
url: root + "PF/Add?status=" + StatusSubmit,
type: 'POST',
dataType: "json",
contentType: 'application/json',
data: JSON.stringify(d),
success: function (result, status, xhr) {
storePF.add(
{
PFID: result.PF.PFID
, Title: result.PF.Title
});
ChangeFormState(FormState.VIEW);
tabs.setActiveTab('pageGrid');
if (result.ErrorMail.length > 0) {
alert("Error while sending email !\nError description : " + result.ErrorMail + "\nPlease contact your System Administrator !");
}
if (result.Error.length > 0) {
var str = "<br/><br/><span style='color:red;font-weight:bold'>Success add new PF !</span>";
MsgBox2("Budget Validation", result.Error + str);
}
else
MsgBox("Success add new PF !");
},
complete: function () {
HideLoading();
}
});
}
}
I add new dialog confirmation like this, but it does not work (didn't append the page after click Yes button):
function SaveData(StatusSubmit) {
var d = ControlToData();
if (state == FormState.ADD) {
ShowLoading("sa-body", "Updating data .. Please Wait ...");
$.ajax({
url: root + "PF/Add?status=" + StatusSubmit,
type: 'POST',
dataType: "json",
contentType: 'application/json',
data: JSON.stringify(d),
success: function (result, status, xhr) {
storePF.add(
{
PFID: result.PF.PFID
, Title: result.PF.Title
});
ChangeFormState(FormState.VIEW);
tabs.setActiveTab('pageGrid');
if (result.ErrorMail.length > 0) {
alert("Error while sending email !\nError description : " + result.ErrorMail + "\nPlease contact your System Administrator !");
}
if (result.Error.length > 0) {
$.post(root + "PF/GetSetupName", function (datas) {
if (datas == "FILTER_BRAND") {
Ext.Msg.show({
title: 'Over Budget',
msg: 'Budget is over. Modify or Not ?',
fn: function (btn) {
if (btn == "yes") {
SaveData("none");
}
else {
CancelData();
}
},
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION
});
}
});
}
else
MsgBox("Success add new PF !");
},
complete: function () {
HideLoading();
}
});
}
}
I try also separate this Ext.Msg.show in another function. but it doesn't work. Is there any idea please ?
I've found that when I try to do a mask and an ajax request at the same time, Ext gets overwhelmed and will not properly display the mask.
To fix this, I delay doing my ajax request until Ext & the browser have had enough time to properly display the mask. It generally does not need much time. In the example below, it waits 50 ms before posting.
Ext.get(document.body).mask("Updating data .. Please Wait ...", 'x-mask-loading');
Ext.defer(function() {
Ext.Ajax.request({ ... });
}, 50);
This gives the browser enough time to render the masking before it has to do anything else.

JQgrid custom button to display additional record details as in view record dialog

Here is my code for custom button, i would like to display additional details about the selected row from server side to jqgrid dialog box with similar look and feel of view record dialog. Can someone help with a sample code to create a dialog box similar to view record from custom button onclick?
jQuery("#list2").jqGrid('navButtonAdd','#pager2',{
caption:"", title: "History",buttonicon:"ui-icon-clock",
onClickButton : function () {
var grid = $("#list2");
var rowid = grid.jqGrid('getGridParam', 'selrow');
if (rowid) {
var alertIDs = {themodal:'alertmod',modalhead:'alerthd',modalcontent:'alertcnt'};
//if ($("#"+alertIDs.themodal).html() === null) {
//alert("1");
$.jgrid.createModal(alertIDs," <span tabindex='0'><span tabindex='-1' id='jqg_alrt' class='ui-jqgrid'></span></span>",
{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqModal:true,drag:true,resize:true,
caption:"History",
top:300,left:500,width:'auto',height: 'auto',closeOnEscape:true,
zIndex: null},"","",true);
$.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqm:true});
$("#jqg_alrt").focus();
$("#jqg_alrt").load('jsontableHeadingsApartmentResource.action?viewBy=' + viewBy+'&timeZone=' + timeZone);
} else {
var alertIDs = {themodal:'alertmod',modalhead:'alerthd',modalcontent:'alertcnt'};
$.jgrid.createModal(alertIDs,"<div>"+$.jgrid.nav.alerttext+"</div><span tabindex='0'><span tabindex='-1' id='jqg_alrt'></span></span>",
{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqModal:true,drag:true,resize:true,
caption:$.jgrid.nav.alertcap,
top:300,left:500,width:200,height: 'auto',closeOnEscape:true,
zIndex: null},"","",true);
$.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqm:true});
$("#jqg_alrt").focus();
}
}
});
Found the solution.
Here is the updated working code, i had to use jgrid info_dialog,
jQuery("#list2").jqGrid('navButtonAdd','#pager2',{
caption:"", title: "History",buttonicon:"ui-icon-clock",
onClickButton : function () {
var grid = $("#list2");
var rowid = grid.jqGrid('getGridParam', 'selrow');
var msg = "" ;
if (rowid) {
$.ajax({
url: 'jsontableHistoryApartmentResource.action?viewBy=' + viewBy+'&rowId=' + rowid,
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data, st) {
if (st == "success") {
msg = data.rr.history;//jqgrid history data
$.jgrid.info_dialog('History','<span style="white-space: nowrap">' + msg +'</span>', $.jgrid.edit.bClose,{buttonalign:'center', width:'auto',resize: true , align: 'left'});
}
},
error: function () {
// alert("Error with AJAX callback");
}
});
} else {
var alertIDs = {themodal:'alertmod',modalhead:'alerthd',modalcontent:'alertcnt'};
$.jgrid.createModal(alertIDs,"<div>"+$.jgrid.nav.alerttext+"</div><span tabindex='0'><span tabindex='-1' id='jqg_alrt'></span></span>",
{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqModal:true,drag:true,resize:true,
caption:$.jgrid.nav.alertcap,
top:300,left:500,width:200,height: 'auto',closeOnEscape:true,
zIndex: null},"","",true);
$.jgrid.viewModal("#"+alertIDs.themodal,{gbox:"#gbox_"+$.jgrid.jqID(this.p.id),jqm:true});
$("#jqg_alrt").focus();
}
}
});

Jquery and live act wired but act ok after force refresh in IE

somthing is wrong with my code and i can't get what it is...
i have a div id = "personaltab"
i have a form in side it to login the user with username and password. if success the jquery empty the div and puts in the form of the bidding.
if the user try to bid the other ajax that assign to the button is working but for some reason skips the empty and just adding the responded ajax to the div
i have checked that in IE and chrome and it is working fine in chrome
here are my codes
$("#login").click(function() {
var id = $("input#pid").val();
var user = $("input#puser").val();
var pass = $("input#ppass").val();
var dataString = 'id='+ id + '&user='+ user + '&pass=' + pass;
if (user == "") {
alert("error");
$("input#puser").focus();
return false;
}
if (pass == "") {
alert("error");
$("input#ppass").focus();
return false;
}
$.ajax({
type: "POST",
url: "loginpersonal.asp",
data: dataString,
success: function(msg)
{
if (msg=="False") {
alert("error");
$("#personaltab").show();
}
else {
$("#personaltab").fadeOut("normal",function(){
$("#personaltab").empty();
$("#personaltab").append(msg);
$("#personaltab").slideDown();
});
}
},
error: function (XMLHttpRequest, textStatus, errorThrown)
{
alert('error');
}
});
return false;
});
$("#sendbid").live("click", function(){
var startat = $("input[name=startat]").val();
var sprice = $("input[name=sprice]").val();
if (parseInt(sprice)<=parseInt(startat)) {
alert("error");
$("input[name=sprice]").focus();
return false;
}
else {
var payment = $("select[name=payment]").val();
if ($('input[name=credit]').is(':checked') ){
var credit = true;
}
var prodid = $("input[name=id]").val();
var dataString = 'id='+ prodid + '&price='+ sprice + '&payment=' + payment + '&credit=' + credit;
$.ajax({
type: "POST",
url: "loginpersonal.asp",
data: dataString,
success: function(msg)
{
$("#personaltab").empty();
$("#personaltab").append(msg);
$("#personaltab").show();
},
error: function (XMLHttpRequest, textStatus, errorThrown)
{
alert('error');
}
});
}
return false;
});
Solved:
i had inside a and for some reason the div that need to get the ajax by his id was duplicated
don't ask :-)

Resources