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');
});
});
Related
I want to move my html content from one div into another BUT WITHOUT rendering it again!
When I use the jquery html() method it will be rendered fully again!
E.g.
<div id="1">
<script>console.log("test")</script>
</div>
<div id="2">
</div>
<script>
$('#2').html($('#1').html())
</script>
will cause:
test
test
what I want is:
test
You can try using a combination of jQuery's .appendTo() and .clone() methods.
<div id="1">
<script>console.log("test")</script>
</div>
<div id="2">
</div>
<script>
$('#1').children().clone().appendTo('#2');
</script>
Here's a JSFiddle to demonstrate. Take a look at the console, and you should see that "test" is only logged once. If you want to move the elements from #1 to #2 rather than copy them, you can just remove .clone() from the chain.
Hope this helps! Let me know if you have any questions.
<script>
$('#2').hide().html($('#1').html())
</script>
I have this html structure (refer below)
<div class="pagination_info"></div>
<div class="pagination_numbers"></div>
Now, what I want is to add a start div tag before the .pagination_info div and add end div tag after the .pagination_numbers div so the expected output must be (refer below)
<div class="pagination_wrapper">
<div class="pagination_info"></div>
<div class="pagination_numbers"></div>
</div>
what I tried so far is (refer below)
$('.pagination_info').before('<div class="pagination_wrapper">');
$('.pagination_numbers').after('</div>');
so supposedly, what im trying to achieve is to wrap the .pagination_info div and .pagination_numbers with a parent div that has a class name "pagination_wrapper" but sadly unsuccessful yet. Any help, suggestion, recommendation, ideas, clues to make this work will be greatly appreciated. Thank you.
jQuery has a wrapAll method:
$(".pagination_info, .pagination_numbers").wrapAll("<div class=\"pagination_wrapper\">");
Working Example
.wrapAll() will wrap the two div's around the new div:
$(".pagination_info, .pagination_numbers").wrapAll("<div class='pagination_wrapper'>");
FIDDLE
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.
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.
I was searching for this one for a couple of hours now but I couldn't find the exact same problem as mine:
I have the following code in my html:
<div id="list" style="display:none;">
<div id="insideList">
<!-- Some picture will go here -->
</div>
</div>
when I'm wrote in my JavaScript file:
$("<img src=\"images/somePicture.jpg\">").appendTo("#list");
it worked fine, however when I tried writing:
$("<img src=\"images/somePicture.jpg\">").appendTo("#insideList");
It showed nothing on the page. What am I missing here?
Edit: I'm calling $("#list").show(); eventually...
If you are gonna append to inside list, then try to set display:none for insideList and call insideList.show() instead of list.show();