I am trying to Implement functionality with code as shown in link below, But Instead of "Next" and "Previous", I am putting "Save" and "Next". When I click on "Save" - without the page getting refreshed, I should be able to navigate to next tab by saving data to backend (Rails).
1 Method of doing it is "Ajax", But I don't know How to start with it.
CODE LINK HERE
// Code in js-fiddle
try below code to click on save button, run ajax, save data and then show next tab:
$(".save_btn").click(function(){
$.ajax({
type: "post",
url: "/path",
data: "params1=data",
success: function(){
$("#tab2").show();
}
})
})
Related
pls help me out. i recent used ajax for my laravel pagination. Whenever i click he back button. it does not go back to the page i am coming from. it goes back to page 1. let me Illustrate this clearly.
(1) i have a list of items paginated with jquery ajax.
(2) when i visit the 5th page( for example) and click an item to view details of that item and decided to click the browser back button, i am expected to be taken back to page 5 where i was. instead, i am taken back to page 1.
(3) This is only happening in chrome related browsers. it works well in Firefox;
//BELOW IS MY AJAX CODE;
$(document).ready(function(){
$(document).on('click','.pagination a',function(e){
e.preventDefault();
var pageNumber = $(this).attr('href').split('page=')[1];
getMorePage(pageNumber)
});
function getMorePage(page) {
$.ajax({
url: "/all-products-ajax/"+"?page="+page,
type: "get",
datatype: "html"
}).done(function (data) {
$('#product-view').html(data);
}).fail(function () {
alert('Posts could not be loaded.');
});
}
});
Ajax queries are different than browsing a webpage. You may need to register new routes to browser's history.
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
You might want to check out here.
I have a controller in c# and inside the controller there is a save method. The save method saves/updates data that is submitted by submit button click and javascript. The problem is, if you click on the button multiple time, it should only process the very first click and rest of them should be identified as duplicate submit and should be discarded by controller. How to do this in c# mvc web application?
Disable the button after it's clicked. So it can just be clicked once.
Simple way
when button clicked disabled it then actived again after you got response result from ajax! u can also add loader that make ur web look so cool!
<button id="btnSend" onClick="send()">submit</button>
<script>
btnSend=document.getElementById("btnSend");
function send(){
btnSend.disabled=true;
//set disabled button here
$.ajax({ type: "GET",
url: "http://www.google.de",
async: false,
success : function(text)
{
btnSend.disabled=false;
//set active to button
// add your code here
},
fail : function(text)
{
btnSend.disabled=false;
//set active to button
// add your code here
}
});
}
</script>
I would also disable the button on the client side. But you could also check if the submitted data is different from the stored data. If no changes were made you could just return without further saving logic.
Should it be possible to just save the data once? Maybe a redirect to a different view after saving could be a possible solution in special cases.
I have a page with button on it. When click the button jquery start running. It calls a function using ajax. I change the js file on project and try to see whats happening in localhost but js file is still runs old version before i changed and i can see on page source old version. why i can not change the file?
$(this).click(function (e) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "test.aspx/function",
data: $(this).text(),
dataType: 'Json',
success: function (Result) {
Result = Result.d;
data = Result;
}
});
};
i want to change data but it still running as above
data: $(this).parent().text(),
If you try to reload the test.aspx/function that is ajax called, you can open the developer tools (right click on page, click on inspect).
After the developer tools have been open, click on reload and keep that click until a menu opens. There click on "Hard Reload", or even the Empty Cache and Hard Reload
Other way is to use cache of jQuery ajax call for your tests.
And one other way is to disable the page cache for test.aspx/function on code behind. For example add that on your response.
Response.Cache.SetExpires(DateTime.UtcNow.AddYears(-4));
Response.Cache.SetValidUntilExpires(false);
I have a problem in my current application. I load lots of page content via ajax and it works always as expected. However, every time user visits another page of my application and clicks back button, those ajax calls is sent every time. I found myself deleting all of the content before ajax call and load it after that. Is there a simple way for such a case ? I mean, I would like to know if there is a way that I can be informed as back button is clicked so I don't need to make another ajax call ?
This is html file:
<div id="contentToBeLoaded">
</div>
It's my current java script now:
$(document).ready(function(){
$("#contentToBeLoaded").empty(); // This is to the handle back button is clicked
$.ajax({
type: 'GET',
url: '/pageToLoadContent',
dataType: 'html',
success: function(html) {
$("#contentToBeLoaded").html(html);
},
error: function(error) {
console.log(error);
}
});
}
I am working on Spring MVC. I have a page having list of items in table. I need jquery to pick up the radio selected and then user can click on view or edit or delete. According to the button clicked, ajax block invokes proper action with the form object serialized and the id goes to the action for processing.
Everything went fine till here.
Then, when the action returns back to ajax success: block
$.ajax({
type : "post",
data : str,
url : newUrl ,
async : false,
success : function(data) { <----- here
I need to redirect to page action has in its view object. Instead, as we know, its ajax, so I need to show the result in some div on that page itself. But I need to go to the page directed by spring action. Please help me do this.
In short, I don't want to show the details on a pop up but another page.
Thanks.
get url of page directed by page action and use following statement to redirect page
window.location = pathReturned;
above statement will simply redirect users' browser window. So if you may require to persist state of the page.