I`m using the following function to get a search result. The search that is the '$form" part works and returns the result but the part that uses the '$anchor' does not get the url and does not move to the next page. Can anybody help how it is right to take url. Or more precisely the broken part at least up to here is "url: $anchor.attr ("href")," After debuging I can see that url remains unidentified.
$(function () {
var MovieFormSubmit = function () {
//Grab the refernce of the form
var $form = $(this);
//Build the options object
var options =
{
url: $form.attr("action"),
type: $form.attr("method"),
data: $form.serialize()
};
$.ajax(options).done(function (data) {
var target = $($form.attr("data-movie-target"));
target.replaceWith(data);
});
//To prevent the browser from doing it's defualt action means navigating
//away and redrawing the complete page
return false;
};
var fetchPage = function () {
//Get the anchor tag that user clicked on
var $anchor = $(this);
//Extract values like Href attributes which is in the anchor tag http://localhost:1430/
var options = {
url: $anchor.attr("href"),
data: $("form").serialize(),
type: "get"
}
//make the ajax request with options object, when the data retrieved successfully,
//go and find out the target and then replace the target with the fetched one
$.ajax(options).done(function (data) {
var target = $anchor.parents("div.pagedList").attr("data-movie-target");
$(target).replaceWith(data);
});
return false;
};
//Look for Form with the name "data-movie-ajax", then wire up the submit event.
$("form[data-movie-ajax='true']").submit(MovieFormSubmit);
//Find the main-content and wire up the click event then filter these events based on ".pagedList a"
//then call the method fetchPage
$('#body').on("click", 'li', fetchPage);
});