0

I am loading content via ajax get, in to a div, I have 3 pages:

index dynamic content loaded via ajax javascript.js

Now when I load data in to the index via:

$.ajax({
   url: target,
   type: 'GET', 
}).done(function(data)
{
  $(".modal-content").html($(data).find('.inner_modal'));
  $(".modal-header").prepend('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>');
 });
 });

the javascript doesn't work on it, even though I am including the javascript file on the main index.

I have tried binding like so:

$(function()
{
    $('.inner_modal').on("submit", "#account-login-form", function()
    {
        $('.ajloading').show();
        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            dataType: 'json',
            data: $(this).serialize(),
            success: function(data)
            {
                if(!data.success)
                {
                    $('#error_message').html(data.error + alert_close).show();
                }else{
                    <?php if(Session::get('refer') == true &&  Session::get('refer') != 'user/logout'): ?>
                        window.location.href = '<?php echo Config::get('URL'); ?><?php echo System::escape(Session::get('refer')); ?>';
                    <?php else: ?>
                        window.location.href = '<?php echo Config::get('URL'); ?>dashboard';
                    <?php endif; ?>
                }
                $('.ajloading').hide();
            }, error: function(data)
            {
                $('.ajloading').hide();
            }
        });
        return false;
    });
});

I have tried it like so:

$(document).on("submit", "#account-login-form", function()

I have also tried it without 

$(function(){});

Now when I unclude the javscript file inside the dynamically loaded content it works, but I can't do that for every file, plus it would bloat my script, so how can I fix this so the dynamic content works with my main js file.... Here's how I do it:

<body>
    <div class="modal-content">
        <!-- dynamic content loaded !-->
    </div>
</body>

<script>
    $.ajax({
       url: target,
       type: 'GET', 
    }).done(function(data)
        {
          $(".modal-content").html($(data).find('.inner_modal'));
          $(".modal-header").prepend('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>');
        });
    });
</script>
<script src="myjs.js"></script>
</html>
  • 1
    What do you mean "not working" -- is the code rendering to the page and not "firing" - or is it not rendering to the page? Are you getting any errors in the console? Also, check out this previous answer: http://stackoverflow.com/questions/3619484/can-i-add-javascript-dynamically-to-an-existing-script-element – Tim Grant Apr 12 '16 at 20:33
  • What about `defering` your script? [async vs defer](http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html) – Anthony Apr 12 '16 at 20:34
  • @timster it's not firing, but it's in the footer of my main script, so it's there and no console errors. –  Apr 12 '16 at 20:37
  • What is that PHP code doing there? Is that actually going to be in the JavaScript sent to the browser? If so, that won't work, as the PHP will never be interpreted by the server. (Have you checked your HTML for un-interpreted PHP?) – Tim Grant Apr 12 '16 at 20:50

1 Answers1

0

I think your problem is that 'submit' is not an event that bubbles. You should assign a click handler to the form directly after it is loaded via ajax.

Mark Evaul
  • 653
  • 5
  • 11