Trigger pjax request upon JS form submit #201

New Issue

2019-03-26T10:21:10-05:00

omzy commented

2019-03-26 10:21:10 -05:00

(Migrated from github.com)

I have activated pjax on a form as follows:

var pjax = new Pjax({
    elements: "#search-form",
    selectors: [".search-results"]
});

Now within my form I have an hidden input field. I have a dropdown outside of the form which can set the value of this hidden input dynamically. So for example I have:

<select id="sort-by">
    <option value="name">Name</option>
    <option value="size">Size</option>
</select>

<form action="/search" method="post" id="search-form">
    <input type="hidden" id="sort-by-value" name="sort-by" value="">
    <button type="submit">Submit</button>
</form>

JS:

$('#sort-by').change(function() {
    var value = $(this).val();

    $('#sort-by-value').val(value);
    $('#search-form').submit();
});

As you can see, I am submitting the form when the dropdown value changes, but this results in a non-pjax request. How can I make it trigger the pjax request when I submit the form via JS?

I have activated pjax on a form as follows: var pjax = new Pjax({ elements: "#search-form", selectors: [".search-results"] }); Now within my form I have an hidden input field. I have a dropdown outside of the form which can set the value of this hidden input dynamically. So for example I have: ``` <select id="sort-by"> <option value="name">Name</option> <option value="size">Size</option> </select> <form action="/search" method="post" id="search-form"> <input type="hidden" id="sort-by-value" name="sort-by" value=""> <button type="submit">Submit</button> </form> ``` JS: ``` $('#sort-by').change(function() { var value = $(this).val(); $('#sort-by-value').val(value); $('#search-form').submit(); }); ``` As you can see, I am submitting the form when the dropdown value changes, but this results in a non-pjax request. How can I make it trigger the pjax request when I submit the form via JS?

👍 1

omzy commented

2019-03-26 11:19:40 -05:00

(Migrated from github.com)

OK I found a solution. Instead of triggering a form submit event, trigger a click on the submit button in the form:

$('#search-form button').click();

Whilst this now works, I still think it would be more elegant to trigger a form submit event. Is this something that can be looked in to?

OK I found a solution. Instead of triggering a form submit event, trigger a click on the submit button in the form: `$('#search-form button').click();` Whilst this now works, I still think it would be more elegant to trigger a form submit event. Is this something that can be looked in to?

mbuzun commented

2019-10-24 06:27:38 -05:00

(Migrated from github.com)

You can try something like this

function pjaxFormSubmit(form) {
        if (typeof(Event) !== 'function') {  // IE 11 fallback
            document.querySelector(`${form}`).submit();
        }
        document.querySelector(`${form}`).dispatchEvent(new Event('submit', { cancelable: true }));
    }

You can try something like this ``` function pjaxFormSubmit(form) { if (typeof(Event) !== 'function') { // IE 11 fallback document.querySelector(`${form}`).submit(); } document.querySelector(`${form}`).dispatchEvent(new Event('submit', { cancelable: true })); } ```

👍 2

iLoveElysia closed this issue

2025-04-04 12:54:52 -05:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: iLoveElysia/pjax#201