Triggering a button click or calling a function defined in AJAX return data

Question

I've got three files and a separate url for each. I want to display the third url (http://example.com/some-other-url), but I need the html from two previous urls displayed as well (they have styles and html that I need in the third url). The files need to remain seperate for the most part, but the JS can be combined

This is already set up:

The first url makes an AJAX request to the second url on load
- The AJAX request returns all html in the second url
The second url makes an AJAX request to the third url on button click
- The AJAX request returns all the html in the third url

I was going to solve this by requesting the first url (http://example.com/some-url?option=my-option), then I'd click (button.trigger("click")) the button in the returned html (this would cause the AJAX request for the third url http://example.com/some-other-url). But I have run into a problem that stops the button from registering the click.

I don't know why, but no matter how many ways I try to trigger the button (or even just the function https://stackoverflow.com/a/3403027/7304372), it never happens. I have no idea why, but it's incredibly frustrating.

Here's the example code for each url:

http://example.com/some-url?option=my-option

<div class="options"></div>
<div class="my-option"></div>

<script type="text/javascript">
    const irrelevantData = "Irrelevant file specific data"
    const url = "some-other-url"
    $.ajax({
        url: url,
        type: "get",
        data: {"irrelevant-data": irrelevantData},
        success: function(response) {
            // Do other stuff here
            $(".options").html(response);
            window.history.replaceState("", "", url);

            // Perform redirects
            let searchParams = new URLSearchParams(window.location.search)
            if (searchParams.has("option")) {
                if (searchParams.get("option") == "my-option") {
                    $(".link-my-option").click();
                }
            }
        }
    });
</script>

http://example.com/some-other-url

<div class="link-my-option">Click me!</div>

<script type="text/javascript">
    $(".options").on("click", ".link-my-option", function() {
        const irrelevantData = "Irrelevant file specific data"
        const url = "irrelevant-url"
        $.ajax({
            url: url,
            type: "get",
            data: {"irrelevant-data": irrelevantData},
            success: function(response) {
                // Do other stuff here
                $(".my-option").html(response);
                window.history.replaceState("", "", url);
            }
        });
    });
</script>

http://example.com/some-other-url

<div>Irrelevant html</div>

Please, explain to me why I can't click the button or run the function that's in the returned data of the second url and how I can do both of these things.

Did you try debugging step by step? I think it is the easiest way for you to solve it... — Mario Nikolaus, Jan 31 '18 at 22:56
I've tried everything I could think of, and everything I could find. This was my last hope — dǝɥɔS ʇoıןןƎ, Jan 31 '18 at 22:56
@Pavlo That's not really an option. I'm using templating (Django) specific to the page in my JS. Is there another way? — dǝɥɔS ʇoıןןƎ, Jan 31 '18 at 23:47
First `window.show_my_option function() { ..` is not valid syntax. Did you try `$('options').load(show_my_option)`? Why do you ajax calls like this? You can wrap them to callbacks and call them one by one or all together if they are independent.. — bigless, Feb 01 '18 at 00:04
1. Using correct syntax in my code, example had it wrong, I'll update it. 2. I did it like this because I don't know any better, I'll look into your suggestions, thank you — dǝɥɔS ʇoıןןƎ, Feb 01 '18 at 00:07
**Related:** https://stackoverflow.com/questions/48555378/use-variable-from-ajax-response/48555400?noredirect=1#comment84122651_48555400 — dǝɥɔS ʇoıןןƎ, Feb 01 '18 at 13:29

score 2 · Answer 1 · answered Feb 01 '18 at 00:05

<html>
<head>
</head>
<body>
    <div class="options"></div>
    <div class="link-my-option">Click me!</div>
    <div class="my-option"></div>
    <div>Irrelevant html</div>
    <script type="text/javascript">
        const someOtherUrl = "some-other-url";
        $.ajax({
            url: someOtherUrl,
            type: "get",
            data: {"somedata": "somedata"},
            success: function(response) {
               $(".options").html(response);
               showMyOption();
            }
        });

        function showMyOption(){
            const irrelevantUrl = "irrelevant-url"
            $.ajax({
                url: irrelevantUrl,
                type: "get",
                data: {"irrelevant-data": "irrelevant-data"},
                success: function(response) {
                    $(".my-option").html(response);  
                }
            });

        $(".link-my-option").on("click", showMyOption);
    </script>
</body>
</html>

If you get your Urls correct, then this code should work. When working with Ajax you generally want to avoid redirecting to another page, but instead render the result on the current page.

What this code does, is that it gets data from one URL, then after it is done rendering that data, it then gets the data from another URL. Changing the query parameter and then requesting it doesn't make sense, because that query is meant for the server and would always be available for the client, so there is no reason to change the URL.

If you comment out the first $.ajax, then only the second one will work on the button click.

Writing $(".options").on("click", ".link-my-option", show_my_option);

Would only work if the HTML looked like this.

<div class="options">
    <div class="link-my-option">Click me!</div>
</div>

Because usually the second parameter of on means descendants and now link-my-option is a descendants of option

Thanks @Pavlo! This is very helpful, but it doesn't quite solve my problem. I neglected to mention in my question, that my Ajax calls need specific variables only found in their file, sorry about that. So basically, I can have all the Ajax calls in one file, but I need some way to reference those variables, and my responses are always html, they can't be json. I've updated my answer to reflect this. — dǝɥɔS ʇoıןןƎ, Feb 01 '18 at 02:15
Using `$(document).on("click", ".link-my-option", function() {});` allows you to keep `.link-my-option` in its file — dǝɥɔS ʇoıןןƎ, Feb 01 '18 at 02:28

Triggering a button click or calling a function defined in AJAX return data

1 Answers1