CODEWITHSUNDEEP
javascriptjqueryzend-framework
tread
tread

Reputation: 11098

Chained or Dependent Select Zend_Form jQuery to remove or replace the form elements?

I have been using Zend Framework 1 to create a dependent/chained Zend_Form.

When a Zend_Form_element_Select another Zend_Form_Element_Select is added to the form with correct fields dependant on the first select's value.

So I add the new Select with a:

$("#city-label").before(data);

which will insert the new select before the city label.

The problem arises when the first select's value is changed again. Then a new Select is added to the form. I would Ideally like the old satellite element that is the label and the select to be removed.

<dt id="satellite-label">
<label for="satellite" class="optional">Satelite</label>
</dt>
<dd class="ui-select">
<select name="satellite" id="satellite">
    <option value="--Select One--" label="--Select One--">--Select One--</option>
    <option value="5" label="Alex">Alex</option>
    <option value="6" label="Patro">patro</option>
    <option value="7" label="Zozo ">Zozo</option>
</select></dd>
<dt id="city-label"><label for="city" class="optional">City</label></dt>

And then replaced with the new element.

Upvotes: 3

Views: 312

Answers (5)

Lalit Kumar Maurya
Lalit Kumar Maurya

Reputation: 5565

You must remove previous inserted select before insert another on first select's value is changed again.

So it may be help in your case.

$("#city-label").prev('.ui-select').remove();
$("#city-label").prev('#satellite-label').remove();
$("#city-label").before(data);

or simply add this

$("#city-label").prev().remove();
$("#city-label").prev().remove();
$("#city-label").before(data);

It will remove select then label and insert new select before insert new one.

Upvotes: 0

Mehdi
Mehdi

Reputation: 4318

You can use a hidden input (Zend_Form_Element_Hidden) then simply replace the hidden element.

$("#target-element").html(data);

Don't forget to use same id (target-element) on html content of data.

This way you can also add backend validators to this hidden element to use isValid method.

Upvotes: 0

Programmer man
Programmer man

Reputation: 393

try this ...

$("#satellite_elem-label").remove();
$("#satellite_elem").parent().remove();;
$("#city-label").before(newElement);

Upvotes: 1

Maxxie
Maxxie

Reputation: 76

Try this from within your AJAX success:

$("#satellite-label").remove();
$("#satellite").parent().remove();

Upvotes: 2

sroes
sroes

Reputation: 15053

You should keep track of the new element so you can remove it when the value changes again:

var currentLabel;

...

if (currentLabel) {
    currentLabel.remove();
}
currentLabel = $(data);
$("#city-label").before(currentLabel);

Upvotes: 1

Related Questions