Showing/hiding divs with Jquery in AJAX

Question

I am showing/hiding divs with jQuery. The following code works on a normal page, but does not work in my page that is loaded with AJAX in a new <div>:

 <script>
    $(document).ready(function (){
        $("#pic_video").change(function() {
            // foo is the id of the other select box
            if ($(this).val() == 1) {
                $("#pic_amount_id").show();
                $("#vid_duration_id").hide();
            }
            else if ($(this).val() == 2) {
                $("#pic_amount_id").hide();
                $("#vid_duration_id").show();
            }
            else if ($(this).val() == 3) {
                $("#pic_amount_id").show();
                $("#vid_duration_id").show();
            }
        });
    });
</script



 <p style="margin-top:15px;"><b>Select</b></p>
 <span class="small"></span>
 <select name="pic_video" id="pic_video" style="width:95%;margin-top:6px;">
  <option value="1">A</option>
  <option value="2">B</option>
  <option value="3">C</option>
 </select>


 <div id="pic_amount_id">TEST</div>
 <div id="vid_duration_id">TEST2</div>

The above is placed in my page that is loaded with Ajax. The ajax script (JavaScript) is a bit long to add here, but maybe the jQuery has to be loaded during/after the ajax?

The ajax is triggered with normal JavaScript during a onclick='' event and loaded into a new <div id='result'>

<a href onclick="loadAjax2(...)"...>Click here</a>.

And the loadAjax2() script triggers the usual ajax javascript:

function loadAjax(...) {
 if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
 else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)

 ...

 xmlhttp.open("GET",strURL+'&'+Math.random(),true);
 xmlhttp.send();
 }

What am I forgetting? Or is mixing jQuery/JavaScript not a good idea here?

Answer 1

To listen for events from elements loaded after DOM, try:

$(document).on("change", "#pic_video", function() {....

Answer 2

When adding events to dynamically added element you need to use $(document).on('event', 'selector', function() {}); Use jQuery for your AJAX request.

<a href id="get-page-data">Click here</a>
<div id="result"></div>
<script>
    $(document).ready(function () {
        $(document).on('change', '#pic_video', function () {
            // foo is the id of the other select box
            if ($(this).val() == 1) {
                $("#pic_amount_id").show();
                $("#vid_duration_id").hide();
            }
            else if ($(this).val() == 2) {
                $("#pic_amount_id").hide();
                $("#vid_duration_id").show();
            }
            else if ($(this).val() == 3) {
                $("#pic_amount_id").show();
                $("#vid_duration_id").show();
            }
        });
    });

    // AJAX using jQuery
    $('#get-page-data').on('click', function (e) {
        e.preventDefault(); // prevents the default behaviour of <a>
        var strURL = 'http://localhost/stack-delete/page.php?';
        // you can pass variables to PHP by using an object like {random: Math.random()}
        // this $.get() can now be like $.get(strURL, {random: Math.random()} , function (response) {
        // in your PHP, you can get the value like $random = $_GET['random']
        // this Math.random() seems odd as you are not using it in your page.php,
       // and the correct url should be strURL + '&random=' + Math.random()
        $.get(strURL + '&' + Math.random(), function (response) {
            $('#result').html(response);
        });
    });
 </script>

Answer 3

Javascript code loaded as DOM Element through an AJAX request will not get executed. However, there are two ways to accomplish this-

1. Dynamically binding elements

In this approach, the idea is to keep the Javascript code in the page where you are requesting the data from AJAX, and then bind the events for the elements existing in your AJAX data to the parent elements present on the current page. For example, in your case here - <div id="result"></div> already exists on the page initially. So you can move your Javascript code to this page, and bind the change event on #pic_video element fetched dynamically to the #result div using .on().

<script>
    $(document).ready(function (){
        $("#result").on('change', '#pic_video', function() {
            // foo is the id of the other select box
            if ($(this).val() == 1) {
                $("#pic_amount_id").show();
                $("#vid_duration_id").hide();
            }
            else if ($(this).val() == 2) {
                $("#pic_amount_id").hide();
                $("#vid_duration_id").show();
            }
            else if ($(this).val() == 3) {
                $("#pic_amount_id").show();
                $("#vid_duration_id").show();
            }
        });
    });
</script>

2. Evaluate the loaded DOM element on AJAX Complete

In this case, you can execute the <script> element loaded in the DOM through the AJAX request in the following manner-

var arr = $('#result').getElementsByTagName('script');
for (var n = 0; n < arr.length; n++)
    eval(arr[n].innerHTML)//run script inside div

Hope this helps!