When I load a Partial View with some unobtrusive AJAX I also need the URL to change accordingly.
It would be okay if I had to do the work in the jQuery's done() callback.
But it's not possible right, wihtout loading something new. So the only choise I have is to load a View?
$.ajax({
//some jquery ajax call properties
success: function(){
location.hash = 'your_unique_value';
}
})
or use history api window.history.pushState('page2', 'Title', '/page2.php');
Docs
Related
I'm using backbone and nodejs for a single page webapp.
I got a view, which has a model(a blog post) in it. when user click on 'like' button, the view will start ajax send the user'id to server to let the like number +1.
it looks like this:
this.model.save({
likedBy: userModel.get('_id')
}, {
url: '/posts/' + this.model.get('_id') + '/like',
success: function() {
// do something
},
patch: true
});
my problem is, when this code got run. browser start http request to retrieve all the images on the screen, and re-render them. so the screen got a "shake" after user clicked the like button.
this is not happening everywhere, but what caused this? how to stop the "shake"?
thanks for any advance.
When you call this.model.save() the model will update his data in the server and will call your view's render function. The render method will create a new DOM element and replace the old DOM element, that's what causing the flickering (it requests the images again).
I assume you have an API call for Like action (if not it's better to have one) so you can make a sperate AJAX call for like action on your model by adding a function like so:
addLike : function(data) {
Backbone.ajax({
url: '/api/like/'+ this.get('id'),
method: 'POST',
data: data,
success: options.success,
error: options.error
});
}
I want to pass an extra variable (the userid) with before rendering my backbone view. I am getting the the extra variable with a ajax request but because is asynchronous I think my page is being rendered before I get the variable. For simplicity lets say I have this in my backbone view :
PostsApp.Views.Post = Backbone.View.extend({
template: _.template($('#post-template').html()),
render: function(){
var newObject = this.model.toJSON();
$.ajax({
url:"/user",
success:function(result){
newObject.twittername = result.name; ;
}
});
this.$el.html(this.template(newObject));
}
});
I guess I can put this.$el.html(this.template(newObject)); in the callback but than 'this'refers to something else.. Can anyone think of a work around for this?
Or is it completely very bad to send such a request in the render function..
You are correct in your assumption. It will not render correctly.
The simple fix
Just like the more general case, you can perform the actual rendering inside the success callback.
render: function(){
var newObject = this.model.toJSON();
var that = this; // to fix that `this` refers to in the callback
$.ajax({
url:"/user",
success:function(result){
newObject.twittername = result.name; ;
that.$el.html(that.template(newObject));
}
});
}
The better fix
What I'd do is:
Have the twitter name as a part of the model
fetch it from the model (maybe even with a restful .fetch
listen to change events in the view, and call render on such events.
This is because the view should not be responsible for changing model data in Backbone. It's mixing "business logic" with presentation and it can get ugly pretty fast.
[I think this example 2 from Addy Osmani's "Backbone Fundamentals" should give you a general idea on how this sort of structure is laid out.
I am using jQuery Address plugin, and all my ajax navigation is based on it, and more precisely on internalChange or externalChange events like that
$(document).ready(function() {
initDeepLinking();
});
function linkClicked(e){
var request = $.ajax({
url: e.path,
data: e.queryString,
type: "GET",
dataType: "json",
});
request.done(handleResponse);
return false;
}
function handleResponse(response, textStatus, jqXHR){
$('#main').html(response.responseText);
};
function initDeepLinking(){
$.address.internalChange(function(event){
linkClicked(event);
});
$.address.externalChange(function(event){
linkClicked(event);
});
}
so when i click on a link leading to the current page, nothing happens.
I would like the page to reload when I do that. Any simple options ?
Thanks !
I am having troubles understanding what your question really is:
you don't know how to attach a handler to the link
you don't know what statement can be used to refresh the current page
In order to set a handler you can use some selector. For example, getting the element by class. More about jquery selectors here.
After you have the element, you can attach an event handler for the 'on click' event and do something like this:
window.location.reload(true);
I'm using jQuery UI. I'm loading some content in a dialog box over AJAX. After inserting the content from the server, I need to make modifications to the document. I am using the .live() function on my link; I thought this would enable me to use Js after loading the content over ajax, but it's like the content I just loaded isn't a part of the document. Any help very much appreciated.
Are you adding the bindings (lives) in the success function of the ajax call?
If so I had the same issue, I'll try to explain what I figured out:
$.post('callURL', function(data){
// Let's say data returned from server is an ID of a div I have to hide
// by clicking on some_link
$('#some_link').live('click',function(){
$('#'+data).hide();
});
});
This won't work because the code inside the 'live' function is executed on click and at that time the 'data' value is gone.
To make it work I made a global variable 'ID' which I set in the success function and then called in the 'live' function again like this:
var ID;
$.post('callURL', function(data){
// Let's say data returned from server is an ID of a div I have to hide
// by clicking on some_link
ID = data
$('#some_link').live('click',function(){
$('#'+ID).hide();
});
});
I have a page that i want to remain static with two divs that i want to load different html views during user navigation. I want the content to change without refreshing the entire page, only refreshing those two divs.
How can i load a specific view into those divs?
I already have the menu navigation that determines the html views to be loaded into those divs and controller functions to the menu choices that i get using javascript and then use it in the controller of the main page, i just dont know how to load the content.
You can load the views using a bit of Javascript with AJAX.
With jQuery:
$('a.nav-button').click(function(e) {
// prevent the default action when a nav button link is clicked
e.preventDefault();
// ajax query to retrieve the HTML view without refreshing the page.
$.ajax({
type: 'get',
url: '/path/to/your/controller/method',
dataType: 'html',
success: function (html) {
// success callback -- replace the div's innerHTML with
// the response from the server.
$('#yourDiv').html(html);
}
});
});
I think you need to use a jquery and Codeigniter
This will be your jQuery Code
$('nav').click(function(){//element to be click to load the page in the div
$(your_div_element).load('controller/method');
});
This will be your Codeigniter
function method(){
$data['result'] = ''//you can use this if you need to pass some data to the view
print $this->load->view('your_view',$data,true);//This will load your view page to the div element
}
Goodluck!
In order to put content without refreshing you should use ajax, lets say you have divs in a file under a directory (webparts), and you want to add it's content to a div called my_div; first create a method on the controller that renders just the view (div) you want to put something like this
function part($part = false)
{
$data = array(); // you can add data to your div, if you need to.
$this->load->view("webparts/$part", $data);
}
Then with javascript (jQuery in this case) you can call
$('#my_div').load('controller/mypart');
Note: I like to use "load" because it allows me to select certain sections of the view Im requesting, using something like this
$('#my_div').load('controller/mypart #certainsection');
Will load the element with the id="certainsection" from mypart view