I'm having problem using #click vue function inside an appended HTML element using a Vue component.
The component have two button to add and remove divs inside a container, as follow:
<div class="col-md-12">
<button class="btn btn-sm btn-warning" #click.prevent.stop="addQuestion()">Add Question</button>
<button class="btn btn-sm btn-danger" #click.prevent.stop="removeQuestion()" v-if="notRemovableQuestion">Remove Question</button>
</div>
addQuestion function is as follow:
addQuestion(){
var newQuestion = '<div class="questionBox col-md-12 f-left p-2 mt-2" style="border:2px solid blue;">' +
'<div class="col-md-11 f-left">' +
'<input type="text" class="form-control" name="domanda" placeholder="Question" v-model="domanda" />' +
'<input type="text" class="form-control" name="question_description" placeholder="Question Description" v-model="question_description" />' +
'<div class="form-check">' +
'<div class="newAnswerActions f-left full-width col-md-12 mb-2 mt-2">' +
'<a class="btn btn-sm btn-warning" #click.native="addAnswer()">Add Answer</a>' +
'<a class="btn btn-sm btn-danger" #click.native="removeAnswer()" v-if="notRemovableAnswer">Remove Answer</a>' +
'</div>' +
'<label class="form-check-label">' +
'<input class="form-check-input" type="radio" name="risposte" id="exampleRadios1" value="">' +
'<input type="text" class="form-control" name="answer" placeholder="Risposta" />' +
'</label>' +
'</div>' +
'</div>' +
'<div class="col-md-1 f-left">' +
'<button class="btn btn-sm btn-success" #click.prevent.stop="removeQuestion()">SAVE</button>' +
'</div>' +
'</div>';
$(".allQuestionContainer").append(newQuestion); }
The new container is successfully appended but the two buttons for Add Answer and Remove Answer, calling #click.native="addAnswer()" and #click.native="removeAnswer()" are not working. I've tried with or without native and anything else, also with js onClick but no luck, the function is never reached and the click event it's not working.
What I'm doing wrong? Any suggestions?
Thanks!
I would avoid the course you are taking and make use of components instead.
Rather than appending HTML to a div, you could create a component which contains the HTML you're currently assigning to newQuestion. That component would then be responsible for dealing with the addQuestion and removeQuestion methods and because it's a component registered with Vue, it'll automatically be reactive.
Once the component is registered you can control whether it's shown by doing something like:
<new-question v-if="showNewQuestion"></new-question>
Then within your addQuestion method you just set this.showNewQuestion = true so that the component will show. showNewQuestion would obviously need to be declared within your data prop and defaulted to false.
I've not gone into great detail about the formation of the component as I don't know if your using vue-loader or not but more information can be found on the Vue Docs Site.
Related
I got a little problem with php/js. I want to create a website for a school project which is a communotary food receipe oriented website. And here I'm struggling with my page 'submit receipe'.
To be exact the problem is that I create, with a button, some dynamic textarea in order to represents the steps of a receipe, to do so I use a js eventHandler. And here I have a problem because I want to insert in this js code the post value that the user has typed. But I honestly don't know how to do this, I get the fact that js is executed before php so do I have a solution to bypass this problem ?
Here my code :
// The js script
function createNewElement() {
var txtNewInputBox = document.createElement('div');
var php = "<?php if(isset($_POST['boxExplain_" + numStep + "']))echo $_POST['boxExplain_"+ numStep + "']?>";
txtNewInputBox.innerHTML = "<label for='box-explain'>Step " + numStep + "</label>"+
"<br>"+
"<textarea type='text' class='box-explain' name='boxExplain_" + numStep + "'" +
"value='' placeholder='BlaBla.'>" +
php + "</textarea>" +
'<i class="fas fa-minus-circle '+ numStep +'"></i>';
numetape++;
document.getElementById("step-box").appendChild(txtNewInputBox);
}
And here the HTML :
<div class="explain-box">
<h3>Explanations </h3>
<label for="box-explain">Step 1</label>
// The first one is not dynamic
<textarea type='text' class='box-explain' name='boxExplain_1' value="" placeholder="BlaBla"><?php if (isset($_POST['boxExplain_1'])) echo $_POST['boxExplain_1'] ?></textarea>
//here goes the js one
<div id="step-box"></div>
<div id="dynamicCheck">
<input class="btnStep" type="button" value="add Step" onclick="createNewElement();" />
<i class="fas fa-plus"></i>
</div>
</div>
I hope it was clear enough, thanks for your help.
I am developing a ticket booking system in laravel. That will allow users to booked their seats. Now I want to disable those seats that was previously booked by some other user. Booked seats number are already passed in the blade through an array. The seat buttons are dynamically generated based on total seat number. I want to disable those booked seats by their value. Like A1,A2 are booked so buttons that contains value A1 & A2 will be disabled.
Here is my HTML code
<form class="form-control" style="width: auto">
<div class="btn-group btn-group-sm" id="col1Buttons" style="display: inline-grid; padding: 10px;">
</div>
<div class="btn-group btn-group-sm" id="col2Buttons" style="display: inline-grid; margin-right: 15px;">
</div>
<div class="btn-group btn-group-sm" id="col3Buttons" style="display: inline-grid; margin-left: 15px;">
</div>
<div class="btn-group btn-group-sm" id="col4Buttons" style="display: inline-grid; padding: 10px;">
</div>
</form>
//{{$all_seats}} contains all booked seats//
javascript code for appending seat buttons
<script>
var pages = {{$seat_number/4}};
// console.log(pages);
var page1Buttons = $('#col1Buttons');
var page2Buttons = $('#col2Buttons');
var page3Buttons = $('#col3Buttons');
var page4Buttons = $('#col4Buttons');
for (var j=65; j<65+pages; j++){
page1Buttons.append('<input class="btn single_seat" name="options" type="button" id="seat" value="' + String.fromCharCode(j) + '' + 1 + '"/>');
page2Buttons.append('<input class="btn single_seat" name="options" type="button" id="seat" value="' + String.fromCharCode(j) + '' + 2 + '"/>');
page3Buttons.append('<input class="btn single_seat" name="options" type="button" id="seat" value="' + String.fromCharCode(j) + '' + 3 + '"/>');
page4Buttons.append('<input class="btn single_seat" name="options" type="button" id="seat" value="' + String.fromCharCode(j) + '' + 4 + '"/>');
}
Switch to rendering in blade
Instead of rendering your HTML in JavaScript, it's my advice that you just switch this rendering of the buttons into blade. This way you get total control of what's going on and you can easily check if the seat number is already taken.
You can use for loop which already has index, and apply the same logic as in JS
Assign JS variable a value
If you really want to keep the JS method, before loading the script that will do the rendering of the buttons, make sure to declare new JS variable like
<script>
const taken = "#json($all_seats)"
</script>
The above code should do the trick with making the right conversion so you can now use taken inside your rendering script and do the checks.
Once you have the taken seats in an array, you can just check if the seat number is in the array:
if(taken.includes(seat_number)){
... Generate disabled button
}
else{
... Generate normal button
}
I'm trying to send a request and get answer from my own synonyms api. The api works very well. And the javascript is getting the answer, but it keeps refreshing the page and in the end there's no output in my html.
This is my html script:
<form method="POST">
<input type="text" class="question" />
<button class="gen-syn">Generate synonyms</button>
<input type="submit" value="Save"/>
</form>
And this is my javascript:
$(document).on('click','.gen-syn',function(){
var questionVal = $(".question").val();
if (questionVal == ''){
$(".question").focus();
}
else {
$.ajax({
type :'POST',
url : "http://192.168.1.9:5000/synonyme_word/"+questionVal,
success : function(response){
var divSynonymes = $(document.createElement('div'));
$(".question").after(divSynonymes);
for (var a in response){
$(divSynonymes).append('<h1 class="titre-textareal-question-icona-go " value=>'+a+'</h1>'+
'<div class="form-group row" >'+
'<div class="col-sm-12 listeSyn">'+
'</div>'+
'</div>'
);
for (syn in response[a]){
var synonyme = response[a][syn]
$(".listeSyn").append(
'<input type="checkbox" name="checkboxes[249]" id="frm-test-elm-110-100" autocomplete="off" />'+
'<div class="btn-group">'+
'<label for="frm-test-elm-110-100" class="btn btn-primary">'+
'<span class="fa fa-check-square-o fa-lg"></span>'+
'<span class="fa fa-square-o fa-lg"></span>'+
'<span class="content">'+synonyme+'</span>'+
'</label>'+
'</div>');
}
}
},
});
return False;
}
});
I didn't make any reload, but the navigator keeps reloading after calling the api (when I click on Generate synonyms button)
Get rid of the <form> altogether. Its behaviour messes with your code. Just use a <div>.
This should fix your issue.
<input type="text" class="question" />
<button class="gen-syn">Generate synonyms</button>
<input type="submit" value="Save"/>
you need only one button to make a API call and then your JS code is creating dynamic div and other elements to show the synonyms.
Hope this helps.
I am new to d3 and am trying to create a function to dynamically add a certain number of text boxes to an html form, but have not been sucessful. Here is my code. What is the issue?
for (i=0;i<numLines;i++){
var div = document.getElementById('user-input');
div.innerHTML += '<input id="textfield_"+i type="text" value="text_"+i>';
}
Here is the html code:
<div id="container-exp">
<div id="Stage 2">
<center>
<button type="button" id="show-example" value="show-example" class="btn btn-primary btn-lg example"">
Show Example
</button>
</center><br/><br/>
<div class="col-xs-2">
</div>
<div id="passage"></div>
Fill out the below with the information in the above passage. To see an example, please click the button "Show example" above.
</div id="user-input">
<div class="col-xs-2">
<button type="button" id="next" value="next" class="btn btn-primary btn-lg continue">
Next <span class="glyphicon glyphicon-arrow-right"></span>
</button>
</div>
Your code looks fine. I executed it in a jsfiddle, and it created the elements. There must be some other issue.
I tried both cases where user-input element is a <div> as well as a <form>. It worked in both cases.
While we are it, and you can ignore this - You can make some modifications to the code like this:
var elements = "";
for (i = 0; i < 5; i++){
// this is what I assume what you were trying to do in the code
elements += "<input id='textfield_" + i + "'' type='text' value='text_" + i + "''>";
// this is cleaner way, but not supported in older browsers
elements += `<input id='textfield_${i}' type='text' value='text_${i}'>`;
}
var div = document.getElementById('user-input');
div.innerHTML += elements;
In case you want to do it with d3 here is an example
var numlines = 10;
d3.select("#user-input").selectAll(".dummy")
.data(d3.range(numlines))
.enter()
.append("input")
.attr("id", i => `textfield_${i}`)
.attr("type", "text")
.attr("value", i => `text_${i}`);
<script src="https://d3js.org/d3.v5.js"></script>
<div id="passage"></div>
Fill out the below with the information in the above passage. To see an example, please click the button "Show example" above.
<div id="user-input">
<div class="col-xs-2">
<button type="button" id="next" value="next" class="btn btn-primary btn-lg continue">
Next <span class="glyphicon glyphicon-arrow-right"></span>
</button>
</div>
</div>
I have the following directive:
template: '<form novalidate class="form-inline" ng-submit="submit($event, building)">' +
'<div class="form-group">' +
'<label class="form-control-static">{{label}}</label>' +
'</div>' +
'<div class="form-group">' +
'<input name="input" class="form-control" type="text" ng-model="model" />' +
'</div>' +
'<input class="btn btn-default" type="submit" value="Submit" />' +
'</form>',
scope: {
label: "#",
building: "=",
model: "=",
//type: "=",
},
Right now I have to write something like this in the HTML:
<building-field label="name" building="building" model="building.name"></building-field>
I would like to simply it by just needing to add the building and the label (and then put them together inside the directive ng-model="building.name):
<building-field label="name" building="building"></building-field>
The problem is, I don't know how to pass two directive scopes and like them as obj.prop. How to do this?
You don't have anything special to do, obj.prop is supported. In your template:
<input name="input" class="form-control" type="text" ng-model="building[label]" />
As a side note, you are binding label with a interpolation (type #). This means that as is, you will always have the string "name" in scope.label. If you want to actually pass the value of name, you need to use double curly brackets:
<building-field label="{{name}}" building="building"></building-field>