Question

I’m trying to check if the contain of my input text contains a substring whih is a variable :
here’s my code :

<script>
    $("#envoi_search").click(function () {

        var contenu = $("#champ").val() ;
        $("#envoi_search").click(function() {
            $("#result").html('') ;
            $('#envoi_search').attr("disabled", "disabled");
            $.ajax({
                type: "POST",
                url: "http://www.edumobile.org/blog/uploads/XML-parsing-data/Data.xml",
                data: "{}",
                cache: false,
                dataType: "xml",
                success: function(data) {
                    $(data).find("Book").each(function () {
                        var temp = $(this).find("name").text() ;
                        if (temp.toLowerCase().contenu > -1) {
                            $("#result").append("<br> Titre : " + temp);
                            $("#result").append("<br> Auteur : " + $(this).find("address").text());
                            $("#result").append("<br> Pays : " + $(this).find("country").text());
                            $('#envoi_search').attr("disabled", "");
                        }
                    });

                }
            });
        });
    });
</script>

And I don’t know why it doesn’t work. Do you have Any idea about my problem ?
Thanks 🙂

Answer 1

//buffer element since we use it multiple times
var $envoi_search = $("#envoi_search");

//bind a single click event handler to the element
$envoi_search.click(function () {

    //create a regular expression based on the value of a form input
    var myRegExp = new RegExp($("#champ").val(), "gi");

    $("#result").html('');

    $envoi_search.attr("disabled", "disabled");

    $.ajax({
        type     : "POST",
        url      : "http://www.edumobile.org/blog/uploads/XML-parsing-data/Data.xml",
        cache    : false,
        dataType : "xml",
        success  : function(data) {
            $(data).find("Book").each(function () {
                var temp = $(this).find("name").text();

                            //use `.search()` to test the regular expression against a string
                if (temp.toLowerCase().search(myRegExp) > -1) {

                                    //it's a waste to do multiple selections and appends in a row, instead just append everything at once
                    $("#result").append("<br> Titre : " + temp + "<br> Auteur : " + $(this).find("address").text() + "<br> Pays : " + $(this).find("country").text());
                    $envoi_search.attr("disabled", "");
                }
            });

        }
    });
});

I believe this is what you’re looking for. I removed the inner .click event binding, it was basically setting-up an event binding within the event handler for the same event, making it so that you have to click twice to make the inner event handler work.

Also, if you are not on the same domain as www.edumobile.org then you will need to write a proxy script in a server-side language so you can grab the data without cross-domain-policy issues.

You were missing the .search() function when you were checking for the existence of a string within a string.

var myRegExp = new RegExp($("#champ").val(), "gi");

This creates a regular expression based on the value of the #champ input. The "gi" flags are:

g -> global (not really necessary since we’re running a .search() but this can be very useful)

i -> ignore case

Some documentation for ya:

.search(): https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/search
RegExp(): https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp
`