jquery impromptu help required to displaty error in buttons pane

85 Views Asked by At

I have am using a jquery plugin called impromptu to display a dialog box. As part of the dialog there is a div holding the buttons. The div is defined as follows...

<div class="jqibuttons ">
<button class=" jqibutton jqidefaultbutton " value="1" name="jqi_state0_buttonNext">Next</button>
</div>

The style for the div is defined as follows...

div.jqi .jqibuttons {
    background-color: #f4f4f4;
    border-radius: 0 0 6px 6px;
    border-top: 1px solid #e4e4e4;
    margin: 0 -7px -7px;
    text-align: right;
}

It looks like the screen shot below. I would like to display an error message where I have said "Show error message here" (algined left).

enter image description here

I have had a go at putting an error message inside the div but i am having problems. Here is the function I am using to try and prepend the error...

function addErrorToDialog(error) {
    var message = '<span id="messageBox" style="display: block; width:100%"><span class="dialog-error red-text">' + error + '</span></span>';   
    $("#messageBox").empty();
    $('.jqibuttons').prepend(message);          
}

I've had a go at a few different things (as you can see by the unusual span with a display:block) but I canot get the message to show as I would like. Could someone please help me with how I might modify to get something closer to what I'm after?

The screen shot below shows what my code currently produces. Not what I'm after.

enter image description here

thanks

--EDIT---

Tried to use append rather than prepend but the error appears on the right because as you can see by the css in my original post text-align is set to right. How can i update the css to get the button to stay where it is but get the error message to align left in a span?

enter image description here

1

There are 1 best solutions below

1
On

The message is displaying above the button because you are using prepend in $('.jqibuttons').prepend(message);

Instead, use .append(message) with the class for the message "Show error message here". As in, say the code is

<div class='errorMsg'>Show Error Message Here</div>
$(".errorMsg").append(message);