Change the color (by defaut, blue) of highlighted elements.
Default color for highlighting is blue. But you can change this default color using data-highlight-color. You can also define a color according to an event: this is common to see text highlighting green when an ajax call has been proceeded; and red if an error occured. Distinguish highlights according to events is possible using data-highlight-color-(event).
This form looks like this:
<div id="inputs">
Do you want the server to send a 500 error (so the ajax call will fail)?
<br/><br/>
<input type="radio" name="want_error" value="yes"/> Yes
<input type="radio" name="want_error" value="no" checked/> No
<br/><br/>
<input
type="button"
value="Go"
class="btn domajax click"
data-endpoint="highlight-color-succerror-handler.php"
data-input="#inputs"
data-highlight="#hello"
data-highlight-color-success="green"
data-highlight-color-failure="red"
/>
<br/><br/>
<div id="hello">This text will be highlighted according to the ajax call status</div>
</div>
This form looks like this:
<input
type="button"
value="Click me: highlight will not be blue!"
class="btn domajax click"
data-endpoint="highlight-color-default-handler.php"
data-highlight=""
data-highlight-color="#D0A9F5"
/>
This form looks like this:
<input
type="button"
value="Success and Failures"
class="btn domajax click"
data-endpoint="highlight-color-all-in-a-row-handler.php?type=codes"
data-highlight=""
data-highlight-color-before="#FFFF00"
data-highlight-color-success="#00FF00"
data-highlight-color-failure="#FF0000"
/>
<br/>
<input
type="button"
value="Empty and Not empty"
class="btn domajax click"
data-endpoint="highlight-color-all-in-a-row-handler.php?type=content"
data-highlight=""
data-highlight-color-before="#00FFFF"
data-highlight-color-empty="#FF00FF"
data-highlight-color-not-empty="#FFFFFF"
/>
This form looks like this:
<p>
If <em>data-highlight</em> is used alone without <em>data-highlight-color</em>, <em>data-highlight-color</em> is
set to blue.
</p>
<input
type="button"
value="This button will highlight in blue.."
class="btn domajax click"
data-endpoint="highlight-color-particular-cases-handler.php?test=blue"
data-output=""
data-highlight=""
/>
<br/><br/>
<p>
If <em>data-highlight-color</em> is used alone without <em>data-highlight</em>, <em>data-highlight</em> is
set to an empty string ( "" ) so the current domajax element will be highlighted.
</p>
<input
type="button"
value="There are no data-highlight, so..."
class="btn domajax click"
data-endpoint="highlight-color-particular-cases-handler.php?test=nohighlight"
data-output=""
data-highlight-color="red"
/>
<br/><br/>
<p>
When you are using <em>data-highlight</em> alone, it is an alias for <em>data-highlight-success</em>. But, if you
are using
<em>data-highlight</em> and some <em>data-highlight-color-(event)</em> options, then <em>data-highlight</em> will
apply for the <em>(event)s</em> specified, and no more for <em>success</em> event if <em>data-highlight-color-success</em>
is
not defined.
</p>
<input
type="button"
value="This button will highlight if response is empty..."
class="btn domajax click"
data-endpoint="highlight-color-particular-cases-handler.php?test=nonempty"
data-output=""
data-highlight=""
data-highlight-color-empty="#00FF00"
/>
<br/><br/>
<p>
If <em>data-highlight-color-complete</em> and <em>data-highlight-color-success</em> (or <em>failure</em>) are
defined,
if the ajax call succeed, the <em>data-highlight-color-complete</em> color will be used. In fact, both highlights
will be made but as
jQuery executes <em>complete</em> callback just after <em>success</em>, there will be no time to see the
<em>success</em>
color.
</p>
<input
type="button"
value="Complete is red, Success is green..."
class="btn domajax click"
data-endpoint="highlight-color-particular-cases-handler.php"
data-highlight=""
data-highlight-color-complete="red"
data-highlight-color-success="green"
/>
All the documentation at a glance