Dropdown element is working fine on desktop view but not on mobile view. Click and hover events are not working. What should I do, so them will work on mobile view. I am a new learner stuck with this problem, I tried to google it but couldn't find any solution.
<div class='dropdown-table'>
<button class='dropbtn dottedOpenOrders'>︙</button>
<div class='dropdown-content'>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-default btn-edit-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/edit-dropdown.png" /> </span><span>Edit</span></a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-danger btn-close-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/cancel-dropdown.png" /> </span> <span>Cancel </span> </a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-default btn-play-pause-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/pause-dropdown.png" /> </span> <span>Pause/Resume </span> </a>
<a href="javascript:void(0);" data-toggle="tooltip" class="btn btn-xs btn-warning btn-exit-order" data-order_location=${openOrder.location} data-order_id=${openOrder.id} data-order_type='${openOrder.type}' data-order_action=${openOrder.action} data-group_id=${openOrder.public_id}><span><img src="img/exit-dropdown.png" /> </span> <span>Force exit </span> </a>
</div>
</div>
Related
I am trying to create three buttons horizontal and equal in size.
But what I managed to do so far is three buttons full width vertically as shown below.
<section class="section">
<div class="container-fluid">
...
<h2 class="display-5">User Management</h2>
<br>
<br>
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a>
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a>
...
</div>
and the output is:
How can I make them horizontal and taking the full width?
Bootstrap comes with a very powerful Grid system that you can use, utilizing the classes row (for rows) and col (for columns) respectively.
The col class utilizes a number system of 1-12, indicating the size of the column in width. One entire row holds a max possible value of 12. How you choose your layout is entirely up to you. You can even nest the row and col classes as you wish to get the grid that you desire. More about Bootstrap Grid here.
Example:
<div class="row">
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a>
</div>
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
</div>
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a>
</div>
</div>
Code snippet example:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('create_user') }}">Create New User</a>
</div>
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
</div>
<div class="col-4">
<a class="btn btn-info btn-lg btn-block" role="button" href="{{ url_for('change_user_password') }}">Change User Password</a>
</div>
</div>
Wrap them inside a div, you can remove the btn-block and add col class to take columns automatically, something like below :
<div class="row">
<a class="btn btn-info btn-lg col" role="button" href="{{ url_for('create_user') }}">Create New User</a>
<a class="btn btn-info btn-lg col" role="button" href="{{ url_for('deactivate_user') }}">Deactivate user</a>
<a class="btn btn-info btn-lg col" role="button" href="{{ url_for('change_user_password') }}">Change User
Password</a>
</div>
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>
<div id="Comment_1" class="panel-body">Back when I was in high school
<div>Ajay(725) <span class="sl-date">7/28/2016 2:48:37 PM</span>
</div>
<div class="panel-footer">
<a class="btnDisapproveComment btn btn-outline m-r-10 btn-danger" action="Disapprove" iid="1" href="javascript:void(0)">Disapprove</a>
<a class="btnEditComment btn btn-outline m-r-10 btn-warning" iid="1" href="javascript:void(0)">Edit</a>
<a class="btnFlagComment btn btn-outline m-r-10 btn-default " iid="1" href="javascript:void(0)">Flag it</a>
<a class="btnAllActionComment btn btn-outline m-r-10 btn-info" action="Feature" iid="1" href="javascript:void(0)">Feature it</a>
</div>
</div>
Use NodechildNodes property which will return all the child nodes including TextNodes
var elem = document.getElementById('Comment_1');
elem.childNodes[0].textContent = "Your Text"
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Comment_1" class="panel-body">Back when I was in high school
<div>Ajay(725) <span class="sl-date">7/28/2016 2:48:37 PM</span>
</div>
<div class="panel-footer">
<a class="btnDisapproveComment btn btn-outline m-r-10 btn-danger" action="Disapprove" iid="1" href="javascript:void(0)">Disapprove</a>
<a class="btnEditComment btn btn-outline m-r-10 btn-warning" iid="1" href="javascript:void(0)">Edit</a>
<a class="btnFlagComment btn btn-outline m-r-10 btn-default " iid="1" href="javascript:void(0)">Flag it</a>
<a class="btnAllActionComment btn btn-outline m-r-10 btn-info" action="Feature" iid="1" href="javascript:void(0)">Feature it</a>
</div>
</div>
You can do the following if you want to change the text in that div
$('#Comment_1').text('I am to lazy to search the www for a simple tutorial on appending a text to a div');
I assumed you want to change "Back when I was in high school" only.
If so add span for the same, like., <span class="span-text-to-replace">Back when I was in high school</span>
Then,
$(".span-text-to-replace").text("My new text");
In case you don't want to add any span/div, you could do this,
document.getElementById("Comment_1").childNodes[0].textContent = "My new text"
The above line changes the content.
Hope I answered your question!
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".