Javascript richtig einbinden.[gelöst]
Eingetragen von patrici (107)am 03.04.2016 - 16:05 Uhr in
Hallo,
Ich benutze jquery um bestimmte dinge in einen Formular zu ändern.
jQuery(document).ready(function($) {
$('.control-label:contains("|standardwert|")').each(function(){
$(this).html($(this).html().split("|standardwert|").join(""));
$(this).find("input[type='checkbox']").prop('checked', true);
});
$('.form-checkbox').change(function() {
if ($(this).is(':checked')) {
var price = $(this).closest( ".col-md-12" ).find(".jsprice").find("h1").html().split(" €").join("").split(",").join(".");
var checkboxprice = $(this).parent( ".control-label" ).find("span:contains('€')").html().split(" €").join("").split(",").join(".");
var newprice = Number(price) + Number(checkboxprice);
var result = newprice.toFixed(2).replace('.', ',');
$(this).closest( ".col-md-12" ).find(".jsprice").find("h1").html(result).append( " €" );
} else {
var price = $(this).closest( ".col-md-12" ).find(".jsprice").find("h1").html().split(" €").join("").split(",").join(".");
var checkboxprice = $(this).parent( ".control-label" ).find("span:contains('€')").html().split(" €").join("").split(",").join(".");
var newprice = Number(price) - Number(checkboxprice);
var result = newprice.toFixed(2).replace('.', ',');
$(this).closest( ".col-md-12" ).find(".jsprice").find("h1").html(result).append( " €" );
}
});
});Das funktioniert auch soweit ganz gut das problem ist die formulare werden per ajax ausgeführt und nach dem absenden wird das formular neu geladen. Dadurch wird die js datei nicht mehr berücksichtigt.
ich hab die js datei mittels
$form['#attached']['js'] = array(
drupal_get_path('module', 'modul').'/modul.js',
);Gibt es eine Möglichkeit das die js datei auch nach dem neuladen des Formulars berücksichtigt wird?
- Anmelden oder Registrieren um Kommentare zu schreiben
Sieh Dir im Starterkit von
am 03.04.2016 - 16:30 Uhr
Sieh Dir im Starterkit von Zen an, wie das Beispiel-js-Script aussieht. Du mußt aus Deinem jQuery Script ein Drupal-Behavior machen, damit es immer berücksichtigt wird.
super das ging aber schnell:)
am 03.04.2016 - 16:47 Uhr
super das ging aber schnell:) Ich hab es jetzt einfach mal copy und paste ausprobiert und sie da es wird schon mal immer ausgeführt, nur leider doppelt bzw beim ersten laden dreifach.
Woran kann das liegen?
ich habe nur die js datei geändert.
(function ($) {
Drupal.behaviors.exampleModule = {
attach: function (context, settings) {
$('.control-label:contains("|standardwert|")').each(function(){
$(this).html($(this).html().split("|standardwert|").join(""));
$(this).find("input[type='checkbox']").prop('checked', true);
});
$('.form-checkbox').change(function() {
if ($(this).is(':checked')) {
var price = $(this).closest( ".col-md-12" ).find(".jsprice").find("h1").html().split(" €").join("").split(",").join(".");
var checkboxprice = $(this).parent( ".control-label" ).find("span:contains('€')").html().split(" €").join("").split(",").join(".");
var newprice = Number(price) + Number(checkboxprice);
var result = newprice.toFixed(2).replace('.', ',');
$(this).closest( ".col-md-12" ).find(".jsprice").find("h1").html(result).append( " €" );
} else {
var price = $(this).closest( ".col-md-12" ).find(".jsprice").find("h1").html().split(" €").join("").split(",").join(".");
var checkboxprice = $(this).parent( ".control-label" ).find("span:contains('€')").html().split(" €").join("").split(",").join(".");
var newprice = Number(price) - Number(checkboxprice);
var result = newprice.toFixed(2).replace('.', ',');
$(this).closest( ".col-md-12" ).find(".jsprice").find("h1").html(result).append( " €" );
}
});
}
};
}(jQuery));
Hallo, damit das JS wirklich
am 04.04.2016 - 09:35 Uhr
Hallo,
damit das JS wirklich nur einmal geladen wird,
musst Du jQuery's once Funktion benutzen.
Drupal.behaviors.mybehavior = {attach: function (context, settings) {
$('#some_element', context).once('mybehavior', function () {
// Code here will only be applied to $('#some_element')
// a single time.
});
}
};
MfG
Robert
Danke, ich hab mal mit der
am 05.04.2016 - 16:26 Uhr
Danke, ich hab mal mit der once funktion ein wenig experimentiert bin aber leider auf kein zufriedenstellendes ergebniss gekommen. Teilweise wurde das script c.a 10 mal ausgeführt oder es hat nach absenden des formulars wieder nicht funktioniert.
Falls jemand einen tipp hat welches element ich mit once bestücken soll wäre ich sehr dankbar.
Hier der html code des formulars:
<div class="col-md-12" id="bbbbbbb"><div id="commerce_cart_add_to_cart_form_11_wrappere"><form class="commerce-add-to-cart commerce-cart-add-to-cart-form-11" action="/q/p/admin" method="post" id="commerce-cart-add-to-cart-form-11" accept-charset="UTF-8"><div><input type="hidden" name="product_id" value="11">
<input type="hidden" name="form_build_id" value="form-Yx7-D96N9PYLEhQnNt1d5xQhgXHvJe8K9QLRyNjjRyU">
<input type="hidden" name="form_token" value="41P-rA0TMLM1BlfdBpwJDTbZpwPWRLXsuPujxgjUwiw">
<input type="hidden" name="form_id" value="commerce_cart_add_to_cart_form_11">
<div id="edit-line-item-fields--9" class="form-wrapper form-group"><fieldset class="collapsible required-fields group-o1 field-group-fieldset panel panel-default form-wrapper collapse-processed" id="bootstrap-panel--3">
<legend class="panel-heading">
<a href="#" class="panel-title fieldset-legend" data-toggle="collapse" data-target="#bootstrap-panel--3 > .collapse" aria-expanded="true"><span class="fieldset-legend-prefix element-invisible">Hide</span>bla bla</a>
</legend>
<div class="panel-collapse fade collapse in" aria-expanded="true">
<div class="panel-body">
<div class="field-type-entityreference field-name-field-option1-litem field-widget-options-buttons form-wrapper form-group" id="edit-line-item-fields-field-option1-litem--4"><div class="form-item form-item-line-item-fields-field-option1-litem-und form-type-checkboxes form-group"> <label class="control-label" for="edit-line-item-fields-field-option1-litem-und--4">bla bla <span class="form-required" title="This field is required.">*</span></label>
<div id="edit-line-item-fields-field-option1-litem-und--4" class="form-checkboxes"><div class="form-item form-item-line-item-fields-field-option1-litem-und-41 form-type-checkbox checkbox"> <label class="control-label" for="edit-line-item-fields-field-option1-litem-und-41--4"><input type="checkbox" id="edit-line-item-fields-field-option1-litem-und-41--4" name="line_item_fields[field_option1_litem][und][41]" value="41" class="form-checkbox"> <span class="views-field views-field-title"> <span class="field-content">fgjghjj</span> </span> - <span>99,00 €</span> - <span> <span></span> </span> </label>
</div><div class="form-item form-item-line-item-fields-field-option1-litem-und-42 form-type-checkbox checkbox"> <label class="control-label" for="edit-line-item-fields-field-option1-litem-und-42--4"><input type="checkbox" id="edit-line-item-fields-field-option1-litem-und-42--4" name="line_item_fields[field_option1_litem][und][42]" value="42" class="form-checkbox"> <span class="views-field views-field-title"> <span class="field-content">ggggg</span> </span> - <span>33,00 €</span> - <span> <span></span> </span> </label>
</div><div class="form-item form-item-line-item-fields-field-option1-litem-und-46 form-type-checkbox checkbox"> <label class="control-label" for="edit-line-item-fields-field-option1-litem-und-46--4"><input type="checkbox" id="edit-line-item-fields-field-option1-litem-und-46--4" name="line_item_fields[field_option1_litem][und][46]" value="46" class="form-checkbox"> <span class="views-field views-field-title"> <span class="field-content">nnn</span> </span> - <span>666,00 €</span> - <span> <span></span> </span> </label>
</div></div></div></div> </div>
</div>
<span class="summary"></span></fieldset>
<fieldset class="collapsible required-fields group-o4 field-group-fieldset panel panel-default form-wrapper collapse-processed" id="bootstrap-panel--4">
<legend class="panel-heading">
<a href="#" class="panel-title fieldset-legend" data-toggle="collapse" data-target="#bootstrap-panel--4 > .collapse" aria-expanded="true"><span class="fieldset-legend-prefix element-invisible">Hide</span>option4</a>
</legend>
<div class="panel-collapse collapse fade in">
<div class="panel-body">
<div class="field-type-entityreference field-name-field-option4-litem field-widget-options-buttons form-wrapper form-group" id="edit-line-item-fields-field-option4-litem--4"><div class="form-item form-item-line-item-fields-field-option4-litem-und form-type-checkboxes form-group"> <label class="control-label" for="edit-line-item-fields-field-option4-litem-und--4">option4 </label>
<div id="edit-line-item-fields-field-option4-litem-und--4" class="form-checkboxes"><div class="form-item form-item-line-item-fields-field-option4-litem-und-44 form-type-checkbox checkbox"> <label class="control-label" for="edit-line-item-fields-field-option4-litem-und-44--4"><input type="checkbox" id="edit-line-item-fields-field-option4-litem-und-44--4" name="line_item_fields[field_option4_litem][und][44]" value="44" class="form-checkbox"> <span class="views-field views-field-title"> <span class="field-content">bkjbjkbjk</span> </span> - <span>44,00 €</span> - <span> <span></span> </span> </label>
</div><div class="form-item form-item-line-item-fields-field-option4-litem-und-45 form-type-checkbox checkbox"> <label class="control-label" for="edit-line-item-fields-field-option4-litem-und-45--4"><input type="checkbox" id="edit-line-item-fields-field-option4-litem-und-45--4" name="line_item_fields[field_option4_litem][und][45]" value="45" class="form-checkbox"> <span class="views-field views-field-title"> <span class="field-content">xcvubjnok</span> </span> - <span>44,00 €</span> - <span> <span></span> </span> </label>
</div></div></div></div> </div>
</div>
<span class="summary"></span></fieldset>
</div><input type="hidden" name="quantity" value="1">
<button type="submit" id="edit-submit--11" name="op" value="Add to cart" class="btn btn-success form-submit ajax-processed">Add to cart</button>
</div></form></div> <div class="jsprice pull-right" style="margin-top: -65px;"><h1>10,99 €</h1></div>
</div>
Hallo,Du musst die Aktion in
am 05.04.2016 - 16:37 Uhr
Hallo,
Du musst die Aktion in die once Funktion packen.
Ich denke mal, Du willst mit dem Submit Button die Form absenden:
(function ($) {Drupal.behaviors.myCustomJS = {
attach: function(context, settings) {
$('#edit-submit--11').once('mybehavior', function() {
$('#edit-submit--11').click(function(){
alert('Sende Form');
$('#commerce-cart-add-to-cart-form-11').submit();
});
});
}
};
})(jQuery);
Gruss
Robert
Danke hat aber leider nicht
am 05.04.2016 - 17:31 Uhr
Danke hat aber leider nicht funktioniert aber ich bin trotzdem auf die lösung gekommen:
$('.form-checkbox').each(function(){
$(this).once('mybehavior', function() {
$(this).change(function() {
Auf die each funktion hätte ich auch gleich kommen können...