I am new and practising. So, I am sure I am not doing this the best way possible.
I am trying to get the product data to show if there is data, but if there isn't any data, I want the button to be hidden. In the DB, only about 40% actually have product data.
foreach ($part->results as $index=>$row){
echo ' Add to Cart
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Info
</button>
<div class="dropdown-menu">
<a class="btn btn-info " href="./media/products/product_data/'.$row["product_data"].'" target="_blank"class="btn btn-info"> Details </a>
</div>'
Use CSS and classes to show / hide elements on the page.
In the css:
.hidden {
display: none;
}
Then you can echo this via php:
foreach ($part->results as $index=>$row){
$hidden = empty($row["product_data"]) ? ' hidden' : ''; //determine if hidden needs to be added or not
echo ' Add to Cart
<div class="btn-group">
<button type="button' . $hidden . '" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Info
</button>
<div class="dropdown-menu">
<a class="btn btn-info " href="./media/products/product_data/'.$row["product_data"].'" target="_blank"class="btn btn-info"> Details </a>
</div>'
...
You're probably looking for the empty() function. I cleaned your code a bit, but it would look something like this:
<?php foreach ($part->results as $index=>$row) : ?>
Add to Cart
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Info</button>
</div>
<?php if (!empty($row["product_data"])): ?>
<div class="dropdown-menu">
<a class="btn btn-info " href="./media/products/product_data/>
<?= $row["product_data"]; ?>" target="_blank"class="btn btn-info">Details</a>
</div>;
<?php endif; ?>
<?php endforeach; ?>
This would not output the <div class="dropdown-menu"> section for any that were missing product-data. You could move the if-condition somewhere else to omit other output.
If you want to skip the whole row, use continue in your existing code:
foreach ($part->results as $index=>$row){
// this will skip the loop whenever product-data is missing
if(empty($row["product_data"]))
continue;
echo ' Add to Cart
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Info
</button>
</div>
<div class="dropdown-menu">
<a class="btn btn-info " href="./media/products/product_data/'.$row["product_data"].'" target="_blank"class="btn btn-info"> Details </a>
</div>'
?>
If you still want output and then hide it with CSS, #JackofSpades has the right answer.
Related
A part of source code on a specific site looks like this:
.
.
.
<div class="list-group-item">
<strong>item 1</strong>
description
<a class="btn btn-default btn-xs pull-right listing-sub-remove"
data-id="5e98a2dc5e0aye57597b181b">
Unsubscribe
</a>
</div>
<div class="list-group-item">
<strong>item 2</strong>
description
<a class="btn btn-default btn-xs pull-right listing-sub-remove"
data-id="5e58ac128edaey3f2935d94b">
Unsubscribe
</a>
</div>
.
.
.
How do I grab each data-id value?
I tried
$('.list-group-item').each(function(){
var text = ($(this).text());
console.log(text);
});
But it returns item 1(2), description and Unsubscribe text.
I also tried
$('.btn btn-default btn-xs pull-right listing-sub-remove').each(function(){
var text2 = ($(this).text());
console.log(text2);
});
But this doesn't work at all.
What command should I use to grab data-id values successfully?
You could do it like this:
$(document).ready(function() {
$(".btn.btn-default.btn-xs.pull-right.listing-sub-remove").each(function() {
console.log($(this).data("id"));
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group-item">
<strong>item 1</strong>
description
<a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e98a2dc5e0aye57597b181b">
Unsubscribe
</a>
</div>
<div class="list-group-item">
<strong>item 2</strong>
description
<a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e58ac128edaey3f2935d94b">
Unsubscribe
</a>
</div>
Is this what you're looking for?
// We gather ALL elements with '.list-group-item' class
var elements = $(".list-group-item");
// We iterate over each element in the array of elements
$.each(elements, function(index, element) {
// We create a variable that takes the child link anchor [a tag], and grabs the data-id attribute from it
var dataId = $(element).find("a")[0].dataset.id;
// If the variable is not undefined, it will console log the result
if (dataId) { console.log(dataId); };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list-group-item">
<strong>item 1</strong> description
<a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e98a2dc5e0aye57597b181b">
Unsubscribe
</a>
</div>
<div class="list-group-item">
<strong>item 2</strong> description
<a class="btn btn-default btn-xs pull-right listing-sub-remove" data-id="5e58ac128edaey3f2935d94b">
Unsubscribe
</a>
</div>
.
I have a btn-group with some buttons, each of which will lead to a different page. The btn-group will be visible on every page.
Here is the html for the btn-group,
<div class="btn-group-lg text-center" role="group" aria-label="Basic example">
<a class="btn btn-outline-primary" href="" role="button">Home</a>
<a class="btn btn-outline-primary" href="view_schedule/" role="button">Schedule</a>
<a class="btn btn-outline-primary" href="view_syllabus/" role="button">Syllabus</a>
<a class="btn btn-outline-primary" href="view_records/" role="button">Records</a>
<a class="btn btn-outline-primary" href="view_achievements/" role="button">Achievements</a>
<a class="btn btn-outline-primary" href="view_gallery/" role="button">Gallery</a>
<a class="btn btn-outline-primary" href="view_contact/" role="button">Contact</a>
<a class="btn btn-outline-primary" href="about/" role="button">About Us</a>
</div>
But whenever I press a button, it modifies the URL in the address bar.
Example:- From http://127.0.0.1:8000/shotokankaratebd/, if I press the Schedule button, it changes the URL to http://127.0.0.1:8000/shotokankaratebd/view_schedule.
After that, if I press the schedule button again, it changes it to http://127.0.0.1:8000/shotokankaratebd/view_schedule/view_schedule which is an invalid URL and I get an error.
How can I write it so that whenever a button is pressed, only the part after http://127.0.0.1:8000/shotokankaratebd/ is affected?
EDITED to include the new hrefs:
<a class="btn btn-outline-primary" href="../shotokankaratebd/" role="button">Home</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_schedule/" role="button">Schedule</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_syllabus/" role="button">Syllabus</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_records/" role="button">Records</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_achievements/" role="button">Achievements</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_gallery/" role="button">Gallery</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/view_contact/" role="button">Contact</a>
<a class="btn btn-outline-primary" href="../shotokankaratebd/about/" role="button">About Us</a>
You should not hard code your urls. Use django's url template tag to fetch urls for your views.
If your urls are leading to another view or another app's view, you should use django feature of using dynamic urls.
For example if you have a view view_schedule, you should give it a name in urls.py like
urlpatterns = [
...
path('shotokankaratebd/view_schedule/', views.name_of_your_view, name=view_schedule),
...
]
and whenever and whichever template if you want to access this view you can just type
template.html
<button>Schedule</button>
instead of
class="btn btn-outline-primary" href="/shotokankaratebd/view_schedule/" role="button">Schedule</a>
Hard Coding it like that.
Solved.
All I needed to do was start my hrefs with / which would reset the url back to http://127.0.0.1:8000/ after every button click.
HTML buttons are as follows:
<div class="btn-group-lg text-center" role="group" aria-label="Basic example">
<a class="btn btn-outline-primary" href="/shotokankaratebd/" role="button">Home</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_schedule/" role="button">Schedule</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_syllabus/" role="button">Syllabus</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_records/" role="button">Records</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_achievements/" role="button">Achievements</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_gallery/" role="button">Gallery</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/view_contact/" role="button">Contact</a>
<a class="btn btn-outline-primary" href="/shotokankaratebd/about/" role="button">About Us</a>
</div>
My code below submit's perfectly as i want but the Add & Create new item in the bootstrap dropdown i need to be a submit, i've tried with javascript but then the html5 validation dosen't trigger. Is my only option to try and style the submit button like the bootstrap dropdown-item ?
$('btnWorkorder_Add_Create').click(function(event) {
event.preventDefault();
$('#WorkOrderFrm').append('<input type="hidden" name="btnWorkorder_Add_Create" value="1">');
$("#WorkOrderFrm").valid();
$('#WorkOrderFrm').submit();
});
HTML
<form id="WorkOrderFrm" name="WorkOrderFrm" action="/proc/WorkOrderFrm.php" method="post" autocomplete="off">
<div class="btn-group">
<div class="btn-group">
<button type="submit" id="BtnAdd" class="btn btn-custom btn-sm" name="btnWorkorder_Add">Add</button>
<button type="button" class="btn btn-custom btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="" name="btnWorkorder_Add_Create" id="btnWorkorder_Add_Create">Add & Create New</a>
</div>
</div>
Why are you needing a dropdown if there is only one option?? Why not just use <input type='submit' value='Add And Create New' />
you are missing '#' tag. try this code and let me know if it is still not working
$('#btnWorkorder_Add_Create').click(function(event) {
event.preventDefault();
$('#WorkOrderFrm').append('<input type="hidden" name="btnWorkorder_Add_Create" value="1">');
$("#WorkOrderFrm").valid();
$('#WorkOrderFrm').submit();
});
As it is usually on any admin page I have 3 buttons next to each other. One for detail, one for edit and one for delete, it looks like:
<a n:href="detail $candidate->id">
<button type="button" class="btn btn-success btn-sm">
<i class="glyphicon glyphicon-search" style="margin-right:0px"></i>
</button>
</a>
<a href="#">
<button type="button" class="btn btn-info btn-sm">
<i class="glyphicon glyphicon-pencil" style="margin-right:0px"></i>
</button>
</a>
<a n:href="delete! $candidate->id">
<button type="button" class="btn btn-danger btn-sm">
<i class="glyphicon glyphicon-remove" style="margin-right:0px"></i>
</button>
</a>
After that I decide I need to add "Confirm modal" when user press "DELETE" to avoid missclicks
<a
data-nette-confirm="modal"
data-nette-confirm-title="Confirm"
data-nette-confirm-text="Are you sure you want to delete?"
data-nette-confirm-ok-class="btn-danger"
data-nette-confirm-ok-text="Yes"
data-nette-confirm-cancel-class="btn-success"
data-nette-confirm-cancel-text="No"
class="btn btn-danger"
data-ajax="off" // or class="ajax"
n:href="delete! $candidate->id">
<button type="button" class="btn btn-danger btn-xs">
<i class="glyphicon glyphicon-remove" style="margin-right:0px"></i>
</button>
</a>
After this I just get my DELETE button twice that BIG as others, I try to just make it xs but still so much bigger. Is there a way how can I avoid this change?
Try removing:
// or class="ajax"
It overwrites previously defined class="btn btn-danger".
The code below populates the first dropdown with distinct pants brands:
$.each(pantsBrands, function(i){
var li = $('<li>')
.appendTo(pantsList);
var aaa = $('<a>')
.text(pantsBrands[i])
.attr('onclick','askPantStyle()')
.appendTo(li);
});
In this next bit of code, I intend to somehow use the selection above to populate the contents in a second dropdown box composed of the styles relevant to the brand chosen in the first.
var askPantStyle = function(){
$('#pantStyleDiv').slideDown();
alert($(this).text());
}
I used the alert to check to see what (this) would return. I had hoped it would be the text content of the first selection, but when the alert box appears, the content is empty.
relevant html below:
<div id='pantsLanding'>
<p class="lead">Which brand of pants fits you best?</p>
<p class="lead">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-default">Brand</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="dropPants" class="dropdown-menu scrollable-menu" role="menu">
</ul>
</div>
</p>
</div>
<div id='pantStyleDiv'>
<p class="lead">What style do you prefer?</p>
<p class="lead">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-default">Style</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="dropPantStyle" class="dropdown-menu scrollable-menu" role="menu">
</ul>
</div>
</p>
</div>
Added a quick example below of how you could solve this. Bootstrap dropdowns are quite specific in their usage, so I'm using a click event rather than change that is the normal event for selects.
$('#dropPants').on('click', 'li a', function() { ... });
Also I did not add any data-attributes, as I do not have the full picture of your solution. But I hope you can use this to make things work like you want them to.
You did not provide any data, so I created an array for the brands, and an object for the styles. Each brand has a property in the object containing an array of styles.
var pantsBrands = ['levis', 'lee', 'lindeberg'];
var pantsStyles = {
'levis': ['501','502'],
'lee': ['bruce','kim'],
'lindeberg': ['lindeberg1','lindeberg2']
};
Anyway, below is a working example of a Bootstrap dropdown populating another dropdown:
var pantsBrands = ['levis','lee','lindeberg'];
var pantsStyles = { 'levis': ['501','502'],
'lee': ['bruce','kim'],
'lindeberg': ['lindeberg1','lindeberg2']
};
$.each(pantsBrands, function(i) {
$('#dropPants').append('<li>'+pantsBrands[i]+'</li>');
});
$('#dropPants').on('click', 'li a', function() {
$('#dropPantStyle').html('');
var showStyles = pantsStyles[$(this).text()];
$.each(showStyles, function(i) {
$('#dropPantStyle').append('<li>'+showStyles[i]+'</li>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div id='pantsLanding'>
<p class="lead">Which brand of pants fits you best?</p>
<p class="lead">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-default">Brand</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="dropPants" class="dropdown-menu scrollable-menu" role="menu">
</ul>
</div>
</p>
</div>
<div id='pantStyleDiv'>
<p class="lead">What style do you prefer?</p>
<p class="lead">
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-default">Style</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul id="dropPantStyle" class="dropdown-menu scrollable-menu" role="menu">
</ul>
</div>
</p>
</div>