Unable to call jquery automatically

Question

I use this javascript function to display popup passing url as arguments, but I want the form to display automatically without onclick, and its not working.

<!-- show_modal.php included in body  -->

  <script type="text/javascript">
    function showModal(url)
    {
        // SHOWING AJAX PRELOADER IMAGE
        jQuery('#modal_ajax .modal-body').html('<div style="text-align:center;margin-top:200px;"><img src="assets/images/preloader.gif" /></div>');

        // LOADING THE AJAX MODAL
        jQuery('#modal_ajax').modal('show', {backdrop: 'true'});

        // SHOW AJAX RESPONSE ON REQUEST SUCCESS
        $.ajax({
            url: url,
            success: function(response)
            {
                jQuery('#modal_ajax .modal-body').html(response);
            }
        });
    }
    </script>

<!-- (Ajax Modal)-->

    <div class="modal fade" id="modal_ajax">
        <div class="modal-dialog">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"><?php echo $system_name;?></h4>
                </div>

                <div class="modal-body" style="height:500px; overflow:auto;">



                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

<!-- show_modal.php ends -->

PHP $url variable

<?php $url = "'".base_url() . "index.php?modal/popup/student_add/1'";?>

Call automatically

<script type="text/javascript">

 $(document).ready(function(){
      showModal(<?=$url?>); 
 }); 

 </script>

When I call documentready : just displays dark background

it works with onclick

<a href="#" onclick="showModal(<?=$url?>);" > </a>

Console:

console1

console2

by right clicking -> inspect element or inspect -> console -> check the logs — keziah, May 28 '16 at 09:00
[How can I debug my JavaScript code?](http://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code) — A. Wolff, May 28 '16 at 09:01
need total html,jquery ready function is called when all doms loaded.If #modal_ajax is dynamic added,when showModal is called,there is no #modal_ajax in document. — gu mingfeng, May 28 '16 at 09:26
Where in the above question you saw that #modal_ajax is being added dynamically. @gumingfeng ? — , May 28 '16 at 10:00
Where are you getting `.select2` from? That is not a method of base jQuery; trying to call a nonexistent method is causing those `is not a function` errors. If it is a method a plugin adds make sure the plugin is loaded after jQuery but before the code that calls `.select2`. When you view-source on index.php what does line 9 say? What code generates the code on line 9? — Useless Code, May 28 '16 at 15:25
`
`, maybe I will just have to try the click trigger, since this is kind of complicated for me — Mysterio4, May 28 '16 at 15:49
@Mysterio4 choose among 4 fiddles that do what you want. Are there other errors in your javascript making your whole script not working? — , May 28 '16 at 17:13

score 1 · Accepted Answer · edited Apr 13 '17 at 12:33

Where in the page is the ready call? If it was above the place where you load jQuery, ready would not be usable as $ doesn't exist yet.

If this is the case you will probably have an error message in the console along the lines of ReferenceError: $ is not defined. Moving the script tag that loads jQuery above the script block where you are trying to call it should fix it.

When the browser is parsing a page and it encounters a <script> block without a src attribute it runs the code in the block right away. If the script tag has a src attribute it downloads the code and then runs it before moving on to the next script tag. So if you call $() before you tell the browser to load jQuery, the browser doesn't know what you mean by $ because jQuery hasn't set $ to be a reference to itself yet. (There are ways to loading JavaScript in a non-synchronous manner, but you have to opt into them.)

The reason that it is working when you click a link is that the click handler does not run until you click it. This gives jQuery a moment to load so that $ is defined when it tries to call it.

From the link you provided, I resolved to use the `onload` attribute and it works fine. Thanks — Mysterio4, May 29 '16 at 21:30

score 0 · Answer 2 · answered May 28 '16 at 10:20

Try this:

1) make sure $url is generated before its passing in showModal function, so declare $url in beginning of page

2) Remove extra single quote concatenation from $url

<?php $url = "aa"."index.php?modal/popup/student_add/1";?> //Remove extra single quote concatenation from $url


<script>
$( document ).ready(function() {  
   showModal('<?php echo $url; ?>'); // add single quotes here
});

function showModal(url)
{
     // SHOWING AJAX PRELOADER IMAGE
        jQuery('#modal_ajax .modal-body').html('<div style="text-align:center;margin-top:200px;"><img src="assets/images/preloader.gif" /></div>');

        // LOADING THE AJAX MODAL
        jQuery('#modal_ajax').modal('show', {backdrop: 'true'});

        // SHOW AJAX RESPONSE ON REQUEST SUCCESS
        $.ajax({
            url: url,
            success: function(response)
            {
                jQuery('#modal_ajax .modal-body').html(response);
            }
        });
}

When i tried the single quotes it darkened the screen, with a console error as displayed above — Mysterio4, May 28 '16 at 15:01

Unable to call jquery automatically

2 Answers2