I'm trying to make a jQuery accordion from an Angular JS ng-repeat directive. The code doesn't match the example in jQuery UI and it doesn't work. The element with ng-repeat appears to be messing it up. I want h3 as the title and the div below as the content. Repeat for each details.dataset. I've tried without the Ang JS command and it works, so the javascript libraries are loaded correctly.
$(document).ready(function () { $("#myAccordion").accordion(); })
<div id="myAccordion">
<div class="dockListing" ng-repeat="data in details.dataset">
<h3>{{data.name}}</h3>
<div>
<p><strong>Data 1:</strong>
{{data.content}}
</p>
</div>
</div>
</div>
here $(document).ready(...) section is loading first and it is arranging whatever it is getting inside the "#myAccordion" div in accordion format.And then the "ng-repeat" is taking place and fetching "details.dataset".So, first make sure "details.dataset" arrives first and then the " **** $("#myAccordion").accordion(); **** " fires.You can use setTimeOut(time) function or any callback function to achieve that.
Related
I made a text editor summernote for an article, and after that I read it with modalbootstrap and angularJS ng-repeat in html element to get data from json api my php, its works.
but the problem with the article content is that there is an image and I want to add the 'img-fluid' class so that the image is responsive.
I have tried adding classes with the jquery addClass method to element html, and it works with code like this.
point assume example:
my script.js
$('img').addClass('img-fluid');
result element img without ng-repeat works.
<div class='container'>
<div class='onlyDiv'>
<p>
<img src='bla.jpg' class='img-fluid' <--works>
</p>
</div>
</div>
but if the img element with the ng-repeat directive doesn't work
results addClass() doesn't work.
<div class='container'>
<div class='divWithNgRepeat' ng-repeat='artcl.content | unsafe'>
<p>
<img src='bla.jpg' <--no class added>
</p>
</div>
</div>
please help me master, thanks
First, try change the "ng-repeate" to "ng-repeat". If that's not the problem, then the jQuery line may be running before than ng-repeat loop. In this case you need to use something like:
angular.element(document).ready(function () {
$('img').addClass('img-fluid');
});
yess bro , I have successfully solved the problem. as # symphonic's says jquery is more executed before the ng-repeat directive finishes loading the data. I tried the code below and it worked
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal("show");
});
$("#myModal").on('shown.bs.modal', function(){
$('img').addClass('img-fluid');
});
});
I have a template popup being loaded in via a controller function. Is there a way I can fade in the template. I have tried adding a separate class, hooking it to the ng-show class.
HTML:
<div class="contact-form">
<div ng-include="contactTemplate" class="fade"></div>
</div>
JS:
$scope.contactForm = function() {
$scope.contactTemplate = 'sections/popups/contact.html';
};
You could use ngAnimate and add simple css animations (there are a lot of good tutorials out there).
The available animations can be found in the ngInclude docs at "Animations".
PS: To nicely format code blocks insert a linebreak and indent code by four spaces
Im trying to figure out if its possible to link to specific element on a page in such a way that it would trigger jQuery Toggle.
How the page is by default.
Links to an element and triggers slideToggle.
$(document).ready(function() {
$(".team-info").hide();
$(".list-element").click(function() {
$(this).next(".team-info").slideToggle(500);
});
});
Well... Hope it makes some sort of sense. Sorry if it doesnt, but Im very new to html5 and jQuery. Would appreciate any help.
Thanks :)
I think I have the problem solved by utilizing jquery and jquery-UI Libraries and calling the .accordion() method on the desired element. You may view the JSFiddle Here -- You may also view the code below.
In the HTML file I created one container that holds all of the sub-containers that make up the menu system
<div id="Dropdowns">
<h3>
Test 1
</h3>
<div>
<p>
This is test 1's content
</p>
</div>
<h3>
Test 2
</h3>
<div>
<p>
This is test 2's content
</p>
</div>
<h3>
Test 3
</h3>
<div>
<p>
This is test 3's content
</p>
</div>
</div>
In the JS file I wrote a few small lines that called the .accordion() method as mentioned.
$(function() {
$(document).ready(function (e) {
$("#Dropdowns").accordion();
});
});
If you want to modify the way that the dropdown menus look, don't include the CSS that comes with libraries and write your own :)
This should be a simple matter of updating some simple modal controls with .html() but for some reason, I'm having issues. This is the modal code...
<div id="answerTaskQuestionModal" class=" modal-dialog" data-bind="with: currentQuestion">
<div id="answerTaskQuestionValidation" class="validation"></div>
<span data-bind="text: html"></span>
<div id="taskQuestionAnswer"></div>
</div>
And here is the JavaScript inside my working view model...
self.answerTaskQuestion = function (question) {
$('#answerTaskQuestionValidation').html('');
var $taskQuestionAnswer = $('#taskQuestionAnswer');
$taskQuestionAnswer.html(' \* {my html with bindings} *\ ');
$answerTaskQuestionModal.dialog('open');
self.currentQuestion(question);
};
Basically, I'm trying to dynamically change the ways one can answer a question as a proof of concept. If I just paste the html inside the target div, they work. However, when I check the value of .html(), this is what happens...
first run: $taskQuestionAnswer.html() returns undefined
second run: $taskQuestionAnswer.html() returns the proper HTML but the div won't update.
Replacing the bindings with just simple HTML doesn't help either. What am I missing here?
I think after $taskQuestionAnswer.html(' \* {my html with bindings} *\ ');
you should call ko.applyBindings(myViewModel) again to apply view model to new html.
bootstrap popover currrently expects this:
hover for popover
$("#example").popover({placement:'bottom'});
..expects you to define data-content in template or dynamically pass it in jquery.
Is there anyway it can support format like below:
..the point being able to define content/title in blocks
<div id="example">
<div class="original-title">
Twitter Bootstrap Popover
</div>
<div class="data-content">
It's so simple to create a tooltop for my website!
</div>
<a>hover for popover</a>
<div>
$("#example").popover({placement:'bottom'})
Currently, no, since the popover script is basically extending the functionally of the tooltip script, but nothing is impossible. You can modify the script and add custom data-attributes to support your markup yourself, but then when updates come around you will have to do it again if you want to support your edits, or not update at all.
I think that can be possible using a javascript code to give the content of this divs to the elements but is not recommended.
$("a").attr("data-title",$(".data-title").html()).attr(".data-content",$(".data-content").html());
$('a').popover({placement:'bottom'})