Is it possible to simply run the knp paginator with ajax? Is it possible at all and what is the best way to do it ?
Greetings Michael
Not sure if this is best solution, but I did it this way:
$(function(){ $('#dish-select-component-canvas').on('click', "ul.pagination a" , function(e){
$.ajax({
type: "GET",
url: $(this).attr('href'),
})
.done(function( msg ) {
$('#dish-select-component-items').html(msg);
});
e.preventDefault();
});
});
#dish-select-component-canvas is container for page. When somebody click on this canvas on link in ul.pagination (pagination is class used by knpPaginator by default as wrapper for pagination), I take href attribute of that link, and send it with ajax GET request.
Result of that request goes to appropriate div (here to #dish-select-component-items). Of course you must remember to add e.preventDefault() to prevent browser from reloading the page.
Related
<div>
<span class="label">1</span>
up
</div>
Javascript
$('.click').click(function(){
//$(this).parent().find('.label').html(2);
$.ajax({
....
success: function(result){
$(this).parent().find('.label').html(2);
}
});
});
if i don't use ajax.post, value in change.. and when i use, it doesn't change.
I don't know what happen? and how can i fix it.
Give me some advices please.
$(this) is not referring to your link (its inside the $.ajax() function). Assign the label element to a javascript variable before you make the ajax call so it can be accessed inside the ajax function.
$('.click').click(function(){
var label = $(this).parent().find('.label');
// or $(this).prev('.label');
$.ajax({
....
success: function(result){
label.html(2);
}
});
I have a page that gets content from other file through ajax, it works perfect, but when navigated through address bar, it s not working as the event is triggered only on click. I ve searched, but i couldnt find a solution that fits my need. I ve given my code. Somebody help.
Profile
<div id="home-content" class="container-fluid"></div>
<script>
function profile(){
$.ajax({
type: "POST",
url: "functions.php",
data: {action:profile},
success: function(response)
{
$('#home-content').html(response);
}
});
}
</script>
All i want is when i enter address like home/#profile , profile page has to be loaded and it also should be navigatable, with history entry for 'profile' page
Please Use this function
<body onload="profile()">
and remove in Onclick funtion
I hope you can help,
I am relatively new to mootools
I have been using http://zendold.lojcomm.com.br/fvalidator/ to validate some webforms and I wanted to try and use it with an Ajax form. It is an oldish website using Mootools 1.2.5.
http://jsfiddle.net/jessicajet/gTqV8/ is the form I am trying to use it with. (The fValidator script is not added here)
This is what I am using to submit the form
formtostop.addEvent("submit", function(e) {
e.stop();
new Request({
url: this.get("action"),
method: "post",
data: this,
onRequest: function() {
document.id("result").set("html", "sending...");
},
onComplete: function() {
document.id("result").set({html: '<div class="response"><p>Thank you for completing our contact form, we will get back to you as soon as possible</p></div>', style: 'background:red'});
}
}).send();
});
When I hit submit the validation and the ajax form fires, which is to be expected.
Can I get the submit button to look for the validation script before the e.stop(); new Request({ or am I trying to do something not possible?
I will appreciate any advice that can be offered.
http://zendold.lojcomm.com.br/fvalidator/js/fValidator-full.js, take a look at the _onSubmit function. You should extend this class (http://mootools.net/docs/core/Class/Class) and modify the _onSubmit function to do a request if the isValid statement is true.
Below is the code snippet which is hitting the url on server and getting the html response.I can see
the response inside firefox debugger but it does not display in div tag.
$.ajax({
url: url,
dataType: 'html',
data: '',
type: 'POST',
success: function(data) {
//in firefox debugger i can see complete html response inside data
$('#displayContent').html(data); // but here, it does not
// append the html inside div displayContent. Instead it makes
// the current page blank
}
});
I don't get what mistake I'm making here Can I not directly assign the ajax html response to an selector(div tag in my case) with $('#displayContent').html(data)?
Instead of using html() method use append i.e.
$('#displayContent').append(data);
Or if you want to assign whole content direct to your element use load method
$(function(){
$('#displayContent').load(url);
});
If you've got a form tag on your page, and you're trying to submit it asynchronously with jQuery, your function will need to return false, to prevent the browser from handling the form.
Example:
$("form").submit(function () {
$.ajax(...);
return false;
});
I would like to refresh a partial view using ajax.
I kwow how to append the new data to the HTML, but I would like to know if there is a simpler way to do it.
I have partial view that does this
each x in data
li x.name
I pass the data using !=partial('test',{data:data})
I want to call a function to render the partial view again without reloading the page..
and without doing append( ... );
Any Idea??
Or other way to do it...
First, add a route for just the partial like
app.get('/mypartial', function (req, res) {
//compute data here
res.render('mypartial', {layout: false, data: data});
});
Then load the new HTML with a jQuery .get or .ajax call to /mypartial.
Then use jQuery to replace the HTML of the parent element by doing
$('#idofparentelementofyourpartial').html(responseHTML);
See also my answer to this similar question.
Use it You may get good solution
function ajaxRequest(url, succesCallBck, completeCallBck, errorCallBck)<br>
{
$.ajax({url: url
type: "POST",
dataType: "json",
complete: completeCallBck,
success: succesCallBck,
error: errorCallBck
});
}