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.
views.py:
def device_add(request):
if request.method == "POST":
device_frm = DeviceForm(request.POST)
dd_form = DeviceDetailForm(request.POST)
di_formset = inlineformset_factory(Device, DeviceInterface, fields=('moduletype', 'firstportid', 'lastportid'),widgets={ 'firstportid':TextInput(attrs={'placeholder': 'e.g. TenGigabitEthernet1/0/1'}), 'lastportid':TextInput(attrs={'placeholder':'eg. TenGigabitEthernet1/0/48'})},extra=1,max_num=3, can_delete=False)
di_form=di_formset(request.POST)
if device_frm.is_valid():
# Create and save the device
# new_device here is the newly created Device object
new_device = device_frm.save()
if dd_form.is_valid():
# Create an unsaved instance of device detail
deviceD = dd_form.save(commit=False)
# Set the device we just created above as this device detail's device
deviceD.DD2DKEY = new_device
deviceD.save()
if di_form.is_valid():
deviceI=di_form.save(commit=False)
print(deviceI)
for instances in deviceI:
instances.I2DKEY=new_device
instances.save()
return render(request, 'interface/device_added.html',{'devices':Device.objects.all()})
return render(request,'interface/device_add.html',{'form':device_frm, 'dd_form': dd_form, 'di_form':di_form})
return render(request,'interface/device_add.html',{'form':device_frm, 'dd_form': dd_form, 'di_form':di_form})
return render(request,'interface/device_add.html',{'form':device_frm, 'dd_form': dd_form, 'di_form':di_form})
else:
device_frm = DeviceForm()
dd_form = DeviceDetailForm()
di_formset = inlineformset_factory(Device, DeviceInterface, fields=('moduletype', 'firstportid', 'lastportid'), widgets={ 'firstportid':TextInput(attrs={'placeholder': 'e.g. TenGigabitEthernet1/0/1'}), 'lastportid':TextInput(attrs={'placeholder':'eg. TenGigabitEthernet1/0/48'})},extra=1, max_num=3, can_delete=False)
di_form=di_formset(queryset = DeviceInterface.objects.none())
return render(request,'interface/device_add.html',{'form':device_frm, 'dd_form': dd_form, 'di_form':di_form})
HTML:
{{di_form.management_form}}
<div id = "rowAddition">
{% for form in di_form %}
<div>
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="{{di_form.moduletype.id_for_label}}">Module Type<span
class="text-danger">*</span></label>
{{form.moduletype}}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="{{di_form.firstportid.id_for_label}}">First Port ID<span
class="text-danger">*</span></label>
{{form.firstportid}}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="{{di_form.lastportid.id_for_label}}">Last Port ID <span
class="text-danger">*</span></label>
{{form.lastportid}}
</div>
</div>
</div>
</div>
{%endfor%}
<div id="empty-form" style="display: none;">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="{{dd_form.moduletype.id_for_label}}">Module Type<span
class="text-danger">*</span></label>
{{di_form.empty_form.moduletype}}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="{{di_form.firstportid.id_for_label}}">First Port ID<span
class="text-danger">*</span></label>
{{di_form.empty_form.firstportid}}
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="{{di_form.lastportid.id_for_label}}">Last Port ID <span
class="text-danger">*</span></label>
{{di_form.empty_form.lastportid}}
</div>
</div>
<div class="col-md-1">
<div class="form-group">
<div class="text-sm-center">
<br />
<button type="button" class="btn btn-outline-danger btn-rounded"
id="removerow" style="display: none;" data-toggle="modal"><i class="dripicons-
minus" ></i></button>
</div>
</div>
</div>
<!--more rows-->
<div id='morerows'></div>
Script:
let changeFlag=0;
let maxrow = $('#id_deviceinterface_set-MAX_NUM_FORMS').attr('value');
let totalForms = $('#id_deviceinterface_set-TOTAL_FORMS').val();
console.log(maxrow)
console.log(totalForms)
$('#deleteConfirmation').modal('hide');
function portidChange(val) {
changeFlag = 1;
if (val =="")
changeFlag = 0;
}
$('#addrow').click(function () {
let totalForms = $('#id_deviceinterface_set-TOTAL_FORMS').val();
console.log(totalForms)
$('#empty-form #removerow').css('display','block');
let wholerowclone = $('#empty-form').clone();
$('#morerows').append(wholerowclone.html().replace(/__prefix__/g, totalForms));
$('#id_form-TOTAL_FORMS').attr('value', (parseInt (totalForms))+1);
changeFlag=0;
if(totalForms==maxrow) {
$('#addrow').attr("disabled", true);
$('#addrow').attr("class","btn btn-rounded btn-danger");
$('#addrow i').attr("class","");
$('#addrow').html("Reached max limit");
}
})
$(document).on('click', '#removerow', function () {
let totalForms = $('#id_deviceinterface_set-TOTAL_FORMS').val();
console.log(totalForms + " total forms");
let actualformcount = totalForms-1;
if(changeFlag==1) {
console.log("changeFlag=1");
$('#removerow').attr('data-target', '#deleteConfirmation')
$('#deleteConfirmation').modal('show');
$('#removerowConfirmed').click(function () {
console.log("clicked")
$('#removerow').closest('#morerows.row').remove();
$('#deleteConfirmation').modal('hide');
if(actualformcount < maxrow) {
$('#addrow').attr("disabled", false)
$('#addrow').attr("class","btn btn-outline-success btn-rounded")
$('#addrow i').attr("class","dripicons-plus")
$('#addrow').html("+")
}
})
}
else {
console.log("ChangeFlag 0");
$('#id_deviceinterface_set-TOTAL_FORMS').attr('value', (parseInt (totalForms))-1);
$(this).closest('#morerows .row').remove();
if(actualformcount < maxrow){
$('#addrow').attr("disabled", false)
$('#addrow').attr("class","btn btn-outline-success btn-rounded")
$('#addrow i').attr("class","dripicons-plus")
$('#addrow').html("+")
}
}
});
I have this set of codes that is intended to control the number of form created from inline using a button. This is working out perfectly well. But when it comes to saving, if i were to delete something. I can only delete the last cloned row and all the rest of the data which is not deleted are saved. But if i delete a cloned row that is in the middle, the data saved goes haywire. For example my code allow cloning of 3 times. So with clone + original = 4. If i were to delete a row in the middle. Lets say row 1(1st clone). It saves the original(correct), never save the 1st clone (correct), saves the 3rd row (correct) and somehow last row data is lost. Can anyone advise me what to do? I have been stuck here for 3 days already.
One more problem: Notice this a few days ago. Because i set the view to refresh the page with the details if any field is key in wrongly, any cloned rows with the - button disappears. Can anyone explain to me why is this happening?
I'm doing a page where i display some labels and input text field so the user can introduce some data and send it back to the server. But sometimes the server send back more than 50 rows of information. In this case the user need to scoll multiple times in order to see all the fields. I want to create 2/3 divs and each contains maybe ~20 fields so that all fields can be displayed without scrolling. Any idea?
Here is my code
<div class="container">
<div class="row">
<f:view>
<h:form>
<h:dataTable value="#{Message.bits}" var="bit">
<h:column>
<div class="col-lg-4">
<h:outputText value="#{bit.id} #{bit.name}" />
<div class="input-group">
<h:inputText styleClass="form-control" size="100"
maxlength="100" value="#{bit.value}" />
</div>
</p>
</div>
</h:column>
</h:dataTable>
</h:form>
</f:view>
</div>
</div>
Class Message -> A container of bits. It is a bean manager
#ManagedBean
#ViewScoped
public class Message implements Serializable {
/**
*
*/
private static final long serialVersionUID = 2712306195992874273L;
private List<Bit> bits = null;
public List<Bit> getBits() {
return bits;
}
//Do more things
Bit class
public class Bit implements Serializable {
/**
*
*/
private static final long serialVersionUID = -6341896264030346040L;
private String name = null;
private String value = null;
private int id = 0;
//Business logic
I can use html, css, any js framework, jsp,java.
Thanks for your time.
If I got your question right, you want to display your data like this:
1 4 7
2 5 8
3 6 9
Instead of this:
1
2
3
4
5
..
I don't know if this is the best solution but it works for me.
You can try the code below.
<div class="row">
<ui:repeat var="bit" value="#{message.bits}" varStatus="bitstatus">
<h:outputText escape="false" value="<div class='col-lg-4'>" rendered="#{(bitstatus.index + 1) % 20 eq 1}" />
<h:outputText value="#{bit.id} #{bit.name}" />
<div class="input-group">
<h:inputText styleClass="form-control" size="100" maxlength="100" value="#{bit.value}" />
</div>
<h:outputText escape="false" value="</div>" rendered="#{(productstatus.index + 1) % 5 eq 0}" />
</ui:repeat>
</div>
I'm new to MVC5 and especially to using Bootstrap. I'm trying to create a website in which the first page should feature a grid with student images. Right now it looks like this. I want to have 5 images per row, but I haven't manage to figure out how(it was either 4, or 6).
Also when there is no space between the rows and the images stuck together.
I am populating the grid with items from my Student Model.
<div class="col-md-10">
<div class="row">
#foreach (var item in Model.Students)
{
<div class="col-md-2">
<a href="#Url.Action("Edit", "Students", new {studentId = item.StudentId})">
<img src="../../#item.ProfileImagePath" alt="Profile Image" />
</a>
</div>
}
</div>
</div>
I didn't fully understand how does the bootstrap grid work, especially when I'm populating it with dynamic data. The website looks like this now
http://imgur.com/5fLRZeM
You have
<div class="row">
#foreach (var item in Model.Students)
{
<div class="col-md-2">
...
</div>
}
</div>
Which generates one long <row>. But there is no auto-wrapping, you'll have to break this up into rows yourself.
Assuming that Students is a List<>
// roughly, untested
#for(int r = 0; r < Model.Students.Count; r += 5)
{
<div class="row">
#for (int s = r; s < r+5; s += 1)
{
<div class="col-md-2">
// do stuff with Model.Students[s]
</div>
}
</div>
}
i try without luck to insert 6 images into 2 lines,
the problem is that the line number 2 break the last 2 images and push them down.
i'm using Umbraco and bootstrap 3.
here is my code
#inherits Umbraco.Web.Mvc.UmbracoTemplatePage
#{
Layout = "InnerPage.cshtml";
}
#section slider
{
#{Html.RenderPartial("ImageSlider");}
}
#{
<!-- PROGRAM PAGE -->
<script src="js/script.js"></script>
<div class="caption-button caption-gray left-top" style="font-size:14px;">UPCOMING EVENTS</div>
<div class="padding-top-60">
<div class="row row-lg-height">
<div id="eventCarousel" class="carousel slide vertical" >
<div class="carousel-inner">
#{
var content = Umbraco.Content(1122);
int itemsCount = content.Children.Count();
int sliders = itemsCount / 6;
for (int i = 0; i <= sliders; i++)
{
var items = content.Children;
if (i == 0)
{
#Html.Raw("<div class=\"item active\">")
items = content.Children.Take(6);
}
else
{
items = content.Children.Skip(i * 6).Take(6);
#Html.Raw("<div class=\"item\">")
}
foreach (var childContent in items)
{
var contentService = ApplicationContext.Current.Services.ContentService.GetById(int.Parse(childContent.Id.ToString()));
var title = childContent.Name.ToString();
var image = Umbraco.Media(contentService.Properties["Thumbnail"].Value.ToString());
var description = contentService.Properties["shortDescription"].Value.ToString();
var img = image.Url.ToString();
<div class="col-lg-4">
<img src="#image.Url" class="media-object pull-left img-responsive" />
<h1 class="media-heading" style="color:#606060;">#title</h1>
<div style="padding:0px 5px; ">#MvcHtmlString.Create(#description)</div>
</div>
}
#Html.Raw("</div>")
}
}
</div>
</div>
</div>
</div>
<a class="caption-button caption-red right-bottom" href="#eventCarousel" data-slide="next">MORE</a>
}
i attached 2 images so you can see what firebug showing to me and what happened on the screen.
PLEASE HELP ME ! I am breaking my head 2 days already and it's wasting my time..
What do i do wrong ??
I think your code is a littlebit difficult. If you use another approach you will be able to debug much easier.
Try some approach like this:
#{
var allNodesToLoop = Umbraco.Content(1122).Children;
}
#foreach(var nodegroup in allNodesToLoop.InGroupsOf(2) {
<div class="row">
#foreach(var item in nodegroup) {
<div class="col-md-4">
#item.Name
<!-- and other stuff you want to render in this grid cell -->
</div>
}
</div>
}