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.
Related
I'm creating function where user will insert number of value. And additional div of input will appear based the number of value of user have input previous div.
example
Insert number of user : `2`
Additional input based on number of user input
name :
name :
If user put 3 there will be 3 name and if user change it into 2 there will be 2 name.
How do I fix it in order to achieve the example that I want.
$('#user').hide();
$("#user_num").change(function()
{
$("#user").remove();
let m = $(this).val();
for (var i = 0; i < parseInt(m); i++){
$('#user').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="info">
<div class="col-lg-12 mb-30">
<label><b><span style="color:#e60000;">*</span><i>Insert number of user </i></b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="number" placeholder="2" id="user_num" required >
</div>
</div>
<div class="col-lg-12 mb-30" id="user">
<label><b><span style="color:#e60000;">*</span><i> Name </i></b></label><br>
<div class="input-group-prepend">
<input class="from-control" type="text" id="name" required >
</div>
</div>
</div>
You where close to achieve it with your attempt. You needed to implement an event handler that executes a function when the input field value is changed. You can achieve this with .on('change', function(){ // do something })
Every time the function is executed it clears the html inside <div id="inputs-container"></div> and the loop appends html code to that div n times.
Try the following snippet
$('#in').on('change', function(){
let n = $(this).val()
let html_code = 'name: <input value="" style="margin-top:5px"><br>';
$('#inputs-container').html('');
for (var i = 0; i < n; i++){
$('#inputs-container').append(html_code);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="info" style="margin:10px">
Insert number of users: <input id="in" value="" />
<div id="inputs-container" style="margin-top:20px">
</div>
</div>
Note: I updated the jQuery CDN to the latest one. You where using an
older version.
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);
}
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 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/
http://i.stack.imgur.com/o2Kht.png
Basically I want these buttons to be side by side.
I've put them in a container but I cannot get them side by side like the example below.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"> <!-- Linking Style Sheets -->
</head>
<body>
<style type="text/css">
<!-- Background image -->
</style>
<div class="img-wrapper-center" id="titlebar">
<img src="titlebar.png" id="img1"/>
</div>
</div>
<div id="bodycontainer">
<div id="text">
Welcome to the shop, you can add your items to to the cart below
</div>
<div id="formcontainer">
<div id="myForm">
<form name="theForm" action="shop.html" method="post" onSubmit="return checkWholeForm(theForm)">
<input type="radio" name="ram" value="yes">yes<br>
<input type="radio" name="ram" value="no">no
<br><br>
<input type="radio" name="cpu" value="yes">yes<br>
<input type="radio" name="cpu" value="no">no
<br><br>
<input type="radio" name="harddrive" value="yes">yes<br>
<input type="radio" name="harddrive" value="no">no
<br><br>
</div>
<div id="submitbuttons">
<input type="submit" value="Submit">
<input type="reset">
</div>
</div>
</form>
<div id="buttoncontainer">
<div class="homebtn">
<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/>
</a>
<div class="shopbtn">
<a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()"><img name="shopbtn" src="shopbuttonup.png"/>
</a>
</div>
</div>
</body>
<!-- Start of rollover script -->
<script>
Rollimage = new Array()
Rollimage[0]= new Image(121,153)
Rollimage[0].src = "homebuttonup.png"
Rollimage[1] = new Image(121,153)
Rollimage[1].src = "homebutton.png"
function SwapOut() {
document.homebtn.src = Rollimage[1].src;
return true;
}
function SwapBack() {
document.homebtn.src = Rollimage[0].src;
return true;
}
Rollimageshop = new Array()
Rollimageshop[0]= new Image(121,153)
Rollimageshop[0].src = "shopbuttonup.png"
Rollimageshop[1] = new Image(121,153)
Rollimageshop[1].src = "shopbutton.png"
function SwapOutshop() {
document.shopbtn.src = Rollimageshop[1].src;
return true;
}
function SwapBackshop() {
document.shopbtn.src = Rollimageshop[0].src;
return true;
}
</script>
<!-- end of rollover script -->
<!-- Start of form validation -->
<script>
function checkWholeForm(theForm) {
var reason = '';
reason += checkRadioButtons(theForm.ram);
if (reason != '') {
alert(reason);
return false;
}
return true;
}
function checkRadioButtons(radiobuttons) {
var checkvalue = "";
var i=0;
var error = "";
var amountOfRadioButtons = radiobuttons.length;
for (i=0; i<amountOfRadioButtons; i++) {
if (radiobuttons[i].checked) {
checkvalue = theForm.ram[i].value;
}
}
if (!(checkvalue)) {
error = "Please choose an option for RAM.\n"
}
return error;
}
</script>
<!-- End of form validation -->
Sorry for delay, rofl im new to adding code to this so i did not know how to ident it.
.homebtn, .shopbtn{
display:inline; /*or inline-block*/
}
I made a jsfiddle here using images from google image search because I don't have access to your images, but the css should be quite similar for your own uses.
You should also fix your html for the button container
<div id="buttoncontainer">
<div class="homebtn">
<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()">
<img name="homebtn" src="homebuttonup.png"/>
</a>
</div>
<div class="shopbtn">
<a href="shop.html" onmouseover="SwapOutshop()" onmouseout="SwapBackshop()">
<img name="shopbtn" src="shopbuttonup.png"/>
</a>
</div>
</div>
You currently have one button nested inside of the other.
Looking at your code, I can spot a few areas that can be improved.
First, you're using JavaScript to handle the button rollovers. Unless there is a specific reason to be doing this, it isn't necessary. A more efficient way to do this would be to use pure CSS for the button rollovers.
Second, you have the images embedded in the link itself:
<a href="..\home.html" onmouseover="SwapOut()" onmouseout="SwapBack()"><img name="homebtn" src="homebuttonup.png"/>
</a>
If you were to actually use CSS based navigation, you wouldn't need to do this. The benefit is less code and ultimately page size and load time. Keep in mind, every image loading is a separate HTTP Request to the server. This equals more bandwidth in the long run. Your website may not be effected by this type of stuff, but it's good practice; best practices.
I have created a JSFiddle to show you how I would approach your navigation. One other thing I would add is putting all of the navigation imagery into a Sprite.
http://jsfiddle.net/cbPRv/