Maintain reordered divs on refresh with ajax - javascript

I have a page that has divs for delivery points (each with a child arrival button) on a route, and I wrote a script that appends the delivery point div to an empty div at the bottom of the page when the arrival button is clicked. I would like to preserve the moved divs at the bottom of the page if the page is refreshed, so that my driver on this delivery route doesn't get confused about which delivery point on the route to go to next.
This is the simple click function script that I need to add an ajax call to. As an aside, both the buttons with the class .arrived and their parent divs are dynamically named in the ruby loop that's printing them both out on my view.
$(".arrived").click( function() {
$("#item_" + $(this).attr("id")).appendTo("#delivered_collector");
});
I found another script elsewhere in the application that I THINK I can borrow logic from for this task, but I'm having some trouble making sense of it and how to translate it into my click function. This example preserves the state of checkboxes even if the page refreshes.
$('input.delivery_label_check').on('click', function(e)
{
var $id=$(this).context.id.split("_")[2];
var $checked=$(this).prop('checked');
$.ajax({type: "POST",
url: "/ops/mark_label/"+$id+"?checked="+$checked,
success: function(data) {
}});
e.stopPropagation();
});
If anyone can help me make enough sense of the second script to implement parts of it in the first, I'll be very grateful!

// select an input with the delivery_label_check class
// whenever one of those appears on the page, add a click function to it
// it doesn't matter when one appears (that's what "on" does)
$('input.delivery_label_check').on('click', function(e)
{
// the click target has an id like "#name_thing_5" so split("_")
// makes ['name','thing','5'], then it gets the last item (aka '5')
var $id=$(this).context.id.split("_")[2];
// is the box checked or not?
var $checked=$(this).prop('checked');
// here is your ajax call
$.ajax({type: "POST",
url: "/ops/mark_label/"+$id+"?checked="+$checked,
success: function(data) {
}});
e.stopPropagation();
});
Does that help?

Related

Infinite Loading using a HTML Partial

Basically, I'm trying to create an infinite loading page on the product listing using a load more and firing a click event on the pagination.
My issue is that I can load the next page into the HTML but it is pulling in the whole HTML file and not just the products.
I'm trying to use a HTML partial to append the next page products into the current div.
This is my JS currently.
$(".page-next a").on("click", function (e) {
e.preventDefault();
var partial = "#Html.Partial('_ProductWithHover')";
var url = $(this).data('url');
$.ajax({url: url,method: 'GET',dataType: 'html', success: function (data) {
$('#js-infinite-scroll-page').append(partial);
}
});
});
Not sure if I should include my partial the way I have, so any feedback or advice on how to get this working would be great.
Thanks in advance!
Since this is an asynchronous behaviour you probably should change your backend api to respond with the necessary json, and construct the dom on the client side. That is way easier. Also, I don't exactly see, how do you provide information to your backend service about the current state of the infinite loading.
So infinite loading is a glorified pagination, it works like this:
You render some number of elements initially, and when you scroll enough, you trigger a request to load the next n elements, and you append them to your list. For this to work, you have to let the backend know where you stand, and after that it can return the next n elements.

Javascript: Wait for AJAX call to finish before initiating user triggered action

