Filter/shorten the AJAX/get html by ID

Question

I am currently rewriting my error/faq messages using markdown(instead of previously used HTML content stored inside database). Now, I have temporarily setup a page errors.php where a text-area shows the content I have to edit with two small input boxes for error code and number.

Currently, when I click on the fetch button(see image 1), it fetches the HTML as is and puts it inside the textarea(see image 2).

I instead want something similar to $.load(<link> + " #content") with AJAX. Is this possible?

jQuery

$('#Fetch').on( 'click', function( e ) {
    e.preventDefault();
    var MyUrl = 'http://******/faq.php?code=' + $('input[name=code]').val() + "&num=" + $('input[name=number]').val();
    $.ajax( {
        url: MyUrl,
        type: "get",
        dataType: 'html',
        success: function( data ) {
            $('#MyArea').val(data);
        }
    });
});

---

The above works perfect with just one flaw. It dumps the entire page's HTML content inside the text-area. I want to only have (suppose) the data from #content on faq.php page. It is possible by using the infamous regex for HTML but I wanted a cleaner solution for the same.

---

_{Image 1}

---

_{Image 2}

Answer 1

Okay so i got an idea which is not the cleanest but is going to work i guess.

So this is your code :

$('#Fetch').on( 'click', function( e ) {
    e.preventDefault();
    var MyUrl = 'http://******/faq.php?code=' + $('input[name=code]').val() + "&num=" + $('input[name=number]').val();
    $.ajax( {
        url: MyUrl,
        type: "get",
        dataType: 'html',
        success: function( data ) {
            $('#MyArea').val(data);
        }
    });
});

We can change the success and to the following: Create a <div></div> container with display:none style, then populate this div and after that get the #content from it. So it would look something like this:

$('#Fetch').on( 'click', function( e ) {
    e.preventDefault();
    var MyUrl = 'http://******/faq.php?code=' + $('input[name=code]').val() + "&num=" + $('input[name=number]').val();
    $.ajax( {
        url: MyUrl,
        type: "get",
        dataType: 'html',
        success:  function (data) {
               $("body").append("<div id='contentContainer'></div>").css("display","none");
               $("#contentContainer").html(data);
               var content = $("#contentContainer #content").html();
               $("#MyArea").val(content);
                   }
    });

After that you can delete the div but you got the point.

EDIT:

Okay here's the better idea: You need to actually parse that info to jQuery variable and from there you can parse html like from DOM.

$('#Fetch').on( 'click', function( e ) {
    e.preventDefault();
    var MyUrl = 'http://******/faq.php?code=' + $('input[name=code]').val() + "&num=" + $('input[name=number]').val();
    $.ajax( {
        url: MyUrl,
        type: "get",
        dataType: 'html',
        success:  function (data) {
               var container = $(data);
               var content = $(container).find("#content").html();
               $("#MyArea").val(content);
                   }
    });

I think this is not gonna get any cleaner. Also it will work fast as we interact with DOM only once.

Answer 2

You can use $( any html ) to make a dom out of it, and then search for "content" container inside it.

for example we can change your function to :-

$('#Fetch').on( 'click', function( e ) {
e.preventDefault();
var MyUrl = 'http://******/faq.php?code=' + $('input[name=code]').val() + "&num=" + $('input[name=number]').val();
$.ajax( {
    url: MyUrl,
    type: "get",
    dataType: 'html',
    success:  function (data) {
     var content = $("#content",$(data)).html();
     $("#MyArea").val(content);
        }
});