Adding Onclick Element That not exist yet - javascript

I Try to find a solution for a client but i wont get out.
The problem is that i cant edit the HTML, so i try to get a work-around with Javascript
<!-- This section must be hide in CSS or something -->
<div class="coupon-container">
<input class="input-text" type="text" id="coupon_code" name="coupon_code" value="">
<div class="btn-apply">
<button type="button" title="Toepassen" class="button-coupon medium" onclick="discountForm.submit(false)" value="Toepassen"><span><span>Toepassen</span></span></button>
</div>
</div><!-- end of section Hiding CSS -->
</div>
This is the
HTML code and i want to add a
onclick="new_function();
OLD CODE
<div class="coupon-container">
NEW CODE
<div class="coupon-container" onclick="new_function();>
Is this possible? Keep in mind that i need a Javascript, so i cant edit the HTML directly from CMS.
I Hope you guys can help me out.
Kind regards

You can do this.
document.getElementsByClassName("coupon-container")[0].setAttribute("onclick", "new_function();");

Related

Bootstrap tooltip does't work when I use jQuery to append the tooltip elements

how are you guys I have a question if anyone can help me, I'll be grateful.
at the moment I was using some bootstrap functionality, for example, this code below.
I'm using bootstrap version 3
<div class="col-lg-12 col-md-12 col-xs-12 div_challenger" style="background-color: #somecolor; color:someTextColor;"
data-toggle="tooltip" data-placement="right" title="some text here!!!">
<span class="some icon"></span>
<b>some title</b>
<input type="hidden" value="somevalue" name="inputChallengerSelected">
</div>
this code works well in html file.
But when I use Jquery append element this doesn't work the same way
code using jquery append.
<button id="someid" onclick="addElement()"> ADD element </button>
<div id="addhere"> </div>
script tags
<script>
function addElement(){
let ElementToAdd = ` <div class="col-lg-12 col-md-12 col-xs-12 div_challenger" style="background-color: #somecolor; color:someTextColor;"
data-toggle="tooltip" data-placement="right" title="some text here!!!">
<span class="some icon"></span>
<b>some title</b>
<input type="hidden" value="somevalue" name="inputChallengerSelected">
</div>`
$('#addhere').append(ElementToAdd)
}
if someone tells me why this occurs I will be totally grateful
Take a look at this:
How to bind bootstrap tooltip on dynamic elements
In order to make a dynamically injected tooltip work, you must initialize a tooltip plugin using an element, which exists already after the page is loaded, e.g. body. It should then work.
A simple answer is Bootstrap = CSS + JS.
Try to hide element onload and when you need show.

Close tab index order in a container/div

I'm trying to hit this result: i have 2 div with their tab-index order in the same page, and when for example i'm navigating in the first div and i reach the last tab-index of that div, my focus don't go on the next div but restart from first tab-index of that div. Is this possible?
Example:
<div class="main">
<div class="container1">
<input tabindex="1"/>
<input tabindex="2" />
<input tabindex="3" />
</div>
<div class="container2">
<input tabindex="1" />
<input tabindex="2" />
<input tabindex="3" />
</div>
</div>
Can you post your code?
Are you using tabindex="0" on all of them or are you setting a specific order by using tabindex-"1", tabindex="2" etc.?
My suggestion without seeing your code is that you are trying to put tabindex on an element that doesn't allow it.
Use tabindex="0" on elements like <div>, <span>, <p> that are not keyboard focusable. They will not work with tabindex="1" etc. If you are going to do this though you should specify a role="button" etc. on that element to let a screen reader know what the purpose of the focus is for example if the user is blind.
It's hard to answer this question for you without seeing the code.
Hope this helps! If you need more help, please post your code and I'd be glad to help more.
<div role="button" tabindex="0">A button</div>
<div role="link" tabindex="0">A link to somewhere</div>

What is the most efficient solution to paginate a JSP application without heavy coding?

