HTML5 combine commonly-used attributes into super-attribute? - javascript

I have a lot of buttons that look like:
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="foo">Foo</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="bar">Bar</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#qq" data-req="baz">Baz</button>
I'd like to avoid so much repetition; is there any way to define some sort of single attribute that will expand to several other attributes? For example it might end up looking like
super x = 'type="button" class="btn btn-info" data-toggle="modal" data-target="#qq"';
<button super="x" data-req="foo">Foo</button>
<button super="x" data-req="bar">Bar</button>
<button super="x" data-req="baz">Baz</button>
NB. Of course this could be done with server-side scripting but I'm hoping to avoid that. I am using Bootstrap 3.3.4 , these buttons trigger a Bootstrap modal.

This works:
<button type="button" class="x" data-req="foo">Foo</button>
<button type="button" class="x" data-req="bar">Baz</button>
<button type="button" class="x" data-req="baz">Baz</button>
and in the Javascript section
$("button.x").addClass("btn btn-info");
$("button.x").attr("data-toggle", "modal");
$("button.x").attr("data-target", "#qq");
This removes most of the repetition however I am still wondering if there is a more elegant and/or runtime-efficient way.

Sounds like you might be looking for a client side view framework such as Handlebars or React.js. Where you can send (and cache) the templates on the client and then bind to JSON you retrieve from the server.
You could use a full stack framework such as Ember.js or Angular, but that is probably more than you need.

Related

Why bootstrap float-right class not working for my button?

The bootstrap float-right class did not work with my buttons.
This is my html code snippet:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<button type="button"
id="reset_button"
class="btn btn-outline-secondary btn-lg float-right"
disabled="disabled">Reset</button>
<button type="button"
id="convert_button"
class="btn btn-primary btn-lg float-right"
disabled="disabled">Submit</button>
</div>
I want to make buttons align right but when I add the float-right class in both the buttons it doesn't work.
Can anyone please tell me what's wrong with my code and how can I fix this...
Instead of float there are probably better Bootstrap options.
Try removing the float-right and instead use d-flex with justify-content-end on the top line of your code like this....
<div class="container-fluid d-flex justify-content-end">
<button type="button" id="reset_button" class="btn btn-outline-secondary btn-lg" disabled="disabled">Reset</button>
<button type="button" id="convert_button" class="btn btn-primary btn-lg"
disabled="disabled">Submit</button>
</div>
The code is working for me. I just copied your snippet and buttons are on the right side.
Problem is meaby in parent DIRs with different CSS or something else is rewriting your style.
You can also see this, when you run your snippet here.
Like previous answers has stated, maybe there are some other styles in a parent div or element that aren't compatible with the float classes.
Try adding in a parent div the clearfix Bootstrap class, that should solve the issue in your code.

How to call a modal from a different HTML File

I realise there are similar questions on stackoverflow, however they either seem outdated(bootstrap3) or are not working for me. If possible I want to just stick to html css and javascript. I would prefer not using jquery or php.
I'll keep my code very general. I have my mainscreen which has a button I need that button to call a modal from ModalPage. ModalPage only has that modal with no other code. I'm using flask-python as my backend.
Mainscreen
<button type="button" class="btn btn-primary btn-lg">This should call modal/button>
ModalPage
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I have tried using url_for and rendering it using <a> but that doesn't seem to be working
You might have to store the entire modal HTML in a variable within your Python Flask code. One way (out of quite a few number of ways) would be to read the text and store the html in a variable using:
modaltext=[]
with open('ModalPage.html', 'r') as f:
content = f.read()
modaltext.append(content)
Put this above code in your views.py preferably. That filename depends on where you have stored the ModalPage.html. Here I assumed, it is in the same folder as views.py (which might not be the case. It could be in templates, but I dunno your folder structure).
And modify your return render statement to also return the modaltext list.
Then, call it to your Mainpage HTML using jinja2 syntax wherever necessary. Typically it could be like:
<div>{{ modal }}</div>
I'm honestly not sure about the python/flask portion, but I do what you are attempting using only html/js. You could add an ID to the button, i.e 'modal-form-button'. Then make an event listener in JS for the element with that ID being clicked.
document.getElementById("test-btn").addEventListener("click", showModal);
The showModal() function can contain the necessary code to toggle the display of the modal between 'display:bloack' and 'display:none'

