So I asked this question a couple years ago with Ionic 3 and Angular 7. Got it solved and it also worked with Ionic 4 and Angular 8. But since upgrading to Angular 9, I cannot find a solution anywhere to make this work again.
The problem is that even tho the html renders correctly, the form fields will not render correctly. You can still see [(ngModel)]="answers.answer1" in inspect element. I setup a stackblitz on this and you can see the dynamic content being loaded in as well as a static input that is working properly.
https://stackblitz.com/edit/ionic-v4-q7oeoz
Lastly: I 100% have to have the inputs inside the content and being loaded from JSON as a string. There are many Workbooks that have over thousand inputs spread out through the content. Static coding these with their countless sections outputted as single pages is not a solution for me.
Thanks for everyone's help!!
Related
I have been troubled with this problem for DAYS, and this is a last resort.
I am following along with a course, and in it the instructor has us use DataTables to pull a list of users from a database. The plugin is pulling data from my db correctly, and the functionality of the table seems to be working. The problem is that the table is hideous, and virtually unusable.
I'm at a loss, as I have made sure my code mimics everything from the video lesson. I've even analysed my code next to his in GitHub.
I've even made sure to use his version numbers for plugins, as the course was recorded in 2016-2017 I believe. I have considered the fact that I'm using Visual Stdio 2019, and he is not. Also, I remember there being a large bootstrap update as recently as a couple years ago. (DataTables uses bootstrap)
I'll show some code below, but here are both repos for this project(Vidly):
My Repo |
Instructor's Repo
Since this is apparently a CSS problem, I looked to how I was importing my css files. I am using a bundle inside of the BundleConfig file in the App_start folder:
But it's exactly the same as the instructor wrote it, identical.
Lastly, here's the code in relation to the first image, the page with the table in question:
I am lost.
EDIT:
Last night I was messing with my included files in the BundleConfig file and switched the dataTables to bootstrap 4 and got a more desirable result:
As you can see, this is definitely laid out better, and has the desired dimensions, but the colors of the hovered rows and certain text is still off and unappealing.
If your Bootstrap version is 4, then you need to load in the *.bootstrap4.css / *.bootstrap4.js files for DataTables (rather than *.bootstrap.* which is for Bootstrap 3).
Update for the edit
Looks like you might also be loading the jquery.dataTables.css file (the tell is the gaps in the pagination)? You can remove that. Only one of the style files should be loaded.
What is the tutorial that you were following btw?
I got stuck to this problem for quite sometime.
Need help.
Relatively very new to angular.io and implementing with asp.net mvc. For UI library considering angular material. Other controls seems to be working fine but 'Datatable' seems to be not working as expected.
When Component containing 'Datatable' is tried to load in application, first time it is not getting loaded through angular route. When next time again it is clicked or if we work on any control. Datatable is shown.
I tried to add respective part of code in plunkr at
https://plnkr.co/edit/Lp2l0swFwlDI12a9E2vr?p=preview
but plunkr is not able to run that.
Anybody have any idea what can be problem, you can have look at code from plukr link given above?
Hi folks I am building a CRUD system very similar to this example http://jsfiddle.net/rniemeyer/WpnTU/.
Context:
I have several HTML pages that each contain the same table of data but showing different information (each page have their diffirent use).
On each row theres an edit button like yuo see in the example. Since the modal form is the same accross all the HTML pages I decided to create one HTML page containing the modal form. I then use jquerys load function like so $("#load_modal").load("pages/modal_form.html"); on each of the HTML pages.
Problem:
On a basic HTML page this is working out great. I tought this was a brilliant approach and gave myself a pat on the back. But now the problem I have is that when started implementing knockout it dosent seems to be working together very well. Modal dosent always pop up correctly and such.
My question:
At this point im not looking to figure out my code issue. I spent days and weeks staring at it and I came to the conclusion that I need to rethink my approach altogether. Im curios to hear some of your opnions on what would be the best aproach to tackle something like this.
Ideas so far:
I found this https://github.com/rniemeyer/knockout-amd-helpers/tree/master/examples But dosent use the latest knockout version and seems more complicated for something simple I need.
I also saw that using requireJS would be another idea but honestly these seem to complicate things for me.
Would anyone know of a simpler template solution or even have a whole different approach to this?
Using jQuery to modify your DOM is not going to work well in Knockout. You can use components to define the form HTML. Use an observable to switch which component is displayed.
I currently have a simple html page that utilizes an angular script to fetch json content and arrange it into a table. nothing all that complex.
I've been asked today to have it so that it could be included as a plugin anywhere in a wordpress site. As someone that has never used wordpress before, I'm wondering if there is a simple way to do this, or indeed if it is possible at all. Answers that I have found are either unrelated to the issue that I have, or are incredibly old.
If you don't care about making it a plugin exactly but instead a snippet you drop into a page is fine then I would suggest using a page template that loads the angular js files and sets up the overall HTML and inits the app.
I've asked this question earlier on which has been technically answered by Bardh Lohaj but unfortunately the answer itself presents a further problem. The question is about a cool way to ajax upload files in a multi field form. The solution would work perfectly except that because the form is using bootstrap.min.css in order to display form sections in JS triggered tabs - meaning the form is nicely broken up into manageable parts while remaining all as one page, means the nice solution offered by Bardh does not function correctly. What is the best way forward to resolve the css/js conflict in order to get both functions to operate fully? I've never had this sort of problem before.
As requested, here is a fiddle of the page, I cannot get the +1 feature seated in Section 3, to work on the fiddle as it does on the real page. Fiddle: http://jsfiddle.net/k3dj214k/2/
I want to get this working in the file upload section (Section 3) of the page on the above fiddle. I've tried several times but always with the same failure - the bootstrap.min.css that is required for the tab function, breaks the file upload function. Advice on how to get them both working together is appreciated.
There is too much code to paste in here, please review jsfiddle link above
The accepted and used solution is not one I'm hugely proud of but it IS functional. Separate the upload form function from the main form so they are two separate pieces of html/php. Break the primary form part way through (close the form) and enter the file upload form as an iframe. After this, re-open the original form.
Not a wonderfully technical solution, but is does work with minimal issues/problems.