...
"Social": [{
"href": "\"https://www.facebook.com/examplepage\" target:\"_blank\"",
"icon": "facebook",
"title": "Facebook"
},
...
I want to open this facebook page into new tab.This is the part of json file which is going to import to firebase realtime database.This is a react web page there is a link inside a button to visit facebook by clicking the button.As you see above this code is part of the json will be import to firebase db,which is conneted to that react app.As per the above code once the button clicked the fb page opens in the same page.But I want to open this page in new tab.So My question I want to include target atttribute in a proper way.I tried above code but page is opening the same page
just add it like this
<button>
<a href={`${Social[0].href}`} rel="noopener noreferrer" target="_blank">
Facebook
</a>
</button>
and of course if this is an array you want to loop it
YourJson['Social'].map(data => {
return (
// your jsx block which include the button
<button>
<a href={`${data.href}`} rel="noopener noreferrer" target="_blank">
{data.title}
</a>
</button>
);
});
Use this:
<Link {...Social[0]} >Your Link</Link>
The spread operator is the best way to dynamically assign attributes to your elements.
I have two web servers. One running my front-end (example.com), one running my back-end (api.example.com).
On my front-end (example.com) I have this code which is a simple html website that has a form, with an input field and a button. When I click the button I'd like to get that data and send it to the back-end (api.example.com). For example, I put 'nathan' in the username field of the front end and click the button. I want it to send me to api.example.com/sendcode?username=nathan
I currently have this code, but the button is keeping me on the same website, instead of doing to a completely different url:
<form class="login100-form validate-form flex-sb flex-w" action="api.example.com" method="POST">
<span class="login100-form-title p-b-51">
Request for a code
</span>
<div class="wrap-input100 validate-input m-b-16" data-validate = "Username is required">
<input class="input100" type="text" name="username" placeholder="Username">
<span class="focus-input100"></span>
</div>
<div class="container-login100-form-btn m-t-17">
<button class="login100-form-btn">
Send code
</button>
</div>
<div class="flex-sb-m w-full p-t-3 p-b-24">
<div class="contact100-form-checkbox">
</div>
</div>
</form>
With this code it's sending me to 'example.com/api.example.com?username=nathan' How would I fix this, would like to keep the two completely different?
You need a fully qualified URL with protocol - preferably https, as in action="https://api.example.com/sendcode"
Please search for AJAX and your server process. Alternatively use fetch
const username = document.querySelector("[name= username]").value;
fetch('https://api.example.com/sendcode?username='+encodeURIComponent(username))
.then(response => response.json())
.then(data => console.log(data));
To use Ajax, you need to grab the submit event
Here I use jQuery for speed of coding an example, just include <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> in the page to use it
$(".login100-form").on("submit", function(e) {
e.preventDefault(); // stop submit
$.post('https://api.example.com/sendcode',
{ data : $(this).serialize() }, // the form content in key=value format
function(response) {
console.log(response)
})
})
Change your form action to include http:// e.g.
<form class="login100-form validate-form flex-sb flex-w" action="http://api.example.com" method="POST">
There could be numerous methods depending upon scenarios but simplest of all which might expose data in querystring is sending a post request on button click through a simple javascript method.
i'm developing application using Grails 2.5.1 i have a weird behaviors in the web browsers ( Chrome 59.0.3071.115 and Internet explorer 11 ) , what i'm doing is setting a session variable in the GSP and checking it in the controller.
In the GSP i'm setting the session variable isHR to true if the user clicked id=HR link
Here is my GSP:
<body>
<script>
$("#HR").on('click', function() {
alert ("hiii")
$(document).html("<g:set value="true" var="isHR" scope="session"/>");
});
</script>
<li ><g:link controller="login" action="auth" elementId='login'>
<g:message code='spring.security.ui.login.login' />
<span class="glyphicon glyphicon-log-in"></span>
</g:link></li>
<li>
<g:link elementId='HR' controller="login" action="auth" >
<g:message code='employmentSeeker.login.link' />
<span class="glyphicon glyphicon-log-in"></span>
</g:link></li>
</body>
here is the controller where i check on the isHR session variable :
def create() {
log.info ("Creating new User")
println "checking session " +session.isHR
respond new Users(params)
}
the output while using Chrome after pressing link with id=login or id=HR :
checking session null
the output while using Internet explorer after pressing link with id=login :
checking session true
How come this could happen !!
Thanks
This doesn't work that way. If you want to set some session-scoped variable from a GSP, you have to call a controller action either per normal request or AJAX, where the variable will be set. Thus it will also be browser-agnostic.
I retrieve data from back-end and show it in a html page using a controller. When user click a certain link, the other page load according to the link id(here promo page). I want to pass the menu_id to the loading page. I use ngRoute. Below is the html code which I tried,
<li class="table-view-cell" ng-repeat="menu in menuList">
<a class="navigate-right btn-lg" href="#{{menu.link}}/{{menu_id}}">
<span class="{{menu.icon}}"></span>
{{menu.menuName}}
</a>
</li>
Below is the routing,
mobileApp.config(function($routeProvider) {
$routeProvider
.when('/promo/menu._id', {
templateUrl: 'tpl/promo.html',
controller: 'promoController',
activePage: 'promo'
})
Below is the controller for the promo page which I need to retrieve the menu_id,
$http.get(SERVER_URL + '/api/templates/getCategories?appId='+$rootScope.appId+'&mainId='+$routeParams.id)
.success(function(data) {
$scope.requestCategory = data[0];
}).error(function(err) {
alert('warning', "Unable to get templates", err.message);
});
mainModule.config([function($routeProvider) {
$routeProvider.when('/promo/:menu._Id', {
templateUrl : 'tpl/promo.html',
controller : 'promoController',
activePage: 'promo'
});
}
You can define your routing like above, notice the colon before menu._Id. In your controller, you can access menu._Id using $routeParams service as follows:
$routeParams.menu._Id
Thats's it.
It started to work when I changed the routing as below,
.when('/promo/:id', {
templateUrl: 'tpl/promo.html',
controller: 'promoController',
activePage: 'promo'
})
In that case you would have to do following in your controller:
$routeParams.id
I am trying to display HTML inside a bootstrap popover, but somehow it's not working. I found some answers here but it won't work for me. Please let me know if I'm doing something wrong.
<script>
$(function(){
$('[rel=popover]').popover({
html : true,
content: function() {
return $('#popover_content_wrapper').html();
}
});
});
</script>
<li href="#" id="example" rel="popover" data-content="" data-original-title="A Title">
popover
</li>
<div id="popover_content_wrapper" style="display: none">
<div>This is your div content</div>
</div>
You cannot use <li href="#" since it belongs to <a href="#" that's why it wasn't working, change it and it's all good.
Here is working JSFiddle which shows you how to create bootstrap popover.
Relevant parts of the code is below:
HTML:
<!--
Note: Popover content is read from "data-content" and "title" tags.
-->
<a tabindex="0"
class="btn btn-lg btn-primary"
role="button"
data-html="true"
data-toggle="popover"
data-trigger="focus"
title="<b>Example popover</b> - title"
data-content="<div><b>Example popover</b> - content</div>">Example popover</a>
JavaScript:
$(function(){
// Enables popover
$("[data-toggle=popover]").popover();
});
And by the way, you always need at least $("[data-toggle=popover]").popover(); to enable the popover. But in place of data-toggle="popover" you can also use id="my-popover" or class="my-popover". Just remember to enable them using e.g: $("#my-popover").popover(); in those cases.
Here is the link to the complete spec:
Bootstrap Popover
Bonus:
If for some reason you don't like or cannot read content of a popup from the data-content and title tags. You can also use e.g. hidden divs and a bit more JavaScript. Here is an example about that.
you can use attribute data-html="true":
<a href="#" id="example" rel="popover"
data-content="<div>This <b>is</b> your div content</div>"
data-html="true" data-original-title="A Title">popover</a>
Another way to specify the popover content in a reusable way is to create a new data attribute like data-popover-content and use it like this:
HTML:
<!-- Popover #1 -->
<a class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>
<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
<div class="popover-heading">
This is the heading for #1
</div>
<div class="popover-body">
This is the body for #1
</div>
</div>
JS:
$(function(){
$("[data-toggle=popover]").popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
This can be useful when you have a lot of html to place into your popovers.
Here is an example fiddle: http://jsfiddle.net/z824fn6b/
You need to create a popover instance that has the html option enabled (place this in your javascript file after the popover JS code):
$('.popover-with-html').popover({ html : true });
I used a pop over inside a list, Im giving an example via HTML
<a type="button" data-container="body" data-toggle="popover" data-html="true" data-placement="right" data-content='<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>'>
You only need put data-html="true" in the link popover. Is gonna work.
This is an old question, but this is another way, using jQuery to reuse the popover and to keep using the original bootstrap data attributes to make it more semantic:
The link
<a href="#" rel="popover" data-trigger="focus" data-popover-content="#popover">
Show it!
</a>
Custom content to show
<!-- Let's show the Bootstrap nav on the popover-->
<div id="list-popover" class="hide">
<ul class="nav nav-pills nav-stacked">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
Javascript
$('[rel="popover"]').popover({
container: 'body',
html: true,
content: function () {
var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
return clone;
}
});
Fiddle with complete example:
http://jsfiddle.net/tomsarduy/262w45L5/
This is a slight modification on Jack's excellent answer.
The following makes sure simple popovers, without HTML content, remain unaffected.
JavaScript:
$(function(){
$('[data-toggle=popover]:not([data-popover-content])').popover();
$('[data-toggle=popover][data-popover-content]').popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
On the latest version of bootstrap 4.6, you might also need to use sanitize:false for adding complex html.
$('.popover-with-html').popover({ html : true, sanitize : false })
I really hate to put long HTML inside of the attribute, here is my solution, clear and simple (replace ? with whatever you want):
<a class="btn-lg popover-dismiss" data-placement="bottom" data-toggle="popover" title="Help">
<h2>Some title</h2>
Some text
</a>
then
var help = $('.popover-dismiss');
help.attr('data-content', help.html()).text(' ? ').popover({trigger: 'hover', html: true});
You can change the 'template/popover/popover.html' in file 'ui-bootstrap-tpls-0.11.0.js'
Write: "bind-html-unsafe" instead of "ng-bind"
It will show all popover with html.
*its unsafe html. Use only if you trust the html.
For Bootstrap >= 5.2
To enable HTML content in Popovers: data-bs-html="true"
Example:
<a href="#"
data-bs-toggle="popover"
data-bs-title="A Title"
data-bs-html="true"
data-bs-content="This is <strong>bold</strong>">popover</a>
Doc: https://getbootstrap.com/docs/5.3/components/popovers/#options
You can use the popover event, and control the width by attribute 'data-width'
$('[data-toggle="popover-huongdan"]').popover({ html: true });
$('[data-toggle="popover-huongdan"]').on("shown.bs.popover", function () {
var width = $(this).attr("data-width") == undefined ? 276 : parseInt($(this).attr("data-width"));
$("div[id^=popover]").css("max-width", width);
});
<a class="position-absolute" href="javascript:void(0);" data-toggle="popover-huongdan" data-trigger="hover" data-width="500" title="title-popover" data-content="html-content-code">
<i class="far fa-question-circle"></i>
</a>
Actually if you're using Bootstrap5 with Django then their method of passing in content as a string is perfect and in line with Django's template inclusion. You can create a template file with whatever partial HTML that you need, so for example, there is not X-editable for Bootstrap5 that seems to work, so maybe you'd want to make a line edit together with Ok|Cancel buttons as content. Anyway, this is what I mean:
<button data-bs-content="{% include './popover_content.html' %}" type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" >
Click to toggle popover
</button>
Where my settings.py templates section looks like this:
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [BASE_DIR / 'templates'],
'APP_DIRS': True, # True is necessary for django-bootstrap5 to work!
'OPTIONS': {
'debug': True,
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
I keep my templates (of every single app) in a <project dir>/templates/<app name> folder. I have MyMainApp/popover_content.html right beside MyMainApp/home.html wher the above example code was tested. But if you keep your templates in each app's Django folder, then you'll need to add "MyApp/templates" to the TEMPLATES[0]{'DIRS': ['MyApp/templates', 'MyApp2/templates']} list.
So at least this will give you the ability to put your popover HTML in the usual, syntax-highlighted Django template format, and makes good use of modularizaton of your Django template into components.
I'm personally going to use it to make an editable label (title and description fields of some data in my app).
One drawback is that if you use doublequotes (") when including: "{% include './popover_content.html' %}", then you must use single quotes all throughout the popover_content.html` template.
You also need to enable html for popovers, so your site-wide popover initializer would go:
<script type="text/javascript">
$(document).ready(() => {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(
function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
html: true,
});
});
});
</script>
Here is the (unstyled) result. In conclusion, use the default-provided string method of passing in, and pass in an included Django template file. Problem solved!