Update visual styling of dynamically added checkbox in jQuery Mobile - javascript

I'm currently adding a bunch of checkboxes dynamically during the "pageinit" event, which I am able to both add and check successfully. The checkboxes are added by appending instances of the following stub to a "ul"-component:
<li>
<div class = "new-student">
<img class="profile-img nav-ui-thumbnail ui-mini" src="../images/prof_img.gif">
<!-- Block A -->
<div id="grid" class="ui-grid-a ui-mini">
<div class="ui-block-a ui-mini">
<div class="ui-bar ui-bar-a ui-mini">
<h2 class="name-student">Name</h2>
<p class="attendingtime-student">00:00</p>
</div>
</div>
<!-- Block B -->
<div class="ui-block-b">
<div class="ui-bar ui-bar-a ui-mini">
<h2 class="pickuptype-student">null</h2>
<p class="pickuptime-student">00:00</p>
</div>
</div>
</div>
<form>
<!-- Attending -->
<fieldset class="fieldset ui-overlay-shadow" data-role="controlgroup" data-type="horizontal" class="localnav">
<input class="attendance0-student" name="checkbox-h-2a" id="checkbox-h-2a" type="checkbox">
<label for="checkbox-h-2a">1</label>
<input class="attendance1-student" name="checkbox-h-2b" id="checkbox-h-2b" type="checkbox">
<label for="checkbox-h-2b">2</label>
<input class="attendance2-student" name="checkbox-h-2c" id="checkbox-h-2c" type="checkbox">
<label for="checkbox-h-2c">3</label>
</fieldset>
</form>
</div>
However; I am unable to update the visual styling of the checkboxes, which result in all checked boxes looking like this:
I've tried calling ".checkboxradio.('refresh')" but it only results in an error (saying I can't call that method on a component that has yet to be initialized).
Please help!

Regarding this:
I've tried calling ".checkboxradio.('refresh')" but it only results in
an error (saying I can't call that method on a component that has yet
to be initialized).
Usually when this kind of error occurs you need to do this:
$('#someId').checkboxradio.().checkboxradio.('refresh');
First call will initialize checkboxradio widget and second one will enhance its markup.
But this is not case with checkbox widget, to enhance dynamically added checkbox you need to do this:
$('[type="checkbox"]').checkboxradio();
Without refresh parameter.
And here's a working example: http://jsfiddle.net/Gajotres/VAG6F/77/
There are of course other solutions, read this article if you are using older versions of jQuery Mobile up to 1.4 (mentioned functions are currently deprecated).
If you are using jQuery Mobile 1.4 and you are planing in using future versions then use this method:
$('.ui-content').enhanceWithin();
Read more about it here.
There's a third option, instead of pageinit use pagecreate event. Like pageinit it will trigger only once but unlike pageinit it triggers before jQuery Mobile enhances active page. So everything appended at this point will automatically become enhanced.

Related

How can I select an Animatedmodal to display different demos using one ID

