$("span.removeFromCart").on("click",function(){
var id = $(this).attr("data-id");
$.ajax({
type: "GET",
url: "ajax.php?id="+id+"&action=remove"
})
.done(function()
{
location.reload();
});
});
I have a shopping cart that has - and + next to the quantity of the cart item. it works & updates fine ONLY after location.reload(), as above.
I would like to try and update the content without using the location.reload(), as it causes my toggle cart to hide after reloading the page. Would it be easy to refresh this div or the content on the page without reloading the entire page ?
many thanks
This is possible, but it seems like you don't understand what it would entail.
In order to update the "toggle", you need to re-render (or re-create it) this can be accomplished with JavaScript templating (like handlebars or underscore template). Or you can refresh just the part of the page that needs updating. You might want to try out something called pjax.
https://github.com/Jrizzi1/pjaxphp
Related
We are expecting the below things:
Would like to show the page with updated values.
Then show the session attribute.
What is happening for the below code, session message displayed first and then the page is getting reload.
$.ajax({
type: "POST",
url: "startSelectedServer",
data: { selectedJvmHostIp : selectedJvmHostIp, selectedJvmPort : selectedJvmPort },
success: function(result){
1. location.reload();
2. $("#save-message-div").show();
},
error : function(e) {
}
});
<div id="save-message-div" style="background-color: #DFF2BF; padding: 8px;display:none">
<h2 id="save-message" style="color: #4F8A10"></h2>
</div>
But we are expecting to show message after reloading the page.
In above 2 is executing first then 1 is executing.
ok it appears to me that you are trying to perform a server-side functionality and then refresh the page and have a message appear that the functionality has occurred.
This is fine as far as it goes but will not work the way you have it. To do it closest to the way you invision you will want to put in conditional logic on page load to determine if it is appropriate to show the div.
Even if your page did not show the div prior to reloading, the way it is written, when the page reloads it will not still be executing the same piece of script - it is a blank slate with only what you pass to it.
I am not sure why you want to reload the page at all actually; you can, and should [to make use of ajax], just use the information client-side that is returned from the server asynchronously.
I am working on building a website that will not reload to a new page every time a link is pressed. I want to make something kind of like all enterprise/popular websites. (When looking in the network dev tab: notice that youtube page doesn't completely reload when you click on a link, same with google, same with Facebook for the most part. They all usually just reload the page content and nothing else.)
I would like only the HTML between the body tags to be changed (nothing else: no js,css, no head tags, etc).
It would seem like it is pretty easy. Currently, I am just using ajax to go out and fetch the html of the page, and load that into the body. Done! Not so fast... Three things (my code is at the bottom)
The js includes are located at the bottom of the page, right before the closing body and html tags. When looking in the network tab, it shows that the same js is always gotten again and parsed again. How do I prevent that?
Some pages will not load styles that are set. (note that all css, js, etc. scripts are the same for every page)
I want to make sure that the page is completely reloaded if the user leaves the website.
I am not sure if I am looking for a fix to the way I am doing it, but probably just a completely better different way to do it.
Here is my code:
$('a').on('click', function () { //on click of any <a> tag
var where = $(this).attr('href'); //gets url of the <a> attribute
$.ajax({
type: "GET",
url: where, //where is the variable defined above
success: function(a) {
// load next page
history.pushState({urlPath: where},"",where); //changes the link of the webpage
$('body').html(a); //changes the body of the webpage
document.title = $('#title').text(); //changes the title using some weird irrelevant method
}
});
return false;
});
$(window).on('popstate', function() {//on click of the back or forward button
$.ajax({
type: "GET",
url: window.location.href, //the url is the url that the back or forward button is set to
success: function(data) {
//console.log();
$('body').html(data);//replaces data
document.title = $('#title').text();//changes title using weird irrelevant method
}
});
});
I have a template site which contents I want to change with data from an ajax call.
I have a button which opens an fancybox 3 iframe. The content of this page is what I want to change.
Button to open fancybox:
'<i class="fa fa-info-circle fa-2x inv-details" invoiceId="' + data[index].invoiceid + '"' +
'aria-hidden="true" data-fancybox data-type="iframe" data-type="iframe" href="javascript:;" data-src="/invoice_details/"</i>'
click event to trigger ajax call:
$('#my_in').on('click', 'i.inv_details', function () {
var inv_id = $(this).attr("invoiceId");
$.ajax({
url: '/wp-admin/admin-ajax.php',
type: 'post',
dataType: 'json',
data: {
action: 'invoice_details_ajax',
inv_id: inv_id
},
done: function (data) {
//HERE I WANT TO FIND THE CONTENTS OF THE
//OPEN IFRAME AND CHANGE THEM, LIKE SUCH:
// $('.fancybox-iframe').contents().find("#test #bankgiro").text('test');
// This above works in console, if I load jquery first, it does not work here.
}
});
});
The jquery selector for the iframe is correct, since i can edit the page via the chrome console. So I think the problem is that it tries to change the page before it has loaded? Is there any solution for this?
All answers I've read assums you have an empty fancybox iframe page and simply append data to it. But in my case I already have an template site which contents i want to change. Links I have read:
How to show ajax response in fancybox iframe
Loading dynamic AJAX content into Fancybox
It is not clear from your description - you want to open iframed page inside fancybox and you want to make ajax request that changes contents of that page - at the same time? Would it not be more sensible to just load final page?
I think you just have to pass invoice id using url, like /invoice_details/?invoiceId=YOUR_ID and avoid messing with two requests.
If you've already tried document.ready and window.onload etc which I assume you have seems as you're using jQuery:
The way I tend to get around things like this is I but a setInterval() that fires every 0.5 seconds or whatever, checks if the needed info is there and if it is, does what it needs to and then turns itself off. Could work for you for needing to wait for page load?
I have a functioning site that includes a search function that loads results into a <div> element via a jQuery $.ajax call like so:
$.ajax({
url: '{{ path('order_search') }}',
type: $(this).attr('method'),
data: $('#search_form').serialize(),
success: function (data) {
$('#js-search-results').html(data);
}
});
I'm working in a twig template within a symfony project, thus the url notation. This is working perfectly.
This is on a site that requires login. I have an event listener in symfony that checks for a period of inactivity at each each kernel request (taken from here), and if the inactive period exceeds a maxIdleTime then the user is redirected to the login page.
My problem is that if the user is inactive for a period and then enters a search, the js-search-results div is filled with the login page. What I would like to happen is to have the entire window redirect to the login page. Seems simple, but I haven't figured out how to do it.
One what I thought to handle would for my login page script to check whether it was being loaded into the full window (rather than just a div element), and if not then refresh the entire window. How to do this?
You can check the content inside the variable "data" to check if it contains elements from the login page and then use an if else statement.
if(data.includes("username") && data.includes("password")){
window.location.assign("https://your.login.page.html");
}else{
$('#js-search-results').html(data);
}
It sounds like you want to find out what type of data is there and if it is the login page do a redirect.
Find out if the data contains elements that are in the login page. if it is do a window.location.href = "/login" if not display the search results in the div. send data from backend like {page : "login"}
I am searching this for an hour but I dont get any perfect solution for it. I want pagination which doesnot load all data at once and loads only what are currently showing on the page. I dont want to refresh whole page while going from 1st page to any other page of pagination. And I am preffering to use JQuery. Just give me any good pagination link. I dont have tables I have divisions for pagination
This would be pretty simple to do by hand, no libraries needed. You'd put an event listener on the buttons
$('#button').on('click', function(){
changePage($(this).data('page-number');
}
var changePage = function(pageNumber)
{
$.ajax({
url: 'whatever.php',
data: {
page_number: pageNumber
},
success: function(r){
var html = //build html based on ajax respone
$('#page-wrapper').empty().append(html);
}
});
}
Realistically though if there are not going to be a huge amount of pages, you should get the data for ALL the pages and simply store it in Javascript variables and then access those variables when you click a page number.