jQuery/Javascript not working on dynamic web pages

Question

I have a script that works completely fine on static web page, but I cannot get it to work on dynamic web pages. I tried different techniques from the research I've done, but I still cannot get it to work, so I'm looking for help.

My script:

<script type="text/javascript" src="http://mywebsite.com/js/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $(document).on('submit', '#bv-form', function() {

            var data = $(this).serialize();

            $.ajax({

            type: 'POST',
            url: 'notify.php',
            data: data,
            success: function(data) {
                $("#bv-form").fadeOut(500).hide(function() {
                    $(".form-result").fadeIn(500).show(function() {
                        $(".form-result").html(data);
                    });
                });

            }
        });
        return false;
    });
});

Form:

<form method="post" id="bv-form">
    <div class="checkbox form-feedback margin-five m_top_20">
        <!-- checkbox  -->
        <label><input type="checkbox" name="video_title" id="publish" checked value="<?php echo ucwords($row['video_title']); ?>"> <em>"<?php echo ucwords($row['video_title']); ?>"</em> by <b><?php echo ucwords($row['artist_name']); ?></b> is not working</label>
        <!-- end checkbox  -->
    </div>

    <div class="form-group">
        <!-- button  -->
        <button class="btn btn-black no-margin-bottom btn-small no-margin-top" id="submit" type="submit">Send</button>
        <!-- end button  -->
        <input type="hidden" id="id"> 
        <input type="hidden" id="video_id" name="video_id" value="<?php echo ucwords($row['id']); ?>"> 
        <input type="hidden" id="artist_name" name="artist_name" value="<?php echo $row['video_title']; ?>"> 
    </div>
</form>

I'm using .on(), but is there something I'm missing?

NOTE: I know that the question has been asked before on this site. I've tried following certain steps in those solutions, but I still cannot get this script to work.

perhaps try checking $('#bv-from').length before running your script, might narrow down the problem — Michael Doye
– Michael Doye, Commented Nov 5, 2015 at 13:59

StudioTime · Accepted Answer · 2015-11-05 13:46:31Z

2

If the form is dynamic, meaning it is added to the page after page load, then it's likely the submit will not fire because it can't find the form.

Try this:

$(document).find("#bv-form").on('submit', function(){ ... });

This searches the DOM for the ID as opposed to assuming it's there

answered Nov 5, 2015 at 13:46

StudioTime

24.4k40 gold badges129 silver badges217 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Soletwosole Over a year ago

It still does not work, although I can tell it's trying to do something. The script now looks like this:

$(document).ready(function()                               {	                  $(document).find("#bv-form").on('submit', function()                                {                    ...rest of script

Andy Over a year ago

This is exactly the same as doing $('#bv-form').on('submit'.... OP is using event delegation by attaching the handler to document which is correct for dynamically added forms, whereas this will not work unless the form is present in the DOM when it's ready.

Soletwosole Over a year ago

I am getting no errors from the script itself, but I am getting an error message from the Google + button script:

https://plus.google.com/http://mywebsite.com/js/platform.js Failed to load resource: the server responded with a status of 404 (OK)

I'm not sure why I'm getting a 404 error. I'm on a live website. I'm not using localhost

Andy Over a year ago

@Soletwosole Look at the URL. That's incorrect, it's got your website as part of the path. The URL should be plus.google.com/js/platform.js

Soletwosole Over a year ago

@Andy. Thanks for catching that. The error message pertaining to Google+ is now gone, but the script is just reloading the page. Does SO have private messaging so that I can send you link to the site to show you what's happening?

|

Collectives™ on Stack Overflow

jQuery/Javascript not working on dynamic web pages

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related