Reactjs component interfering other component on same page -

-

i have 2 react components, likebox , commentbox

likes.jsx

var react = require('react');  var likebox = react.createclass({     getinitialstate: function(){         return {count: this.props.initialcount}     },     render: function(){       return (         <div classname="likebox">             {                 this.state.count &&                  <span>{this.state.count} people this</span>             }         </div>       );     } })  module.exports.likebox = likebox;

comment_box.jsx

var react = require('react'); var $ = require('app/common/jquery');  var commentbox = react.createclass({     getinitialstate: function(){       return {data: []};     },     handlecommentsubmit: function(comment){         this.refreshcomments();     },     apiurl: function(){         return this.props.apiurl+"?content_uuid="+this.props.contentuuid;     },     refreshcomments: function(){         $.get(this.apiurl(), function(data){             this.setstate({data: data});         }.bind(this), 'json');     },     componentdidmount: function(){         this.refreshcomments();     },     render: function(){       return (         <div classname="commentbox">           <h1>comments</h1>           <commentlist data={this.state.data} />           <commentform oncommentsubmit={this.handlecommentsubmit} apiurl={this.apiurl()}/>         </div>       );     } }); ... module.exports.commentbox = commentbox;

and have 2 jquery plugins mount divs components:

likes.js

"use strict";  var $ = require('jquery'); var jqbridget = require('jquery-bridget'); var react = require('react'); var likebox = require('app/likes/likes.jsx').likebox;   function likeboxplugin( element, options ) {   this.element = $( element );   this.options = $.extend( true, {}, this.options, options );   this._init(); }  likeboxplugin.prototype.options = {};  likeboxplugin.prototype._init = function() {    react.render(         <likebox initialcount={this.element.data('initial-likes-count')}/>,         this.element.get(0)     ); };  $.bridget('likebox', likeboxplugin);

comment_box.js

"use strict";  var $ = require('jquery'); var react = require('react'); var jqbridget = require('jquery-bridget'); var commentbox = require('app/comments/comment_box.jsx').commentbox;  function commentboxplugin( element, options ) {   this.element = $( element );   this.options = $.extend( true, {}, this.options, options );   this._init(); }  commentboxplugin.prototype.options = {};  commentboxplugin.prototype._init = function() {    react.render(         <commentbox contentuuid={this.element.data('uuid')} apiurl={this.element.data('api-url')}/>,         this.element.get(0)     ); };  $.bridget('commentbox', commentboxplugin);

to use plugins on page this:

<div>   post 1   <div class="likebox' .../>   <div class="commentbox' .../> </div> <div>   post 2   <div class="likebox' .../>   <div class="commentbox' .../> </div>  <script type="text/javascript"> var $ = require('jquery'); require('app/comments/comment_box.js'); require('app/likes/likes.js');  $(function(){     $('.likebox').likebox();     $('.commentbox').commentbox();     console.log('loaded controls'); }); </script>

my problem that, after running $('.likebox').likebox();, cannot target commentbox, eg. $('.comment-box').length gives 0

i have tried swap around:

$(function(){     $('.commentbox').commentbox();     $('.likebox').likebox();     console.log('loaded controls'); });

i can see comment box showed briefly , got replaced box.

i have found problem, having self closing tags:

<div class="likebox' .../> <div class="commentbox' .../>

after changing to:

<div class="likebox' ...></div> <div class="commentbox' ...></div>

worked.


Comments

Post a Comment

Popular posts from this blog

python - TypeError: start must be a integer -

-
i trying draw 5 turtles, getting typeerror on line 25. here code: import turtle wn = turtle.screen() redrose = turtle.turtle() color = input("what background color be?") fillcolor_f = input("what color of rose be?") redrose.hideturtle() redrose.speed(30) redrose.penup() redrose.left(180) redrose.forward(175) redrose.right(90) redrose.forward(30) redrose.right(90) redrose.pendown() def drawrose(red): redrose.color("pink") redrose.fillcolor(fillcolor_f) redrose.fill(true) in range(red): redrose.forward(i) redrose.right(49) in range(5): drawrose(redrose) redrose.penup() redrose.forward(350) redrose.right(144) redrose.pendown() redrose.fill(false) drawrose(50) wn.bgcolor(color) i trying draw 5 roses, produces errors. doing in interactivepython.org. you recursively calling drawrose wrong parameter. on line 23 ( for in range(red): ) expect red integer...
Read more

c# - DevExpress RepositoryItemComboBox BackColor property ignored -

-
i have following code almost works properly; private void cbstatus_drawitem(object sender, listboxdrawitemeventargs e) { string item = e.item string; if (item != null) { switch (item) { case "1": e.appearance.forecolor = color.green; e.appearance.backcolor = color.green; break; case "2": e.appearance.forecolor = color.orange; e.appearance.backcolor = color.orange; break; case "3": e.appearance.forecolor = color.red; e.appearance.backcolor = color.red; break; } } } when dropdown shown, items forecolor correct, backcolor remains whatever backcolor of theme is; i.e. if i've got set dark theme, backcolor dark, cells in gridview, rather being green/orange/red. i've tried setting e.appearance.options.usebackcolor trying set e....
Read more

django - Creating multiple model instances in DRF3 -

-
1) create multiple model instances 1 api call, asked here: how create multiple model instances django rest framework? tried solution named in link, no success. i trying upload multiple files in 1 api call. result: files uploaded (only once overwrote perform_create) 1 instance created (if send 2 files, latter created instance). my code: class fileuploadserializer(serializers.modelserializer): def __init__(self, *args, **kwargs): many = kwargs.pop('many', true) super(fileuploadserializer, self).__init__(many=many, *args, **kwargs) class meta: model = fileupload read_only_fields = ('created', 'datafile', 'owner') class fileuploadviewset(viewsets.modelviewset): queryset = fileupload.objects.all() serializer_class = fileuploadserializer parser_classes = (multipartparser, formparser, ) def perform_create(self, serializer): file_list = self.request.data.getlist('file') ...
Read more