I have a website that i am trying to personalize and I am trying to use the AnimatedModal.js framework. I have been able to display some content in one modal, but when it comes to make several modal it gets tricky, because there is just one ID. My question i, how can i use the same ID and change the content for other modals(demo03,demo04..etc.), in order to personalize each.
I will put some code in order to understand the problem
I have been reading the documentation but I am still stuck in this problem.
<!-- single work -->
<div class="col-md-4 col-sm-6 ads graphics">
<a id="demo02" href="#animatedModal" class="portfolio_item">
<img src="img/portfolio/03.jpg" alt="image" class="img-responsive" />
<div class="portfolio_item_hover">
<div class="portfolio-border clearfix">
<div class="item_info">
<span>Should open here </span> <em> ads / Graphics </em>
</div>
</div>
</div>
</a>
</div>
<!-- end single work -->
Then I have the demo where it displays the content of the modal, where it has the #animatedmodal ID
<div id="animatedModal" class="popup-modal ">
<!--THIS IS IMPORTANT! to close the modal, the class name has to match the name given on the ID -->
<div id="btn-close-modal" class="close-animatedModal close-popup-modal">
<i class="ion-close-round"></i>
</div>
<div class="clearfix"></div>
<div class="modal-content ">
<div class="container">
<div class="portfolio-padding" >
Hello World
</a>
</div>
</div>
</div>
</div>
this is my Js file where there is just one element assigned to it, to avoid showing the same content into all different classes.
$("#demo02").animatedModal();
I don't think it can be done without hacking the plugin.
As a matter of fact, the script jQuery.animatedModal ALWAYS TARGETS the page element which has id="animatedModal"
You can see the plugin source code here:
https://cdn.jsdelivr.net/npm/animatedmodal#1.0.0/animatedModal.js
...
//Defaults
var settings = $.extend({
modalTarget:'animatedModal',
...
Here is the AnimatedModal reference:
https://joaopereirawd.github.io/animatedModal.js/
At the bottom of the page, I can't see any OPTION regarding how to specify a different target, all options are about styles and animation features.
At this point, I think the only way to allow multiple modals on the same page is to rewrite the plugin, but I'm pretty sure you don't want to choose this way.

How to set a dynamic "id" HTML attribute of an angular component?

My problem is related to placing the same component with different parameters on the same page. In this case it is a component containing a chart from a third party Javascript library (D3JS) which needs an HTML id attribute to locate and modify the component's HTML contents.
Now this id attribute should contain a unique string for each chart placed on the page, and if I directly set it as a string from the parent component it works just fine:
<my-chart id="gaugeChart0"></my-chart>
The reason it works is I guess, because the id attribute exists right at component creation time and whatever code is trying to access it can do that right away.
However this chart is in turn embedded into a bootstrap 4 card layout, like so:
<div class="row">
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-5">
<my-chart id="gaugeChart0"></my-chart>
</div>
<div class="col-7">
... Some other widgets ...
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-5">
<my-chart id="gaugeChart1"></my-chart>
</div>
<div class="col-7">
... Some other widgets ...
</div>
</div>
</div>
</div>
</div>
</div>
Now to make it more convenient (and to easily bind to click events to the whole block etc.) I would like to extract the whole part beginning with <div class="card"> into a new component.
Let's say I call this new component WidgetContainerComponent which contains the chart as well as the bootstrap card layout including the other widgets defined there.
The resulting code when using this wrapper component would be:
<div class="row">
<div class="col-6">
<widget-container chartId="gaugeChart0"></widget-container>
</div>
<div class="col-6">
<widget-container chartId="gaugeChart1"></widget-container>
</div>
</div>
In order for that to work the WidgetContainerComponent has an input field
#Input() chartId: string;
that can be set.
What I want to do then is to set the id attribute of the MyChartComponent to the string that has been set to chartId:
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-5">
<my-chart [id]="chartId"></my-chart>
</div>
<div class="col-7">
... Some other widgets ...
</div>
</div>
</div>
</div>
But this does not work, as angular adds a prefix to the id attribute which results in something like ng-reflect-id.
I also tried setting the attribute with [attr.id] as described here and here:
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-5">
<my-chart [attr.id]="chartId"></my-chart>
</div>
<div class="col-7">
... Some other widgets ...
</div>
</div>
</div>
</div>
This results in the MyChartComponent having a straight id attribute, but it seems to be only added at a later stage within the lifecycle of the component.
I also tried to initialize the chart within the MyChartComponent only in ngOnInit and ngAfterContentInit, but this does not work as well.
Any suggestions or ideas are very welcome!
So I found a solution to this problem. The problem was twofold:
The first problem was related to the requirement of having a genuine id attribute in contrast to the attribute name prefixed with ng-reflect- by angular.
What I didn't know is that from Angular 4, this prefix gets added to any attribute which is declared as an #Input variable for the component in development mode (for an in-depth explanation see this post).
The solution to this problem was to write [attr.id]=chartId instead of [id]=chartId. The reason is that in this case I needed to set an HTML Attribute, however using the square brackets notation I created a Property Binding. In order to dynamically set an HTML Attribute via the property binding syntax you have to add the prefix attr. to the attribute's name.
For a good overview regarding all valid binding syntaxes see the Angular Docs.
Specifically to review how to do attribute binding see this section.
The second problem was that I tried to access the id attribute of the component when it has not yet been created. This problem is related to the lifecycle hooks of Angular, where there are different stages. For a good overview of Angular's lifecycle hooks, see this page.
Because I didn't know it myself in detail, I will elaborate it here shortly.
Angular comes with a fixed set of lifecycle hooks which are called each time a component is set up and are also called in a predefined order. The hooks are defined as follows:
constructor
ngOnChanges
ngOnInit
ngDoCheck
ngAfterContentInit
ngAfterContentChecked
ngAfterViewInit
ngAfterViewChecked
ngOnDestroy
_
Important to note is that elements created or prepared in one step can only be accessed in any of the subsequent steps. In my case I put all the code for the initialization of the chart into the ngAfterContentInit hook, however the component is only fully loaded when ngAfterViewInit is called.
Finally the solution was to put the pre-initialization code into the constructor and to place the chart initialization code into the ngAfterViewInit method. At this stage the id attribute had been created properly and could be accessed by the chart.

Correct way to include popup input in main form in jquery mobile

When the JQM js (1.4.5) library has finished manipulating the DOM to include all its widgets, it moves popup divs to just before the page closing div. In my case, I have inputs in the popup that I want to be POSTed as part of the <form> by which they were contained in the source.
Here's an illustation of what I mean:
Source:
<div id="page1" data-role="main">
<form>
<input name="someinput">
<div id="mypopup"><input name="Oops"></div>
</form>
</div>
DOM post-processing:
<div id="page1" data-role="main">
<form>
<input name="someinput">
</form>
<div id="mypopup"><input name="Oops"></div>
</div>
What's the best practice way to get that input back into the form where it can be sent via POST?

Is is bad practice to ID each (used) element in html? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
I am wondering what the best practice would be to manipulate certain elements in an html page using jquery. As it stands now, I have a panel, with an embedded form which includes an input box, checkbox, submit/reset/test buttons. Right now I have each of these elements assigned an id so I can take the appropriate actions as each element is changed/selected. However, I feel as if my code is becoming quite messy and unreadable by assigning and managing each element by id. I know that it is efficient for the browsers to select by id, but is it better to simply give the panel/form an ID, and then call different selectors inside of the panel/form? Are there any suggestions for selecting some of the elements I have assigned IDs below? (The ones I am modifying..etc). Thanks!
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default" id="sample_panel">
<div class="panel-heading">
Heading
</div>
<div class="panel-body">
<form role="form" id="form1">
<div class="form-group">
<h4>Subheading</h4>
<div class="form-group input-group">
<span class="input-group-addon" id="input_addon">some_text</span>
<input type="text" id="input1" class="form-control" placeholder="Enter text">
</div>
</div>
<div class="form-group">
<div class="checkbox">
<label>
<span class="help-block">
<input type="checkbox" id="cb1" >some_text
</span>
</label>
</div>
</div>
<button type="submit" class="btn">Submit</button>
<button type="reset" class="btn id="reset_btn">Reset</button>
<button type="button" class="btn" id="test_btn">Test</button>
<i id="some_image"></i>
</form>
</div>
<div class="panel-footer" id="footer"></div>
</div>
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
Remember that IDs are unique identifiers, and for that reason should have more specific names. I would use them only when they are actually necessary, and when a class wouldn't be a better way to identify them.
Pile on the classes, but use IDs a bit more sparingly. I struggled with this as well when writing my first MVC app. Good luck!
Don't forget there is a code review site on StackOverflow as well.
I give id's to major elements in the page that contain subsets of the page, and also important and unique elements that I would want direct access to. I don't give an id to each and every list item, link or div because it clutters the code and it's a potential maintenance nightmare. You won't select most elements of the page, and you'll often access multiple elements at the same time - classes are vastly more useful for this.
So while you are correct that accessing elements by id is very quick and efficient, the selector system is powerful and useful because you can select elements in a variety of ways. Take advantage of those other selection methods too, you'll get a lot more done with jQuery.

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 :)

Categories