I am using datatable and has to add render different html based on few checks and that's why vue code has lots of jQuery events. I was wondering is there any way to assign event on dynamic html elements.
Inside Data table columns object
render:function(data, type, full, meta) {
let html = '<div class="catagory-checkbox">'
+ '<label>'
+ '<input id="' + data.LeadTrackingId + '" class="statusDetail" type="checkbox" />'
+ '<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>'
+ '</label>'
+ '</div>';
if(vm.isSuperAdmin)
return html;
return "";
}
Please don't do this. You're constructing html with string methods. This is not the way, and there's no need. Use template:, not render: :-)
Your code above should look like...
template : `
<div v-if"isSuperAdmin" class="catagory-checkbox">'
<label>
<input :id="LeadTrackingId" class="statusDetail" type="checkbox" />'
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
`
You can bind id like that, but do you need to? Good Vue code doesn't need ids on html elements.
Related
I populate some radio buttons from an array of options. I would like to determine which radio button was select using $refs, however when I log out the $refs it gives me all of the radio buttons.
Is it possible to just grab the select radio button using $refs? Can you some how combine event.target with the $refs or something? Furthermore how to I access parts of that ref like the class of the element that was selected. I am trying to use just vue to do this but has proven difficult.
thanks for any help you can provide.
<li
class="mc-option"
v-for="(option, i) in options"
:key="i">
<input
ref="mcOption"
type="radio"
name="option"
:id="'option-' + i"
class=""
#click="radioSelected($event)">
</li>
methods: {
radioSelected: function () {
let mcOption = this.$refs.mcOption
console.log(mcOption)
},)
}
X is your ID:
<ul>
<li v-for="x in 5">
<label :for="`radio${x}`">radio{{x}}</label>
<input type="radio" name="radio" :id="`radio${x}`" #change="getRef(`radio${x}`)" :ref="`radio${x}`">
</li>
</ul>
methods: {
getRef (ref) {
console.log(this.$refs[ref])
}}
This is happening since all the generated options are having the same ref ids. You could come over this with the following code.
TEMPLATE
<li class="mc-option" v-for="(option, i) in options" :key="i">
<input :ref="['mcOption',i].join('-')" type="radio" name="option" :id="'option-' + i" class="" #click="radioSelected(i)"> {{i+1}}
</li>
JS
methods: {
radioSelected: function (i) {
let mcOption = this.$refs[['mcOption', i].join('-')]
console.log(mcOption)
}
}
Points to note are:
:ref
a variable ref id by using ['mcOption', i].join('-'). This actually can be anything you want (but should change for every v-for iteration).
Please let me know if it does NOT work for you.
How do I dynamically concat a text with vuejs 2
Here is what I have now:
<span class="label" :class="label-{{account.Segment}}">{{account.Segment}}</span>
account.Segment == "ABC"
What I need rendered is that
<span class="label label-ABC">ABC</span>
Here is one possible way.
<span class="label" :class="'label-' + account.Segment">{{account.Segment}}</span>
You can add more classes using an array of string
computed: {
classNames() {
// add more logic here
let classNames = ['label'];
classNames.push(`label-${this.contextType}`);
return classNames;
},
},
and then you can use it like this
<div :class="classNames">
...
</div>
I've read that it is not good practice to pass the dom element so I come up with such view:
<div>
<input #message placeholder="message" (keyup.enter)="add(message.value)" />
<button (click)="add(message.value)">Add+</button>
<p>
the message is {{ message.value }}
</p>
</div>
As you can see I am passing the message.value to my add method
add(message: string) {
this.message = message;
console.log(this.message);
this.messengerService.add(this.message);
}
But how can I clear the so inside add method so input #message won't containg any text? I tried message = null; but it is does not work.
If you extend your response with (blur)= , you can reset the input field as follows:
<div>
<input #message placeholder="message (keyup.enter)="add(message.value)" (blur)="add(message.value); message.value='' " />
<button (click)="add(message.value)">Add+</button>
<p>
the message is {{ message.value }}
</p>
</div>
Note added: (blur)=add(message.value); message.value=''
you can use ngModel instead of #elem.value :
<div>
<input placeholder="message" [(ngModel)]="message" (keyup.enter)="add(message)"/>
<button (click)="add(message)">Add+</button>
<p>
the message is {{ message }}
</p>
</div>
and then clear the input value by adding
this.message = null;
in add function. This will work :
add(message: string) {
this.message = message;
console.log(this.message);
this.messengerService.add(this.message);
this.message = null;
}
your message.value attribute in view was not mapped to this.message in modal
Why to use extra Parameter when angular provides two way data binding in the form of [(ngModel)]. you can use ngModel to get notified both side on view as well as in the class/controller. no need to pass extra parameter along with method call. so you can use this simplified approach here
<div>
<input placeholder="message" [(ngModel)]="message" (keyup.enter)="add()"/>
<button (click)="add(); message = null">Add+</button>
<p>
the message is {{ message }}
</p>
</div>
message: string = null;
add() {
console.log(this.message);
// this.messengerService.add(this.message);
}
here is working demo for the same Working Plunker
The ngModel input property sets the element's value property and the ngModelChange output property listens for changes to the element's value. The details are specific to each kind of element and therefore the NgModel directive only works for elements, such as the input text box.
I have a problem with this jQuery function that i use for add and remove box to my page:
jQuery(document).ready(function($){
$('.my2-form .add2-box').click(function(){
var n = $('.text2-box').length + 1;
if( 12 < n ) {
alert('you can't make more than 12 box');
return false;
}
$.post('showselectdatearray.php', { type: 'months', year: 93}, function(result) {
var box_html = $('<p class="text2-box" style="padding: 0px; margin: 0px;"><label for="box' + n + '"><span class="box2-number">' + n + ' </span></label> <input type="text" name="boxes[]" value="" id="box' + n + '" size="8" /> '+resultremoveitem</p>');
box_html.hide();
$('.my2-form p.text2-box:last').after(box_html);
box_html.fadeIn('slow');
box_html.css( 'background-color', '#48b973' );
return false; });
});
$('.my2-form').on('click', '.remove2-box', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.box2-number').each(function(index){
var p =index+1;
var str = p+'\xa0\xa0\xa0\xa0';
$(this).text( str );
});
});
return false;
});
$('.my2-form p.text2-box:last').css( 'background-color', '#FFFFFF' );
});
then i use from above script in my code this way:
<div id="showresult12" class="my2-form">
<div>
<input type='button' id='AddMore' name='AddMore' value='add box' class='add2-box' />
</div>
<div style="float: right;" class="scroll10">
<p class="text2-box" style="padding: 0px; margin: 0px;">
<label for="box"><span class="box2-number">1 </span></label>
<input type="text" name="boxes[]" value="" id="box" size="8" />
<?php Show_Select_Date_Array("months",0,0,0,93) ?>
</p>
</div>
</div>
Every thing is OK now and when user click on "add box" button, another box appear and when user click on "remove it" button, one box remove.
I have another part -part2- under this code that fetch from database. after user click on "edit" button that is locate in -part2-, information fetch from database to boxes with php code, but my add and remove button don't work at all. my information fetch with Ajax and replace in new boxes. the 'showresult12' div id completely load again with same data.
what is the problem after replacing div element?!
and what change i must do in my jquery code that it work after div load again?
In your 'var box_html=...' line, there looks to me to be a bit of a syntax error:
'+resultremoveitem</p>');
where 'result' isn't used properly. Should it be something like +result+'<a href... ?
EDIT: If as you say your 'showresult12' div is being emptied and then refilled again dynamically, then your 'add' event handler will always be invalid - it's not using delegation like the 'remove' one.
$('.my2-form').on('click', '.remove2-box', function(){ - this is OK, as it will work for dynamically-created .remove2-box elements.
$('.my2-form .add2-box').click(function(){... - however this is not, as it is only valid for .add2-box elements that were present in the DOM when this handler was created.
So in this scenario, the 'add' hander will not work following your AJAX PHP call.
Furthermore, if you are actually going further and removing and re-adding the .my2-form div (#showresult12) itself, then neither of the handlers will work - you would have to do something like $('body').on('click', '.my2-form .add2-box', function() {....
thanks for your answer but my result fetch from file with name "showselectdatearray.php". it is not important you can remove this
$.post('showselectdatearray.php', { type: 'months', year: 93}, function(result) {
AND result variable in : '+result<a href="#"
I have created a widget based template like,
<div class="content">
<div>
<!-- rest of content-->
</div>
<div class="col-md-6">
<div class="panel" data-dojo-attach-point="sysinfo">
<ul class="col-md-12 stats">
<li class="stat col-md-3 col-sm-3 col-xs-6">Host:</br> <span><b class="value">{{hname}}</b></span>
</li>
<li class="stat col-md-3 col-sm-3 col-xs-6"># CPU:</br> <span><b class="value">{{cpu}}</b></span>
</li>
</ul>
</div>
</div>
</div>
How do I update only content of sysinfo ?
Till now I was doing,
var widget = this;
widget.template = new dtl.Template(widget.templateString);
var template = widget.template;
template.update(node, stats); // but it update complete content as node == content. I just want to refresh sysinfo.
I also tried,
template.update(this.sysinfo, stats); // but it throws exceptions
Any ideas?
As far as I can see is that when you're using dojox/dtl/_Templated as suggested in the documentation, there is no update() function available.
If you really wish for certain things, you will have to manually define a template and render that one (and replace the attach point), for example:
var subtemplate = "<ul data-dojo-attach-point='sysinfo'>{% for item in list %}<li>{{item}}</li>{% endfor %}</ul>";
var template = "<div><h1>{{title}}</h1>" + subtemplate + "</div>";
var CustomList = declare("custom/List", [ _WidgetBase, _Templated, _DomTemplated ], {
templateString: template,
subTemplate: new dtl.Template(subtemplate),
title: "Fruits",
list: [ 'Apple', 'Banana', 'Lemon' ],
_setListAttr: function(list) {
this.list = list;
this.sysinfo = domConstruct.place(this.subTemplate.render(new dtl.Context(this)), this.sysinfo, "replace");
},
_getListAttr: function(list) {
return this.list;
}
});
Normally, if you would update the template when the list is set, you could use this.render() inside the _setListAttr() function to update the entire template.
However, as you can see in the _setListAttr() function I'm replacing an attach point by a newly rendered Django template.
This results in only that part of the template being updated, in stead of the entire template. So {{title}} would remain the original value, even when changed.
A full example can be found on JSFiddle: http://jsfiddle.net/pb3k3/