Bootstrap Button Hover issue

When I hover over a bootstrap button on my website it doesn't show the link in the bottom left corner in chrome. Am I missing something here? Here is the code I am currently using for the button.
<button type="button" class="btn btn-primary navbar-btn m-l-15 m-r-15" onclick="location.href='{$relative}/upload'">{translate c='menu.upload'}</button>
You can use an <a> element with a role of button and style it to look like a button but using the same classes that you are currently using.
Only caveat to this would be that you should determine the correct element to use in your situation - for example - a link (a element) should navigate you to a new location or context - whilst a button should be used if it does something in the same location / context.
Also - if the bottonhad other functionality that navigating to the desired location - you will need to re-introduce the click handler and apply logic to perform that function.
<a
href="{$relative}/upload"
role="button"
class="btn btn-primary navbar-btn m-l-15 m-r-15"
>{translate c='menu.upload'}</a>
You can replace it with a link , and style it.
Have a visit to Bootstrap website and you will find Details here.
You can put your link as follows and it may solve your problem
<a href="your_link_here">
<button type="button" class="btn btn-primary navbar-btn ml-5 mr-5">
{translate c='menu.upload'}
</button>
</a>
First change the margin-left and margin-right from m-l-15 and m-r-15 to ml-1 and mr-1. In bootstrap ml and mr class only take values from 1 to 5. It don't takes the values more than 5 in class. You have to give it to css.
Try This:
<a role="button" class="btn btn-primary navbar-btn ml-5 mr-5"
href="{$relative}/upload">{translate c='menu.upload'}</a>

MVC #foreach and JavaScript Confusion

I'm trying to make a button in a Bootstrap popover that passes a Razor value to another JavaScript function called killDatabase when running through a Razor foreach. The code produces a list of buttons that you can select but I also want to be able to hit a button and delete one of the options. The code doesn't throw any errors, and everything works perfectly except the fact that any of the delete buttons will always delete the last element, not the one that it's supposed to be associated with. I'm assuming this is because the function gets called on an onclick and so at that point #str is just the last element's name, but I'm wondering if there's any way to store that value to be unique for each element? I've tried adding a JavaScript variable within the foreach but still ran into the same problem.
<div class="btn-group-vertical btn-block" data-toggle="buttons" id="btns">
#foreach (var str in Model)
{
<div id="popover-content" hidden>
Are you sure you would like to permanently delete this query from the database?<br />
<button onclick="killDatabase('#str')" class="btn btn-primary btn-sm" style="float:left; margin-bottom: 10px;">Yes</button>
<button class="btn btn-sm btn-primary" style="float:left;">No</button>
</div>
<label class="btn btn-default" style="height:auto">
<div class="form-group" style="height:auto; padding-bottom: 10px;">
<input type="radio" name="query" value="#str" />
<span class="pull-left">#str</span>
<span class="pull-right">
<button class="btn btn-sm btn-danger" style="margin-top:-2px;" data-toggle="popover" title="Confirm Deletion" data-placement="bottom">
<span class="glyphicon glyphicon-trash"></span></button></span>
</div>
</label>
}
</div>
So I'm going to close this question because it was me being really confused about AJAX. That's what it boiled down to: I had a bad AJAX call and I was trying to do things on a popover that was initialized after the page was loaded so any time I would try and use the #str value in that popup, it would only take the most recent value. I've reworked the code into a more streamlined, less buggy design, and it works fine now. Thanks to everyone who tried to help

bootstrap button onclick and location.href

Any reason why this wouldn't work?
<button class="btn btn-primary btn-lg" onClick="location.href='http://anothersitehere.com/file.pdf'">Download PDF</button>
You would try with this instead
<a class="btn btn-primary btn-lg" href="http://anothersitehere.com/file.pdf">
Download PDF
</a>
Leaving location.href blank and in javascript function give
document.location.href='page.php?variable='+value;
it will redirect to the page you want.
It's seems that it is working regarding on going to the link. I'm using Chrome btw.

Categories