In my code I create a lot of elements dynamicly on serverside, store the html of these elements in a javascript object,remove them and dynamicly/conditionally add them to different parts of the page.
For one particular element I want a data binding, such that I can refer to that binding in a v-if directive. However, if I add the v-bind on the server side, it gets lost after I copy the html.
Since I do only add the elements in my javascript code, I can not register the v-bind in my template. Neither can I provide the content in a component, since it is not static but relys on the input from the server.
How do I register the binding?
Sample Code:
Dynamicly generated form elements (server side):
<div id="archive" style="display: none;">
<div><input type="text" name="purpose" v-bind:value="purpose" id="id_purpose"></div> <!-- v-bind has no effect -->
<div><input type="text" name="purpose__iexact" id="id_purpose__iexact"></div>
<div><input type="text" name="purpose__contains" id="id_purpose__contains"></div>
<div><input type="text" name="purpose__icontains" id="id_purpose__icontains"></div>
<div><input type="text" name="purpose__in" id="id_purpose__in"></div>
...
</div>
Code to copy the html:
var input = {};
var archive = document.getElementById('archive');
for(var i = 0; i < archive.children.length; i++) {
var div = archive.children[i];
input[div.firstChild.name] = div.innerHTML
}
archive.parentNode.removeChild(archive);
Template code to display a certain input field dynamicly (client side):
<div class="inline" v-html="input[SOME CONDITIONAL COMPUTATIONS]"></div>
the correct way to rendering vue scene is:
<template>
<div>
<input type="button" value="Add new item" #click="addItem">
<hr>
<div v-for="(item,index) in data" :key="index">
<span v-html="item.html"></span>
<h3>Model data {{item.model}}</h3>
<input type="text" v-model="item.model">
<input type="button" value="Click me" #click="item.action(index)">
<input v-if="item.show" type="button" value="Remove me" #click="removeItem(index)">
</br>
</div>
</div>
</template>
<script>
export default {
data() {
return {
item: {
model: "",
show:true,
html: "<b>mydata html</b>",
action: function(index) {
console.log(`Clicked ${index} element.`);
}
},
data: [
{
model: "",
show:false,
html: "<b>mydata html</b>",
action: function(index) {
alert(`Clicked ${index} element.`);
console.log(`Clicked ${index} element.`);
}
},
{
model: "",
show:true,
html: "<b>mydata html</b>",
action: function(index) {
alert(`Clicked ${index} element.`);
console.log(`Clicked ${index} element.`);
}
}
]
};
},
methods: {
addItem() {
let item = Object.assign({}, this.item); // other way dublicating Observer
this.data.push(item);
},
removeItem(index){
this.data.splice(index,1)
}
}
};
</script>
You can add a show boolean prop to item object and v-if="" atribut to div to hide it.
I hope this example will help you.
Related
w2ui is ignoring the value on the input tag.
How do I get it to use the value?
It reads the selects just fine.
jsfiddle.net
<div id="form" style="width: 750px;">
<div class="w2ui-page page-0">
<div class="w2ui-field">
<label>First Name:</label>
<div>
<input name="first_name" type="text" value="John" />
</div>
</div>
</div>
<div class="w2ui-buttons">
<button class="w2ui-btn" name="reset">Reset</button>
<button class="w2ui-btn" name="save">Save</button>
</div>
</div>
$(function() {
$('#form').w2form({
name: 'form',
url: 'server/post',
fields: [
{ field: 'first_name', type: 'text', required: true }
],
actions: {
reset: function() {
this.clear();
},
save: function() {
this.save();
}
}
});
});
If I have to write JavaScript. How would I access the fields?
You can access the value of the input with form.record.
In your case w2ui.form.record.first_name (where form is the name of your w2form).
In your save event you can access the record with this.record, e.g.:
save: function() {
console.log(this.record);
console.log(this.record.first_name);
this.save();
}
additionally, As documentation of w2ui , you can set the value of input field
w2ui.Your_Form_Name.record['You_InputField_Name'] = The_New_value;
and then call form refresh to update both html and object, but this has issue where it clear the previous drop list select , so do set the new value with code as the following to avoid use refresh and keep pre-select in drop list
$('#InputFiled_Name').val(The_New_Value);
w2ui.Your_Form_name.record['Your_InputField_Name'] = The_New_Value;
I'm trying to use Vue.js to hide/show an element of my page based on a checkbox's value. Here's what I have so far:
<div id="myDiv" v-show="????">
<!-- stuff to be hidden -->
</div>
...
Vue.component('tab-gar-var-cb', {
props: ['cmp_name','cmp_checked_init', 'cmp_garantie_id'],
data: function(){
return {
'cmp_checked' : ''
};
},
template:`
<span>
<input :name="cmp_name" type="hidden" value="0">
<input :name="cmp_name" type="checkbox" value="1" v-model="cmp_checked">
</span>
`,
mounted: function(){
this.cmp_checked = (this.cmp_checked_init == '1');
}
});
new Vue({
el: "#vue-rptrenouedit-root"
});
Basically, what I'd like to do is bind the 'v-show' attribute to the 'cmp-checked' data of my tab-gar-var-cb component. However, I can't figure out how to do it. Anyone knows how to do it? Thanks in advance.
I am dynamically rendering pages using Handlebars.js, and I have a "quiz-form template" with the following code:
<div id="right-pane">
<script type="text/x-handlebars-template" id="quiz-form-template">
<form class="cf" id="quiz-form">
<h2>Create a <span>quiz</span></h2>
<p>Enter a quiz name and description to get started.</p>
<div>
<input type="text" name="quiz-name" placeholder="Quiz Name" />
</div>
<div>
<textarea rows="5" cols="40" name="quiz-description"
placeholder="Description"></textarea>
</div>
<div id="checkbox">
<input type="checkbox" name="is_random" /> Create randomly generated quiz <br/>
<input type="checkbox" name="is_single_page" /> Render quiz on a single page <br/>
<input type="checkbox" name="is_immediate"/> Give immediate feedback <br/>
</div>
<input type="submit" class="btn" value="Add Questions" />
</form>
</script>
</div>
I am running into two problems that I have been trying to debug to no avail. After rendering this page on my html, when I click the checkboxes, they do not get checked at all. It seems like I click and it "almost bounces off".
Additionally when I click the submit button, it is not being listened to. I am console.log"ging" to check and their is not output. Here is my event listener:
rightPane.addEventListener("submit", function(event) {
console.log( event.target );
event.preventDefault;
if ( event.target.value === "Add Questions" ) {
//DOM elements
newQuizName = document.querySelector('#quiz-form input');
newDescription = document.querySelector('#quiz-form textarea');
randomStatus = document.querySelector('#quiz-form input[name="is_random"]');
singlePageStatus = document.querySelector('#quiz-form input[name="is_single_page"]');
immediateStatus = document.querySelector('#quiz-form input[name="is_immediate"]');
var pendingQuiz = getPendingQuiz();
pendingQuizMetaData = {name: newQuizName.value, description: newDescription.value,
random: randomStatus.checked, singlePage: singlePageStatus.checked,
immediate: immediateStatus.checked
pendingQuiz = { metadata: pendingQuizMetaData, questions: [] };
updatePendingQuiz( pendingQuiz );
rightPane.innerHTML = templates.renderQuestionType();
newQuestion = "";
newSubject = "";
// }
// Since add questions is clicked, we should send the user to select question type
// we'll need to render html on the right pane
}
});
Any input would be greatly appreciated.
I have following html and Angularjs controller code to add rows dynamically.
<form name="{{form.name}}"
ng-repeat="form in forms">
<h2>{{form.name}}</h2>
<div ng-repeat="(i,cont) in form.contacts">
<input type="text" class="xdTextBox" ng-model="cont.ac"/>
<input type="text" class="xdTextBox" ng-model="cont.a_number"/>
<input type="text" class="xdTextBox" ng-model="cont.p_id"/>
</div>
<button ng-click="submit(form)">Submit</button>
<button ng-click="addFields(form)">Add</button>
<hr>
</form>
Controller code to add rowsis
$scope.addFields = function (form) {
if (typeof form.contacts == 'undefined') {
form.contacts = [];
}
form.contacts.push({name:'', ac: '', a_number: '', p_id: '' });
}
What I want to do next is after adding rows if i mouse over any row a delete link or button shows up and if one clicks it, it removes that row.
Here is the working plunker for the adding rows.
http://plnkr.co/edit/9bUnd7t0PyMwykgi0VZR?p=preview
Please let me know how I can mouse over a row and click the remove button or link to remove that list.
Thanks
Take a look here:
http://plnkr.co/edit/zxjHLzqiAQnZzcaUwgBL?p=preview
I added the "contact" class to the div container so I could identify it in the CSS:
<div ng-repeat="(i,cont) in form.contacts" class="contact">
I added the remove button inside the container and gave it the "remove" class:
<button type="button" class="remove" ng-click="form.contacts.splice(i, 1);">Remove</button>
(Note: You may wish to have a function inside your scope for removing a contact if you need to do anything more complicated than just removing it from the array.)
To get the button to be hidden initially, but show up when you hover over the row, I used the following CSS:
.contact .remove { visibility: hidden; }
.contact:hover .remove { visibility: visible; }
You can do it by adding a function to your scope that recieves the form and index, then splicing the desired index out of it:
<div ng-repeat="(i,cont) in form.contacts">
<input type="text" class="xdTextBox" ng-model="cont.ac"/>
<input type="text" class="xdTextBox" ng-model="cont.a_number"/>
<input type="text" class="xdTextBox" ng-model="cont.p_id"/>
<button ng-click="delete(form, i)">Delete</button>
</div>
Then, the Javascript (add this to your controller):
$scope.delete = function(form, index) {
form.contacts.splice(index, 1);
}
http://plnkr.co/edit/2SEGDnGoE7kaw0KvOpKr?p=preview
these days i read and learn more about my problem!the code is here:
<div align="right" id="parent" name="parent">
<select name="select30" id="select30" value=""/>here inside i have options values and work dynamically with query to my DB</select>
<input type="button" id="moreFields" value="+" onclick=""/> //add select tags
<input type="button" value="-" onclick="" /> //remove select tags
<div name="child" id="writeclone"></div> //here cloned the child from parent DIV
</div>
<input type="button" name="enter" id="" value="ENTER" onclick="getoptionvalues();"/>
My problem is how i can get the names or id's from child DIV when + button fired.When this button fired create child DIVs in Child DIV!!Can anybody HELP ME to correct my JAVASCRIPT code
<script>
function getoptionvalues() {
var parent=document.getElementById('parent');
for (var count=0;count<parent.childNodes.length;count++) {
if(parent.childNodes[count].tagName =='DIV') {
alert ('parent.childNodes[count]');
}
}
}
</script>
As ThiefMaster pointed out, 'parent.childNodes[count]' should be parent.childNodes[count]. Then to get the id, it is just .id and name is .name
if(parent.childNodes[count].tagName =='DIV') {
alert (parent.childNodes[count].id);
alert (parent.childNodes[count].name);
}
At the very least, you need to add a method name to your onClick:
<input type="button" id="moreFields" value="+" onclick="$:getoptionvalues()"/>
Then, using jquery, you can grab an array of components of a certain type, and then loop through w/ alerts:
function getoptionvalues() {
var dropdownMenus = $("select");
dropdownMens.each(function () {
var id = $(this).id;
alert(id);
});
}