My page sends out an ajax calls as part of page load and the response takes ~5 seconds
I take result from the ajax call and store it in a hidden div.
Now after page is rendered , there is a table (JQuery Datatable) , and each table row has some action buttons (view, edit , delete), which the user can click.
Some of these actions need the data from the div.
So if the user clicks any of those actions before the Ajax is complete, the action fails, but it will work fine in case Ajax call is complete.
Can I add a wait/sleep logic to those calls/code, so that if the use click the actions, it just waits for AJAX response, rather than enabling the action buttons as callback or failure and the user doesn't have to click the button again.
I tried adding a function with setTimeout logic, but it breaks my model.
Ajax Call
$.ajax({
url: "ajax?AJAXKeyword=keyword",
success: function(result){
$(document).ready(function () {
$( "#div" ).html( result );
});
}
})
OnClick Action which needs the data
.on('click', 'a.show-row', function( e ) {
e.preventDefault();
doPoll1();
})
function doPoll1(){
if( $("#div").text().length == 0) {
setTimeout(doPoll1,1000);
} else {
=== myActions ===
}
}
I would like the execution of JS Code to sleep/wait in case the data is not present.
So you have 2 different ajax call one loading Datatable another loading Div.
In that case
1 Either load div first and than call Datatable
2 Disable all buttons by default and enable when Div is loaded. Keep a divLoaded variable globally as boolean.
In that case user will not be able to click button.
3 Keep track of all button clicked before Div was loaded and once div is loaded, do action for clicked row record.
If you have Data in Datatable call itself. This is way to get row data on button click.
Instead of saving data in a separate Div you can get clicked Row data from Datatable API itself and this will avoid ajax load call issue.
Sample Edit Row event:
$('.dt-edit').each(function () {
$(this).on('click', function(evt){
$this = $(this);
var dtRow = $this.parents('tr');
$('div.modal-body').innerHTML='';
$('div.modal-body').append('Row index: '+dtRow[0].rowIndex+'<br/>');
$('div.modal-body').append('Number of columns: '+dtRow[0].cells.length+'<br/>');
for(var i=0; i < dtRow[0].cells.length; i++){
$('div.modal-body').append('Cell (column, row) '+dtRow[0].cells[i]._DT_CellIndex.column+', '+dtRow[0].cells[i]._DT_CellIndex.row+' => innerHTML : '+dtRow[0].cells[i].innerHTML+'<br/>');
}
$('#myModal').modal('show');
});
});
dtRow will contain all fields needed for that particular row.
Refer this for demo
What you can do easily is show a loading icon and disable the buttons until the ajax loads.
function waiting(btnState){
$('btn.waitAjaxXY').attr("disabled", btnState);
if(btnState)
$('displayLoadGif').show()
else
$('displayLoadGif').hide()
}
$.Ajax({...... waiting(true)}).always(function(){waiting(false)})
This example is pretty raw but i hope it helps you.
It's better if you show the user why they can't push the button and how long since it's frustrating if just wont do the action i asked for.

AJAX nesting content on call

I have my website, http://www.yokaproject.com/, i decided to clean it up, im still in the process so if you see that i have mistakes fine, im not done, but i appreciate any comments. The nav at the top displays anchor tags to click and load jquery into the div#container. My problem is that calls are being doubled each time and nesting more and more content, just click art twice in a row. Ive been at this since last Monday so any help is appreciated. Here is my function
$('.header a').on('click', ajaxLoad);
function ajaxLoad(e) {
e.preventDefault();
var url = $(this).attr("href");
var that = $(this);
that.off('click'); // remove handler
$.ajax({
url: url,
dataType: "html",
type: "GET",
cache: false
}).done(function(data){
$("#container").html(data);
});
};
If you want a better look at the html and css you can just visit my site. i plan on putting it up on github in the future once it gets larger but for now its not necessary.
you can now view complete code on my website
that.on('click', ajaxLoad); // add handler back after ajax
This line of code re-attaches the click handler every time an ajax response comes. And every time you click that you create an ajax request.
Your mistake is:
in always function, you are again calling the ajaxLoad function in callback! So it is calling multiple times. Please remove that line from you code.

How to check if a page's content has been modified?

1 - I have a web page, in that page there are many external links
2 - When user click on any external link then a popup should be come with the message that page has been modified by dynamic action or it not.
3 - How can I check the page status using JavaScript / jQuery?
Thanks in advance.
you can go for "onhaschange" event of window/body on change simply set some flag which you can check on click of link to show whether page is changed or not.
Add some state variable to javascript, like:
wasModified = false;
Subscribe on click event of every external link or whatever you want to react on, like that:
$('.external-link-class-selector').click(function(){
wasModified = true;
//in case click mean it was modified and you should notify user
alert('Page was modified');
});
see
$.ajax({
url: "",
type: "post",
dataType: "" ,
data: ,
}).done(function() {
//sucess
});
make a function in Javascript including above function and Post values by this method to the same page and append success message on the page.

JS/AJAX: Refresh part of a page on the click of a button

I'm currently in the midst of creating a generator which echoes a random line from a .txt file. All is well and good however I need to have this certain part of the page which echoes the random line refresh when a button is clicked. I've tried multiple methods to no avail and I'm running out of ideas - I'm still quite new to JavaScript/AJAX and have no idea on how to go about it. Any help would be brilliant, thanks!
Use Jquery Ajax to get contents from the file and display the contents into a div
$.ajax({
type: "GET",
url: "yourfilename.txt"
}).done(function( msg ) {
$("#YOURDIVID").html(msg.d);
});
Bind click event of your button
$(function(){
$("#YOURBUTTONID").on("click",function(){
//do your work
});
});
Refreshing logic can be wrapped into a function and called on click of button OR you can use javascript settimeout method.

Categories