jQuery ajax doesn't work with generated markup

Question

We have a search functionality in our application, when user types in something, the result will be generated based on the filter and displayed on page.

Here's the dynamic result after each keyup:

htmlResult = `
<li>
    <div>
        <img src='${user.avatar}' width='80' alt='${user.fullName}' />
    </div>
    <a tabindex='0'
        class ='btn2'
        data-html='true'
        data-toggle='popover'
        data-content="<div class='list-group'><a href='#' class='item' data-val1-value='0'>Val1</a></div>">add</a>
</li>
`;

Here are the event handlers:

$("[data-toggle=popover]").popover();
$(document).on('click', '.btn2', function(event) {
    event.preventDefault();
    $(this).popover({ html: true });
});

$(document).on('click', '.item', function (event) {
    event.preventDefault();
    const value1 = $(this).attr('data-val1-value');

    const params = {
        value1: value1
    };
    $.ajax({
        type: "POST",
        url: endPoint,
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify(params),
        success: (result) => {
            // refresh
        }
    }); 
});

There are two problems with this code:

popover will be displayed after 3 times clicking on .item
jQuery ajax won't succeed, it shows 400 Bad Request error on console.

PS: this code works fine with not-generated markup.

any idea?

In the above code url is set to the string 'url' which would seem to explain the 400 error. — Pango, May 01 '17 at 14:24
@Pango that's actually a URL, I didn't want to put the actual url here. — Sirwan Afifi, May 01 '17 at 14:24
Cool, just checking. I don't think you want to stringify your params, just pass params instead. — Pango, May 01 '17 at 14:28

score 0 · Answer 1 · answered May 01 '17 at 14:40

a) to make sure your url is correct, 1) update your serverside funtion not to accept any parameter just for testing 2) call ajax with data: NULL 3) debug and see if it reaches to server side function.

b) if not reached to server side, check if it is a POST or GET in server side function. c) if you are sure that server side function is correctly called, data without stringfy.

that might help.

score 0 · Accepted Answer · edited Sep 19 '19 at 04:29

0

For popover you must reinitiate every your dynamic content was append to HTML. For Ajax 400 this is because the URL not found the route path, please check again your backend requirement for this request.

edited Sep 19 '19 at 04:29

marc_s

732,580
175
1,330
1,459

answered May 01 '17 at 14:41

mazipan

183
2
10

jQuery ajax doesn't work with generated markup

2 Answers2