Pager only works with input type search or text. I need it to work with button\submit

Question

User-1857885180 posted

EDITED! 

This form works with the pager async:

<form method="get" action="@Url.Action("Index")" data-cfdb-ajax="true" data-cfdb-target="#stasjonListe">
      <input type="search" placeholder="Search" name="searchTerm" />
</form>

The submit button works when i click on it. It makes the ajax-call, but it does not work with pager async. When I click on i.e page 2 it reloads the entire page. 

<form method="get" action="@Url.Action("Index", "Stasjoner", new {regionTerm = 1 })"
data-cfdb-ajax="true" data-cfdb-target="#stasjonListe">
      <input type="submit" name="regionTerm" value="Test" />
</form>

for submit function: 

  var ajaxFormSubmit = function () {
        // grab a reference to the form to be submitted
        var $form = $(this);
        // options object
        var options = {
            // url we are going to
            url: $form.attr("action"),
            //type of request to make
            type: $form.attr("method"),
            // data to send to server
            data: $form.serialize()
            
        };

        // make async call
        $.ajax(options).done(function (data) {
            // target to update
            var $target = $($form.attr("data-cfdb-target"));
            // replace target with anything from server
            var $newHtml = $(data);
            $target.replaceWith($newHtml);
            $newHtml.effect("highlight");
        });
 
            return false;
};

get page function:

var getPage = function () {
        var $a = $(this);

        var options = {
            url: $a.attr("href"),
            data: $("form").serialize(), //send the values from the form in the request.
            type: "get"
        };

        $.ajax(options).done(function (data) {
            var target = $a.parents("div.pagedList").attr("data-cfdb-target");
            $(target).replaceWith(data);
        })
        .always(function () {
            showModal();
        });
        return false;

    };

Answer 1

User1644755831 posted

Hello slarur,

<input type="button" name="regionTerm" value="Test" />

So when i click on page 2, the querystring is ?page=2&searchTerm=

If i change regionTerm input to type="search\text" the querystring is ?page2&searchTerm=&regionTerm=

1. First your input type is button so do you want to pass region Term or not?

2. I assume you are calling ajax method when the user clicks the test button?

3. if you want to pass regionTerm (are you inputting any values in this? this is a button so why you need to change it to text? also why you need to pass it to querystring? )

4. if the method on server side expects a regionTerm variable then try putting another input type text besides test button.

Hope this helps.

With Regards,

Krunal Parekh

Answer 2

User-1857885180 posted

hello. I edited my post, because it was horribly written. I think now its better to understand what i mean. Thank you! :)

Answer 3

User1644755831 posted

Hello slarur,

<form method="get" action="@Url.Action("Index")" data-cfdb-ajax="true" data-cfdb-target="#stasjonListe"> <input type="search" placeholder="Search" name="searchTerm" /> </form>

<form method="get" action="@Url.Action("Index", "Stasjoner", new {regionTerm = 1 })" data-cfdb-ajax="true" data-cfdb-target="#stasjonListe"> <input type="submit" name="regionTerm" value="Test" /> </form>

Can you show me the index method? try adding on submit event handler on the form tag.

<form method="get" action="@Url.Action("Index", "Stasjoner", new {regionTerm = 1 })" data-cfdb-ajax="true" data-cfdb-target="#stasjonListe" onsubmit="return false;">       
<input type="submit" name="regionTerm" value="Test" />  
</form>

With Regards,

Krunal