I'm looking for the easiest solution to create pagination for a JSP app without too much hassle. Is it even possible to create pagination on client-side with dynamic mysql content? Using JSP, I tried taglib which never worked... I found JSP pagination tutorials on opentutorials.com but... Nothing I could really wrap my head around quite easily... So far what I found over the web just don't quite work or other solutions like open tutorials are too bulky and required heavy coding... I'm looking for something light weight... I tried Displaytag but I do not want to use tables to display product listings. I prefer divs. I don't mind using javascript or jquery... I have no clue how to paginate my app... :/
I`m trying to paginate the category page below.
<div class="middle_container_category">
<div style="width:100%; text-align:center; font-size:large; margin-top:2%; margin-bottom:2%;"> ${selectedCategory.name} </div>
<hr class="horizontal_line" >
<div style="width:100%; ">
</div>
<c:forEach var="product" items="${categoryProducts}" varStatus="iter">
<div id="product_container" class="lazyload">
<div class="product_img_container">
<div id="product_image"><a href="viewProduct?${product.id}">
<img class="img" alt="" src="${initParam.productGalleryImagePath}${product.id} (1).jpg" /></a></div>
</div>
<div class="product_name_container">
<div id="product_name"><a class="category_links" href="viewProduct?${product.id}">${product.name}</a></div>
</div>
<div class="product_price_container">
<div id="product_price">$${product.price}</div></div>
<div id="button_wrapper_category">
<div id="add_toList"><form id="wishlistForm" action="addToWishlist" method="post">
<input name="productId" value="${product.id}" type="hidden">
<input id="submit_list" class="submit" value="<fmt:message key='AddToWishlist'/>" type="submit">
</form></div>
<div id="add_toCart"><form id="cartForm" action="addToCart" method="post">
<input name="productId" value="${product.id}" type="hidden">
<input id="submit_cart" class="submit" value="<fmt:message key='AddToCart'/>" type="submit">
</form></div>
</div>
</div>
</c:forEach>
</div>
I don't see anything wrong with using tables if you are going to use them to show tabulated data and not to style your web up (using them to align, etc).
A very simple and useful library is DataTables: https://www.datatables.net/.
It supports AJAX querying, pagination, filtering you can set any style you want and it is simple to use.

Changing section focus on button click in Foundation CSS

I am using Foundation CSS and need some help on the sections object. I have a tabbed section on my page
<div class="section-container tabs" data-section="tabs">
<section id="section1">
<p class="title" data-section-title>Step 1</p>
<div class="content" data-section-content>
<input type="text" id="firstname" placeholder="First Name">
</div>
</section>
<section id="section2">
<div class="content" data-section-content>
<input type="text" id="phone" placeholder="Phone">
</div>
</section>
What I am trying to do is have a next button on section1 that would take me to section 2 by using this
<button class="small button" id="next1" onclick="document.getElementById('section2').className ='active';document.getElementById('section1').style ='padding-top: 49px';document.getElementById('section1').className ='';document.getElementById('section1').style ='';"> Next </button>
This however is not working. What happens is that by clicking the button it takes me to section 2 for a brief section and then brings me back to section 1. Any help on how I can nail this.
Few things are missing and others not understood.
You need to give the focus. with focus(); so it takes you there.
You cannot change className if your element has no class attribute. You need to create it first or leave it empty in html.
To change style via javascript, you need to call the rule and then give it a value. element.style.paddingTop='49px';
To set focus on something else than form element or links, you may add the attribute tabindex="0" to the element your want to catch focus state.
a few change to your code , so you can experiment some of the things i say. http://codepen.io/gcyrillus/pen/pCikI
I wish you success in learning :)

Using Bootstrap, I can only get the text to act like a link, not the whole button?

I'm just learning how to use html and css and my teacher has asked us to use Bootstrap. It's really cool, obviously, but when I try to make a button, only the text within the button actually acts like a link as opposed to the whole rectangular button. I'm not sure if I need more than just the minified bootstrap javascript file to make them work or what.
Here's my html, and I also added the line "$('.nav-tabs').button()" to my head as well as the javascript file from bootstrap. Any advice? I know my html is probably pretty janky, my teacher isn't the best at explaining things so I've just been fiddling with things until they seem to work.
<div class="btn-toolbar">
<div class="row-fluid">
<div class="span2 offset2">
<div class="btn btn-primary">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20profile%20-%20final.html">
Profile
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20writing%20-%20final.html">
Writing
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20music%20-%20final.html">
Music
</a>
</div>
</div>
<div class="span2 offset.5">
<div class="btn">
<a href="http://students.cec.wustl.edu/~amd4/Portfolio/portfolio%20-%20photos%20-%20final.html">
Photography
</a>
</div>
</div>
</div>
remove the class="btn btn-primary" from the div tag, put it on the a tag
see http://twitter.github.com/bootstrap/base-css.html#buttons
...typically you'll want to apply these to only <a> and <button> elements for the best rendering.
Looks like you are not adding the class on the a tag.
You need to use something like this New button This should give you a button with the text New button.
You use Big Button
For a large blue button.

Categories