apply css to jquery code

Question

I'd like to apply the jquery themeroller highlight/error html to my jquery code. This is what the jquery highlight code is like (error code is similar):

<div class="ui-widget">
    <div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;"> 
    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
    <strong>Hey!</strong> Sample ui-state-highlight style.</p>
    </div>
</div>

I have my code structured like this:

function doAjax(){
        $.ajax({
            url: 'myfile.php',
            success: function(data) {
                if (data == 'Initializing...please wait')
                {
                    $('#quote p').html(data); //here I would add highlight css code
                    setTimeout(doAjax, 2000);
                }
                else
                {

                    $('#quote p').html(data); //here is error css code

                }

            }
        });

    }

This prints to a div:

<div id="quote"><p> </p></div>

Using .css() is cumbersome here, I think. Is there a way to add the html to the conditional? Note that .html(data) is necessary as you get different messages from the server, unless there are other suggestions.

DerekIsBusy · Accepted Answer · 2012-08-28 06:09:40Z

You could try creating a widget to create the elements.

$.widget( "jui.highlightBox", {

    options: {
        html:'',
        icon: 'ui-icon-info'
    },

    _create: function() {
        var wrapper = $('<div>',{'class':'ui-widget'}),
            container = $('<div>',{'class':'ui-state-highlight ui-corner-all',style:'margin-top: 20px; padding:.7em;'}),
            icon = $('<span>',{'class':'ui-icon ' + this.options.icon,style:'float: left; margin-right: .3em;'});
        wrapper.html(container.html(this.options.html))
        .appendTo(this.element);
        if(this.options.icon != '')
            icon.prependTo(container);
    }
});

And for the error text...

$.widget( "jui.errorBox", {

    options: {
        html:'',
        icon: 'ui-icon-alert'
    },

    _create: function() {

        var wrapper = $('<div>',{'class':'ui-widget'}),
            container = $('<div>',{'class':'ui-state-error ui-corner-all',style:'margin-top: 20px; padding:.7em;'}),
            icon = $('<span>',{'class':'ui-icon ' + this.options.icon,style:'float: left; margin-right: .3em;'});
        wrapper.html(container.html(this.options.html))
        .appendTo(this.element);
        if(this.options.icon != '')
            icon.prependTo(container);
    }
});

You could use like this for the highlight...

$('<p>').highlightBox({'html':data}).appendTo('#quote'); // highlight

...and this for the error text

$('<p>').errorBox({'html':data}).appendTo('#quote'); // error

So your function would now look like this...

function doAjax(){
        $.ajax({
            url: 'myfile.php',
            success: function(data) {
                if (data == 'Initializing...please wait')
                {
                    $('<p>').highlightBox({'html':data}).appendTo('#quote');
                    setTimeout(doAjax, 2000);
                }
                else
                {

                    $('<p>').errorBox({'html':data}).appendTo('#quote');

                }

            }
        });

    }

And since this would create the <p> tag you could remove it from the HTML...

<div id="quote"></div>

I'm surprised that the JQuery UI doesn't have a built-in widget for this already.

Amazing, thanks for all the effort. It is more complex than I thought.

Collectives™ on Stack Overflow

apply css to jquery code

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related