JQuery retrieve page and display

Just completed the troubleshooting HTML + jQuery in Markdown, which is used in wordpress.

Script

<div><button id='related_posts_1853'>Display Learning Posts</button>

<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        $("#related_posts_1853").click(function(event) {
            el = $(document.getElementById( $(this).attr('id') ).parentElement);
            $.get("?p=1733", function(data, status) {
                el.html(/h2>References<\/h2>([\s\S]*?)<\/div>/.exec(data)[1]);
            });
        });
    });
}) (jQuery);
</script>
</div>

Note: Can not have empty line in script if it is embedded in Markdown lauguage, because there will be a <p> added.

Explanation

Following jQuery script is to do

• Define a button in div

• When button clicked, retrieve html page

• Then filter information using regular expression

• Then find out the div element using following script

  document.getElementById( $(this).attr('id') ).parentElement

Note: $(this).attr('id') is to get event element ID

<script>
$("button").click(function() {
    var t = $(this).attr('id');
    ...
});
</script>

• Then replace the div html using retrieved info.

References

How to get the ID of the clicked button using JavaScript / jQuery ?
document.getElementById vs jQuery $()
Node.parentElement
Category: Selectors
.find()
How get body element from the html which one have as a string
How to get the html of a div from a different page with AJAX?

JQuery $ is not a function

When adding JQuery script in WordPress, the error occurred as $ is not a function.

Fix

Add a function wrapping the $ function as below.

<script type="text/javascript">
    (function($) {
        // You pass-in jQuery and then alias it with the $-sign
        // So your internal code doesn't change
    }) (jQuery);
</script>

References

jquery - is not a function error