1

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);
});
Kiril Dobrev
  • 839
  • 1
  • 8
  • 12
  • You need to identify the source element using event.. https://stackoverflow.com/a/11562933/7035903 – shreyas d Sep 21 '18 at 13:08
  • thanks, now options collect the necessary data but obviously the target is not indicated correctly and does not work properly. It brings me a second page but without the layout and does not want to take the 3rd. The targed line looks like this: var target = ('Body'); – Kiril Dobrev Sep 23 '18 at 21:30

0 Answers0