CODEWITHSUNDEEP
javascriptjquerycssjquery-uijquery-ui-dialog
Millhorn
Millhorn

Reputation: 3166

Styling a JS Alert that pops up inside a jQuery UI Dialog

Please see my Sample Fiddle...

I wanted a JavaScript Alert to pop up as a jQuery UI Dialog because I want to style it. I got that working, thanks to some help from @asifrc.

Now, I'm trying to style that dialog.

This is what I have for the alert box in my HTML... 

<div id="pellalert"></div>
<div class="search-pell">
    <form id="pellform">
        <input type="text" value="Enter 13-14 PELL Score" class="search-input-bg-pell" id="pellscore"  />
    </form>        
</div>

The only thing I can do here, is to apply an in-line style the dialog as a whole, like this...

<div id="pellalert" style="font-size: 18px;"></div>

...but that styles the entire box, and not just what I would like to style. How do I make an <h1>, <h2>, etc., or adding multiple <br /> between the lines and so forth... is there one overall way to style this?

This is how I have my alert script set up, but I don't see how to add styles in here... 

/*
    Pell Alert
*/
//Set content to old alert content      
var content = 'Based on the 2013-2014 EFC you entered ('+efc+'), you may receive...'
            +' \n'
            +' \n'
            +' \n'
            +' \n-Tuition of 36 credits: $14,472' 
            +' \n'
            +' \n-Direct Loan maximum for a Freshman* student: $9,405**' 
            +' \n_________________________________________________________'             
            +' \n-Potential PELL Grant Award: $'+pell+'.'
            +' \n_________________________________________________________'
            +' \n-Your estimated total out of pocket payment: $'+estpay+'.'
            +' \n_________________________________________________________'
            +' \n-Potential Student Success Grant: $'+ssg+'.'
            +' \n_________________________________________________________'                 
            +' \n-Your estimated monthly out of pocket payment: $'+monthpay+'.'
                +' \n...'
    //Replace newlines with <br> (since it's now html)
    content = content.replace('\n', '<br>');
    //Set innerHTML of dialog, and then show the dialog     
    $('#pellalert').html(content).dialog('open');

}

Upvotes: 2

Views: 420

Answers (1)

Adrien Gorrell
Adrien Gorrell

Reputation: 1319

If you needed to keep the current coding, you'd have to create a real "DOM String" directly.

Something like :

var content = '<div class="title">Based on the 2013-2014 EFC you entered ('+efc+'), you may receive...</div>'
            +'<div class="credits">Tuition of 36 credits: $14,472</div>' ;

And so on...

If you can change the way it is implemented, you should since this code is not readable enough (which implies not maintainable enough).

One option would be to part your string into functions... each function takes an argument or a few arguments for instance, displays one line or a block, using the arguments... and you append results from different function calls to build your DOM. I can't really show an example of such a function since I don't know your "business logic" needs. But you can probably distinguish various zones in your message, and create functions for each of them. However, this is still really complicated and should not be done.

The best option would be to make an Ajax call to retrieve a php file, giving all the arguments needed to the server, instead of building everything in javascript. That would be cleaner. And you would manipulate the DOM much easier.

Upvotes: 2

Related Questions