jQuery AJAX submit Help

Question

Hi, I have a form that lets a user perform a search for a stock symbol. The data is transmitted to another URL via PHP cURL. This is fine, we do this several other places on the site. I need to be able to trim the returned data (it returns a whole page) and only display the data between the {STARTKINETICK} {ENDKINETICK} parts.

I need to have it displayed in a div#results. Please help! this should be so simple!

$(document).click(function() { 
$("#SymbolSearchForm").submit(function() {
    $.ajax({
     url: "PHP/Kinetick_Symbol_Search.php",
     type: "post",
     dataType: "HTML",
      success: function(html){
        html = $.trim(html);
        html = html.match(/\{STARTKINETICK\}(.*)\{ENDKINETICK\}/)[1];
        var end = "{ENDKINETICK}";
        $("#return").append(html.substring(html.indexOf("{STARTKINETICK}"), html.indexOf(end) + end.length));
    }

    });
});

});

Answer 1

You can use html.indexOf("{STARTKINETICK}") and html.indexOf("{ENDKINETICK}") to get the starting and ending points and then use html.substring. Don't forget to add the length of "{STARTKINETICK}" to the start point.

EDIT

var start = "{STARTKINETICK}";
html = html.substring(html.indexOf(start) + start.length, html.indexOf("{ENDKINETICK}"); 

Answer 2

Regex that you need:

"foo{STARTKINETICK}myText{ENDKINETICK}bar".match(/\{STARTKINETICK\}(.*)\{ENDKINETICK\}/)[1]; // returns myText

Whole code:

success: function(html){
    html = $.trim(html);
    html = html.match(/\{STARTKINETICK\}(.*)\{ENDKINETICK\}/)[1];
    $("#return").append(html);
}

Answer 3

A bit off topic, but do you know that jQuery has a nice method - load() that loads html asynchronously. Moreover, you can pass element selector that should be extracted from the result. If you can control the server side, you can wrap {STARTKINETICK} and {ENDKINETICK} in <div id="to_be_extracted"></div> and call

$('#return').load('PHP/Kinetick_Symbol_Search.php #to_be_extracted');

I use this technique here and there and find it very useful.