0

I am creating a div where I can populate different content based on a select value. It works that when I select an option, it loads. What I don't know how to do is load the first option when the pages first loads. I also am having an issue with jQuery scripts called in my header not applying to the ajax content when it loads. I'm hoping that by loading the first instance on page load, that will take care of the problem.

Here is my code:

<select class="post-link">
<option value="http://example.com">Option 1</option>
<option value="http://example.com">Option 2</option>
<option value="http://example.com">Option 3</option>
</select>

// This is where the content will be loaded
<div id="single-post-container"></div>

jQuery(document).ready(function($){ 
    $.ajaxSetup({cache:false});
    $(".post-link").change(function(){
        var post_link = $(this).val();

        $("#single-post-container").html("content loading");
        $("#single-post-container").load(post_link);
    return false;
    });
});

Any direction would be appreciated!

RiotAct
  • 743
  • 9
  • 33
  • what are you trying to load? Are you trying to load content based on the state of your select? – Patrick Michaelsen Sep 20 '17 at 21:45
  • that is a simplified version of what I am doing. I am loading a wordpress single.php file using the permalink when I select the post title from the drop down. – RiotAct Sep 20 '17 at 21:59

1 Answers1

1
jQuery(document).ready(function($){ 
    $.ajaxSetup({cache:false});
    $(".post-link").change(function(){
        var post_link = $(this).val();

        $("#single-post-container").html("content loading");
        $("#single-post-container").load(post_link);
    return false;
    });

    # selects first element
    $(".post-link")[0].selectedIndex = 0;

    # triggers change handler
    $(".post-link").trigger('change');
});
Özcan Esen
  • 340
  • 1
  • 13
  • This works! I still do have an issue with jQuery not affecting the ajax loaded content. That may have to be a different thread. – RiotAct Sep 20 '17 at 22:00
  • Check this: https://stackoverflow.com/questions/889967/jquery-load-call-doesnt-execute-javascript-in-loaded-html-file – Özcan Esen Sep 20 '17 at 22:03