I am having some problem with my code. Iam trying to delete a "joke" from a list but it always takes out the joke that i typed in before the joke i am deleting. I don't quite get what i am doing wrong here.
delJoke(index) {
this.setList.splice(index,1);
this.viewJoke = {};
console.log(this.setList.splice);
},
<div class="col list-group-item" v-for="(view, index) in viewJoke" :key="index">
<div class="col">Joke: {{view.joke}} </div>
<div class="col"> Punchline: {{view.punchline}}</div>
<div class="col">Category: {{view.category}}</div>
</div>
<button type="button" class="btn btn-dark" active href="#" v-for="joke in viewJoke"
#click="delJoke(index)"></button>
try to pass joke object into function, and find index
delJoke(joke) {
var index = this.setList.indexOf(joke)
... your code
}
your delete button must be inside the v-for.
and the delete function should look like this
delJoke(index) {
this.viewJoke = this.viewJoke.splice(index,1);
}
Related
I am trying to run the searchSQL query with the input from the searchbar after pressing the button. The 'sql' query runs on start.
When pressing the button it won't update the images according to the input from the search?
#using WebMatrix.Data
#{
var db = Database.Open("MTGDecks");
var sql = "SELECT * FROM Cards WHERE isPopular <> 0";
var searchSQL = "SELECT * FROM Cards WHERE cardName LIKE CONCAT ('%', #0, '%')";
var searchValue = Request.Form["searchBox"];
if (IsPost)
{
var searching = db.Query(searchSQL, searchValue);
}
var output = db.Query(sql);
}
<link href="~/Content/Site.css" rel="stylesheet" />
<h2>All Cards</h2>
<form method="post" action="/Home/Index">
<input type="text" name="searchBox" />
<button type="submit" class="btn">Search</button>
Make New Deck
<div class="row">
<div class="row justify-content-center">
#foreach (var row in output)
{
<div class="col-4">
<div class="card">
<img src="#row.imageURL" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">#row.cardName</h5>
<p class="card-text">#row.oracleText</p>
Details
</div>
</div>
</div>
}
</div>
</div>
</form>
I'm unsure of what to do.
ok, going out on a limb here... your "button" is the href that redirects you to the details of the #row.cardID
In your code block you have it set up to do some stuff, but you never actually call it... If I were doing this in Blazor (razor syntax) the solution would be something like
#page "/myPage/{int: cardID}
HTML HERE
//Pseudocode, don't copy/paste
#code
{
public override void OnParametersSet ()
{
if (cardID != null)
Run The COde!!
}
}
So, basically, you're missing wiring up some kind of page event. There's a TON wrong with everything you're doing, but... hopefully this will get you to the next logical question.
I have various lists and inside those lists I've list of checkboxes and I've show more/less functionality.
Now, everything works fine but I want to convert some logic to one liner, tried various ways but didn't work so posting here.
Here is HTML part, and assume I have multiple lists like this.
<div id="list-special-needs">
<h4 class="filter-header">Special Needs</h4>
#foreach (var item in specialNeeds)
{
<div class="am-checkbox" style="padding: 3px 0;">
<input id="chk-special-needs-#item.ToLower()" name="special-needs" value="#item" type="checkbox" class="schedulerepeat-checkbox" onclick="return prepareSearchParams()" />
<label for="chk-special-needs-#item.ToLower()" class="margin-h-10 mobile-padding">#item</label>
</div>
}
<p onclick="return loadMore(this, 'list-special-needs', '#specialNeeds.Length')" class="show-more">Show more...</p>
</div>
<div class="clearfix"></div>
Js:
<script type="text/javascript">
PageEvent.add(PageEvent.AFTER_INIT, function () {
$("#list-services .am-checkbox").slice(5).hide();
$("#list-timing .am-checkbox").slice(5).hide();
$("#list-special-needs .am-checkbox").slice(5).hide();
$("#list-neighborhoods .am-checkbox").slice(5).hide();
});
function loadMore(element, listId, length) {
var listSelector = $(`#${listId} .am-checkbox`);
var isShowMore = $(element).text() == 'Show more...';
if (isShowMore) {
//..show more
$(element).text('Hide...');
listSelector.slice(0, length).slideDown();
} else {
//..hide
$(element).text('Show more...');
listSelector.slice(5).slideUp();
}
}
</script>
and I just want to convert this into one liner.
$("#list-services .am-checkbox").slice(5).hide();
$("#list-timing .am-checkbox").slice(5).hide();
$("#list-special-needs .am-checkbox").slice(5).hide();
$("#list-neighborhoods .am-checkbox").slice(5).hide();
Although I tried this, but it didn't work.
$("#list-services .am-checkbox, #list-timing .am-checkbox ..").slice(5).hide();
Any help would be really appreciated.
You should work with each one of them separately. So from your code:
$("#list-services .am-checkbox, #list-timing .am-checkbox ..").slice(5).hide();
We can take that and loop through and attack each one with
Array.from($("#list-services .am-checkbox, #list-timing .am-checkbox ..")).forEach(elem => {elem.slice(5).hide());
Although I'd suggest adding a class to each one of the blocks with te list-... IDs, so the code is nicer and go with:
Array.from($(".list-block .am-checkbox")).forEach(elem => {elem.slice(5).hide());
Create array of your elements with id's, then for each search for that same class and do stuff...
[...$("#list-services"), ...$("#list-timing"), ...$("#list-special-needs"), ...$("#list-neighborhoods")].forEach(el => {
$(el).find(".am-checkbox").slice(5).hide()
})
"need something more elegant"
Beauty is in eye of the beholder, is this one pretty enough?
[...document.querySelectorAll("#list-services, #list-timing, #list-special-needs, #list-neighborhoods")].forEach(el => $(el).find(".am-checkbox").slice(5).hide())
[...document.querySelectorAll("#list-services, #list-timing, #list-special-needs, #list-neighborhoods")].forEach(el => $(el).find(".am-checkbox").css("color", "red"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="list-services">
<div class="am-checkbox">1</div>
</div>
<div id="list-timing">
<div class="am-checkbox">2</div>
</div>
<div id="list-special-needs">
<div class="am-checkbox">3</div>
</div>
<div id="list-neighborhoods">
<div class="am-checkbox">4</div>
</div>
im trying to create a delete button on one side of a word that i get from the data base and i cant figure out how to do it
I already delete the word but i have to use a input form on the html and i have to write by hand the word i that i want to delete, but this is no god for user experience, so thats why im seeking that X button
this is my html
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Hashtags</h4>
<h6 class="card-subtitle">Hashtags <code> uno</code> agregar.</h6>
<div class="row button-group">
<div class="col-lg-2 col-md-4" *ngFor="let hash of getHashtag">
<form [formGroup]="form" (ngSubmit)="onDelet(form.value)">
<button class="ti-close" type="submit"></button >
<input type="text" formControlName="hashtag" > {{hash}} <br>
<p id="competitors" > {{hash}}</p>
</form>
</div>
</div>
</div>
</div>
<div class="card">
this is my componet file:
public onDelet(){
this._getHashtag.deleteHashtag(this.form.value.hashtag).subscribe(
result =>{
// console.log(result)
this._getHashtag.getHashtag().subscribe(
resultado =>{
this.getHashtag = resultado
this.getHashtag = this.getHashtag.result
// console.log("Resultado", this.getHashtag)
},
error => {
var mensajeError = <any>error;
}
);
}
)
}
this is my service component:
deleteHashtag(hastagdel:string){
let header = new Headers({"Content-Type":"application/json"})
return this._http.post(this.url + "/removeHashtags" ,{hashtags:[hastagdel]}, {withCredentials:true})
}
I'm pretty sure you want to use http.delete, not http.post in your service.
http.post adds something to the db,
http.delete removes something,
http.put modifies something, and
http.get retrieves something from the db.
There are other http options, but those are the main ones.
I am trying to create a dynamic error card, with different error messages and with a retry button.
Here is a snippet of my typescript object:
errorCard: any = [];
if(error){
this.errorCard.errorMessage = "oops try again"
this.errorCard.buttonFunc = "retry()";
}
Now this is my view:
<div class="card-block">
<div class="card-media-block wrap">
<div class="card-body">
<span class="card-media-title">
{{errorCard.errorMessage}} // works as expected
</span>
...
<div class="card-footer">
//this click is where I would like it to call the function that is tied to that property in this case retry()
<button (click)="errorCard.buttonFunc"><i class="fas fa-redo-alt"></i> Retry</button>
</div>
I do not receive any errors in the console with this, and the function does not get triggered.
I thank you guys in advance for your help!
Assuming that your Component is something like this:
import { Component } from '#angular/core';
#Component({...})
export class YourComponent {
errorCard = {};
...
retry() {
console.log('Retry Got Called');
}
}
Why don't you simply call the retry method like this(<button (click)="retry()">Retry</button>):
<div class="card-block">
<div class="card-media-block wrap">
<div class="card-body">
<span class="card-media-title">
{{errorCard.errorMessage}} // works as expected
</span>
...
<div class="card-footer">
//this click is where I would like it to call the function that is tied to that property in this case retry()
<button (click)="retry()"><i class="fas fa-redo-alt"></i> Retry</button>
</div>
</div>
</div>
</div>
Give this Working Sample StackBlitz a try.
I am trying to clone elements when clicking a button. I was trying to use ko.toJS. On page load it works fine, but when I want clone the items, it is unable to bind the items (like, value, Text, etc.).
Here is the HTML:
<div class="stockItems-inner" data-bind="foreach: StockItems">
<div data-bind="if: Type=='Input'">
<div class="stock_container_input">
<input type="text" data-bind="value: Value" />
</div>
</div>
<div data-bind="if: Type=='Radio'">
<div class="stock_container_control">
<div data-bind="foreach: Options">
<div class="stockLbl">
<input type="radio" data-bind="text: Text, checked:$parent.Value, attr:{'id':Id, 'name': $parent.Text, 'value': Value}" />
<label data-bind="attr:{'for':Id}, text: Text"></label>
</div>
</div>
</div>
</div>
</div>
<div class="addItem">
<button type="button" data-bind="click: CloneItem"><img src="images/add.png" alt="" /></button>
</div>
The View Model:
ConfigurationStockViewModel = function() {
var self = this;
this.StockItems = ko.observableArray();
this.ApplyData = function(data){
self.StockItems(data.Items);
}
this.CloneItem = function(StockItems){
self.StockItems.push(ko.toJS(StockItems));
};
};
When clicking the button, an error is thrown: Unable to process binding. I am using JSON data for binding.
Not exactly sure what end result you want without working code, but sounds like you want to clone the last item in array and add to array?
If so, I think you have an error - your add button click binding will never pass anything to the function you defined, since it is outside the foreach. You need something like this:
this.CloneItem = function() {
var toClone = self.StockItems()[self.StockItems().length - 1]
self.StockItems.push(toClone);
};
Here is a simplified example without radio buttons, etc:
http://jsfiddle.net/5J47L/