I have link, when an user clicks, it appends the data into a div like this:
<a href="javascript:void(0);" onclick="StartMesssage()">
<span class="font-icon fa fa-pencil"></span>
</a>
<script>
function StartMesssage(){
$(".div1").append(
'<section class="chat-area d2"><div class="chat-area-in"><input type="text" class="form-control spinner" id="to-message" data-mt-filter-control /> </div></section>'
);
}
</script>
Now the problem I'm facing is that data-mt-filter-control is a jQuery plugin when I get HTML tags dynamically it doesn't work but if I add these tags into my HTML
<section class="chat-area d2">
<div class="chat-area-in">
<input type="text" class="form-control spinner" id="to-message" data-mt-filter-control />
</div>
</section>
and refresh my page, then it works
Event driven plugin's normally has an init method that runs on page load.
After adding content dynamically you likely need to call that init method again, or else their event's is not called/fired on those dynamic added elements.
Related
I am having trouble with my onClick event.
I am adding the HTML to the DOM via DOM insertion during/after pageload.
The page I am dealing with is a single page application.
When the page first loads, my on click event works fine. When I navigate to the next page within the SPA and then click the back button to go back to the original page, the onClick doesn't work.
I've tried setTimeout and polling and nothing has worked. The onclick will work if I paste it into the Google console, but won't work on load. I am not quite sure why setTimeout and polling isn't working.
//css
.hideIt{display:none;}
//html
<div class="optMbPriceContainer">
<div class="optMbBaseRow">
<span class="">Base Price</span>
<span class="right">$91.79</span>
<span class="right optMbStrikethruPrice">$101.99</span>
</div>
<div class="optMbTaxesRow2">
<span class="optShowTaxDetails2">Taxes & Fees</span>
<span class="right">$40.36</span>
<div class="optTaxDetails2 hideIt" style="">
<div class="optTaxParent2"><!--taxes go here--></div>
</div><
/div>
<div class="optMbTotalRow">
<span class="optEstTotalTxt">Estimated Total (Prepaid)</span>
<span class="pull-right">$132.15</span></div>
<div class="optTotalSavings">
<span class="">Total Savings</span>
<span class="pull-right optTotalSavingsAmt">$10.20</span>
</div>
</div>
//jquery
angular.element(document).on('click', '.optShowTaxDetails2', function() {
$('.optTaxDetails2').toggleClass('hideIt');
});
I discovered that my original implementation of on click was binding it to the document rather than the element, which is why it was being added every time I navigated back to the page. Instead I used:
$('.optShowTaxDetails').click(function () {
$('.optTaxDetails').toggleClass('hide');
});
Changing <button> innerHTML seems to deactivate mdl-js-ripple-effect.
Use the method mentioned here to dynamically build a new element as the workaround or report this as a bug?
<body>
<button id="myButton" class="mdl-button mdl-js-button mdl-js-ripple-effect">OLD VALUE
</button>
</body>
JS:
window.addEventListener("load", () => {
document.getElementById("myButton").innerHTML = "new value";
});
http://codepen.io/anon/pen/KVvMOE
Tried the componentHandler.upgradeElement(button) on the existing element after setting new html, but as mentioned in the docs it's only good for new ones. Trying to reuse existing elements.
I when the component is parsed and upgraded by the MDL script, a lot of extra attributes are added to the outer node, and extra HTML added inside. That means both that setting the innerHTML will remove some of the necessary markup inside and that the upgradeElement will fail because of the markup that was added to the outer node.
You should try de-upgrading the button with componentHandler.downgradeElements first, then set the innerHTML, then call componentHandler.upgradeElement.
Some untested sample code:
function setText(element,newtext){
componentHandler.downgradeElements(element);
element.innerHTML=newtext;
componentHandler.upgradeElement(element);
}
setText(document.getElementById('myButton'),'new value');
I'm having a similar issue. I'm trying to add some card via innerHtml into the page. The card contains a radio button using the class mdl-radio.
Everything seems to work fine, but the radio button doesn't load the style. I'm seeing a simple radio button not the styled one. If I add the card to the page from the beggining the radio button looks OK, as expected.
Any comment is welcome, I'm not sure how to fix this.
main.innerHTML = '<!-- CARD PREGUNTA-->\
<div class="demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet" style="margin: 0 auto; display: none;" id="pregunta_card">\
<div class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">\
<!-- Contenido -->\
<div class="mdl-card__supporting-text mdl-color-text--grey-600">\
<h2 class="mdl-card__title-text" id="pregunta_card_title"></h2>\
<br>\
<br>\
<!-- Radio Button 1 -->\
<label id="opt1" class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option1">\
<input type="radio" id="option1" class="mdl-radio__button" name="options"/>\
<!-- intitial state checked using attribute checked -->\
<span class="mdl-radio__label" id="option1_value"></span>\
</label>\
</div>\
</div>'
I am creating a webpage. Here is the concern.
The page has nav links on left end as a sidebar and the main content area occupies at the center.
I would want to open each link and its corresponding data should be displayed in the main content area (rest of the data hidden).
Please help me achieve this.Below gives my webpage view
<body onload="myFuntion()">
<div id="header">
<h3>Michaels Mob App Automation Dashboard</h3>
</div>
<div id="nav">
iOS<br>
<a name="Android" href="#" target="_self">Android</a><br>
KickOff<br>
Run<br>
</div>
<div id="section">
<table>
<tr><td> TestCase: </td> <td><input type ="text" name ="TestCase"></td><br>
<td> Execution Status : </td> <td><input type ="text" name ="Status"></td></tr><br>
<p>
enganunnd?:P
You might need to add the rows dynamically here using jscript.
iOS text
</p>
</table>
</div>
<div id="footer">
Graph View/
List View
</div>
</body>
This is what one refers to as loading partial views or html fragments.
jQuery has them: http://api.jquery.com/load/
AngularJS has them: https://docs.angularjs.org/api/ng/directive/ngInclude
you can also do it with <iframe>
you can also use XHR
You can use jQuery Load function if that is an option. http://api.jquery.com/load/
$("#nav a").click(function(){
$( "#section" ).load( "pages/test.html" );
});
If it's ok to have each link show the same URL in the address bar, and unless you need to get all the data for each "page" off a server, it would be better simply to hardcode each page/section into the one HTML document and use the nav links as triggers to show/hide each section using CSS. This eliminates Ajax calls and would be much quicker to load each section. And you could still populate each section's data dynamically by appending DOM nodes when necessary.
I'm working in gsp view in Grails.
A link in a div triggers a Jquery event onclick.
The problem is when a new div is generated dynamically , only the link in the new form triggers this event. Whereas the old one is not functioning anymore.
Can anyone help me out with this?
Here is the div that is duplicated and cause the problem in view.gsp
<div id="supplementaryInfo">
<div id="deleteSupplementary" class="deleteSupplementary" >
<a href="#" id="deleteSupp">
<r:img class="icon float-right" uri="/img/app-icon-delete.gif" title="delete"/></a>
</div>
<g:render template="showConfirm" model="[id: id ]"/>
</div>
here is the jquery function for event !
function showConfirmationPanelForSuppDelete(){
$('#deleteSupp').on('click', function(event) {
event.preventDefault();
$("#showConfirmation).show();
});
cancelSuppDelete();
}
If you are cloning the div than I assume that there are duplicate ids, therefore you can use jquery's closest() function:
<div id="cloneMe" class="yourclass">
<input type="text" id="someId" value="" name="somename">
<i id="icodnId" class="icon-remove btn"></i>
</div>
tha you can use:
$(document).on('click','#icodnId',function(evt){
$(this).closest('.yourclass').dowhateveryouwant();
evt.preventDefault();
});
I'm developing Joomla 2.5 site with template based on Twitter Bootstrap v2.1.1.
I'm also using BootstrapX - clickover, a Bootstrap extension to allow popovers to be opened and closed with clicks on elements instead of hover or focus: https://github.com/lecar-red/bootstrapx-clickover.
In popover I'm calling a HTML file with simple AJAX currency converter.
This is HTML which triggers popover with currency converter:
<a class="pretvornik withajaxpopover" href="#" rel="clickover" title="Pretvornik valut" data-load="http://www.cheaperandmore.com/files/static_converter.html">Click here</a>
This is content of the HTML file (http://www.cheaperandmore.com/files/static_converter.html):
<p>V okence vpišite znesek v britanskih funtih, ki ga želite preračunati v eure.</p>
<div id="currencyBox">
<div class="currencyInner">
<div class="data">
<input type="text" name="znesek" id="znesek" value="1" /><span id="gbpsign">£</span>
</div>
<div class="data">
<select name="fromCurrency" id="fromCurrency">
<option selected="" value="GBP">GBP</option>
</select>
</div>
<div class="data">
<select name="toCurrency" id="toCurrency">
<option value="EUR">EUR</option>
</select>
</div>
</div>
<div style="currencyInner" id="calcresults"></div>
<div class="clr"> </div>
<div class="data">
<input class="btn btn-primary" type="button" name="convert" id="convert" value="Pretvori »" />
<button class="btn" class="clickover" data-toggle='button' data-dismiss="clickover">Zapri</button>
</div>
</div>
This is javascript:
<script type="text/javascript">
//Add close button to bootstrap popovers
$('[rel="clickover"]').clickover();
//Load data
$('.withajaxpopover').bind('click',function(){
var el=$(this);
$.get(el.attr('data-load'),function(d){
el.unbind('click').popover({content: d}).popover('show');
});
});
</script>
Right now when I click on a link which triggers popover, two popovers appear.
One popover has content from static_converter.html, but it's missing clickover class "popover fade right in".
Other popover, which is hidden behind first one has correct class "popover clickover fade right in", but it has no content except title which is taken from a.pretvornik.withajaxpower title tag.
So when I click close button in the first popover it actually closes second popover (because it has clickover class).
I can't figure out what I'm I doing wrong.
You can see it here: http://www.cheaperandmore.com (click on the "£ » €" in the first semicircle in the top left part of the page).
Any help would be appreciated.
It appears the plugin is inheriting from the Twitter Bootstrap popover plugin : it means you don't need to call .clickover() if you call .popover() (or rather the opposite).
You should try that
<script type="text/javascript">
//Load data and bind clickover
$('.withajaxpopover').on('click.ajaxload',function(){
var el=$(this);
$.get(el.attr('data-load'),function(d){
el.off('click.ajaxload').clickover({content: d}).clickover('show');
});
});
</script>
I took the liberty of changing bind and unbind to on and off because it's preferred since 1.7.
I also added an event name click.ajaxload to avoid conflict, but you should look into .one() because it does the unbinding for you.
If you have clickovers that don't have the ajax loading part, you should make two separate selectors and enable the clickover plugin differently on each.
You can for example remove the rel="clickover" attribute on the .withajaxpopover elements, and keep both $('[rel="clickover"]').clickover(); and the code above.