Handling Html-Attributes with Ajax

Since Html5 and the intensive use of data attributes, I would like to focus on some important points and describe the best-way.

Set an attribute Ajax

While using this attribSet method the value(if exists) will be overwritten

Factory::getResponseInstance()->attribSet('htmlElementId','my-attribute', 'attribute-value string');

jybrid-javascript setAttribute (regular)

// setting an attribute 
jybrid.setAttribute('element-id|Element','my-attribute-name','string')

Will be set an Attribute with key("my-attribute-name") an value ="string"

<input id="element-id" my-attribute-name="string"/>

Set an property

Usually properties are used in form elements such as disabled""multiple""checked" and so on. In html these properties can be without value in the tag. <input name="test" disabled/> in Xhtml, "disabled" must be provided with a visible value <input name="test" disabled="disabled"/>

Factory::getResponseInstance()->attribSet('htmlElementId','my-attribute', true);

jybrid-javascript setAttribute (as property)

// setting an property 
jybrid.setAttribute('element-id|Element','my-attribute-name',true)

Will set an Property without an visible Value "my-attribute-name" indicates with his presence that the attribute/property was set!

<input id="element-id" my-attribute-name/>

Ajax Prepend Attribute

Prepend a string value to an existing or non-existent attribute, for example, as in styles or data attributes. If need add an trailing space after the "value" "myPrependString" if need.

Factory::getResponseInstance()->attribPrepend('htmlElementId','my-attribute', 'attribute-value prepend string');

jybrid-javascript attribPrepend

// adding an attribute value
jybrid.attribPrepend('element-id|Element','my-attribute-name','attribute-value prepend string')

Will be add an Attribute with key("my-attribute-name") an value ="existing-string" "myPrependString "

<input id="element-id" my-attribute-name="myPrependString existing-string"/>

Ajax Append Attribute

Add a string value to an existing or non-existent attribute, for example, as in styles or data attributes. Make sure you response an leading space " myAppendString" if need.

Factory::getResponseInstance()->attribAppend('htmlElementId','my-attribute', 'attribute-value append string');

jybrid-javascript attribAppend

// adding an attribute value
jybrid.attribAppend('element-id|Element','my-attribute-name','attribute-value append string')

Will be append Attribute-Value for Attribute-Name ("my-attribute-name") with value ="existing-string" " myAddString"

<input id="element-id" my-attribute-name="existing-string"/>
<!-- will be to -->
<input id="element-id" my-attribute-name="existing-string myAddString"/>

Ajax Clear Attribute-Value

Empties an Attribute-Value if the Attribute exists

Factory::getResponseInstance()->attribClear('htmlElementId','my-attribute');

jybrid-javascript attribClear

// adding an attribute value
jybrid.attribPrepebd('element-id|Element','my-attribute-name')

Will be empties an Attribute-Value with Attribute-Name("my-attribute-name")

<input id="element-id" my-attribute-name="existing-string"/>
<!-- will be to -->
<input id="element-id" my-attribute-name=""/>

Remove an attribute or property

Factory::getResponseInstance()->attribRemove('element-id','disabled');

or with Php-Boolean value false removes the attribute also

Factory::getResponseInstance()->attribSet('element-id','disabled', false);
<input id="element-id" disabled="disabled"/>
<!-- or -->
<input id="element-id" disabled/>
<!-- will be to -->
<input id="element-id"/>

jybrid.hasAttrib (javascript only)

// returns bool!
jybrid.hasAttrib('element-id|Element','attribute-name')

demo ajax attribute manipulation

@see simple schematic schematic-ajax-attributes.php

further reading ajax examples

@see simple schematic schematic-attributes.php