JSTL inside jQuery - javascript

I'm creating tabs dynamically in bootstrap tabs using jQuery. This is triggered with an event
To more clear look here is what I'm doing:
$('.tab-content').append('<div class="tab-pane" id="tab_' + id + '"> </div>');
Now inside the <div> I'm going to write a long HTML so I thought that it could be messy if I write all the code in the jQuery. So I decided to make an external file and import it using JSTL and write the import inside the jQuery code:
$('.tab-content').append('<div class="tab-pane" id="tab_' + id + '"> <c:import url="flt-pis.html"></c:import> </div>');
The <c:import url="flt-pis.html"></c:import> of JSTL seems not working, I don't know why. Is there an other way around?

jstl is run server side. javascript client. This won't work.
You can reference jstl inside embedded javascript with in your jsp page- the text is output to the js on server side.

Like mentioned before you cannot run JSTL on client side.
Given that the page is on the same domain (and by the sound of it, it is) you can use jQuery "load" function to put HTML from external file in your newly created div.
for example, after you execute this
$('.tab-content').append('<div class="tab-pane" id="tab_' + id + '"> </div>');
you can then do this:
$("#tab_"+id).load("flt-pis.html");

Related

Open uikit modal on page load

I'm currently working on a project in Flask and I'd like for (under specific circumstances) open up a modal when the page loads. Currently what I have is as follows:
My view function passes a variable 'open_modal' into the template
return render_template('index.html', open_modal = "window.onload() = function(){UIkit.modal(#modal1).show();};")
and inside the template itself, there's a part in the template which looks like:
<script type="text/javascript">
{{ open_modal }}
</script>
And the modal itself looks something like:
<div id="modal1" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
Test test!
</div>
</div>
And so what I was hoping is that whenever I use the render_template with the kwarg 'open_modal' as that value above, it'd insert the javascript fragment into the template and then ta-dah! The modal would open when the page loads. However, this doesn't seem to work, and I can't figure out why.
Admittedly, I have no experience with javascript so I would have no clue if the script fragment that is inserted by 'open_modal' even works, but I'd rather stick to vanilla javascript because this is the only bit of javascript in my program, and I'd rather not add more bulk to it unnecessarily with jquery etc.
Thanks a bunch if you can help!
The onload is not a function, it's a property of window. You have to assign a function to it:
return render_template('index.html', open_modal = "window.onload = function(){UIkit.modal('#modal1').show();};")

Angular expression in javascript of HTML page

i have an ng-repeat but i need to use Angular expression inside javascript of my html page(of course app and controller are declared, but have not been posted here):
<div ng-repeat="eleRubrique in scopeComplet">
<script type="text/javascript">
alert('index ' + {{$index}});
</script>
</div>
That does not work. what would be a workaround ?
Thank you for an answer.
I think this would work for you
<div ng-repeat="eleRubrique in scopeComplet" ng-init="alert('index ' + $index)"></div>
And if you would need a more complex script I would recommend to write a function for that and call the function from ng-init
You should not use double curly braces {{}} in JavaScript. They are meant for HTML only in Angular.
Since the JavaScript code in your HTML has nothing to do with the view, can you not achieve the same goal in the controller?

how to dynamically action an angular ng-include command

Is it possible to dynamically add an ng-include element to a HTML page and have it actioned?
I have a Drag N Drop application where you can drag an element onto the page and in the drop zone the element is replaced with a more detailed element. For examples you drag a box that says Calendar and when it is dropped a calendar is presented. To be clear a new Element is created and added to the DOM, it does not exist before the drop.
When the element is dropped, I'm hoping that I can replace it with a chunk of HTML that looks like below. Instead of having the markup defined in a string like it is at the moment which is not very nice:
<div class='panel panel-default'>
<div class='panel-heading'>
<h3 class='panel-title'>
<span class='glyphicon glyphicon-remove'></span>
WIDGET NAME
<spanclass='glyphicon glyphicon-cog'></span>
</h3>
</div>
<div class='widgetContainer' ng-include="'widgets/widget.html'"></div>
</div>
When the above HTML is inserted into the page the referenced HTML file is not included.
What I would like to happen is a HTML file is loaded containing the widget markup and included at the appropriate position.
I'm new to Angular so I don't know if this is because:
dynamically adding ng-include isn't supported
whether I need to do something with the controller to handle this logic
should I be using the tag instead of the attribute?
it just isn't possible.
Please provide examples with solutions, as I said I'm new to Angular.
Thanks
UPDATE
The code used to created the HTML that I want to dynamically add to the page looks like this
$("#template").append(
" \
<div class='panel panel-default'>\
<div class='panel-heading'>\
<h3 class='panel-title'>\
<span style='padding-right: 10px; cursor:pointer;' class='glyphicon glyphicon-remove' onclick='removeElement(this)'></span>\
" + widgetDetail['serviceName'] + "\
<span style='float:right; cursor:pointer;' class='glyphicon glyphicon-cog' onclick='toggleWidgetDetail(this)'></span>\
</h3>\
</div>\
<div class='markupContainer' ng-include=\"'widgets/" + id +".html'\"></div>\
</div>\
"
);
I've uploaded the complete code to GitHub. The drag and drop aspects are being handled currently by HTML5 javascript, which can be seen in the file /public/javascripts/js_dragndrop.js. The new widget being added to the page (the code above) is in /public/javascripts/jq_dragndrop.js
I'm in the prototyping phase trying to work out the DragNDrop elements so don't expect high quality code :)
I found a way of achieving what I wanted by moving the HTML5 drop and drop code into AngularJS directives and then (using this [ Compile dynamic template from outside of angular ] as a guide) got the html templates being loaded where I wanted them.
The main code change looks like this:
angular.element(document).injector().invoke(function ($compile) {
var widgetDetail = widgets[e.dataTransfer.getData('Text')];
var obj = $("#template");
var scope = obj.scope();
obj.append(
"<div class='panel panel-default'><div class='panel-heading'><h3 class='panel-title'>\
<span style='padding-right: 10px; cursor:pointer;' class='glyphicon glyphicon-remove' onclick='removeWidget(this)'></span>\
" + widgetDetail['serviceName'] + "\
<span style='float:right; cursor:pointer;' class='glyphicon glyphicon-cog' onclick='toggleWidgetDetail(this)'></span>\
</h3></div><div class='markupContainer' ng-include=\"'widgets/" + widgetDetail['serviceId'] + ".html'\"></div>\
"
);
$compile(obj.contents())(scope);
scope.$digest();
});
You can find the full code in the Git Project /public/controllers/template.js if you are interested.

AngularJS - Can you reference a repeater variable in a block of javascript?

Simply put, I'm using AngularJS trying to do something like this:
<ul>
<li ng-repeat="thing in things">
<a id="mybutton" href="link{{thing.Id}}">Click</a>
<script type="text/javascript">
$("#mybutton").click(function()
{
alert("Id: " + {{thing.Id}});
});
</script>
</li>
</ul>
Both that, and alert("Id: " + thing.Id); yield errors (unespected token '{' and 'thing' is not defined, respectively). Is there a way that I can access thing.Id from a block of javascript within the repeater's scope?
To add a practical reason, I'd like to build and redirect to a URL using that value and a few other things in javascript (where I have access to jquery).
Mike, using angular expressions ({{thing.id}}) in the tag won't work since angular.js is not a text-based template system but rather uses DOM as its templates. Here is more on this topic: http://docs.angularjs.org/guide/compiler
Now, coming back to your question: what you are trying to do can be done very easily in angular.js without using jQuery, here is a working jsFiddle: http://jsfiddle.net/pkozlowski_opensource/n6UfC/
The trick is to use a ng-click on your href:
<a ng-click="click(thing.id)">Click</a>
and then a click-handler function in your controller:
$scope.click = function(thingId) {
alert("Id: " + thingId);
//$location.path('/some/path/'+thingId);
}
In the controller's function you can use jQuery instructions but you would be better off using angular's $location service: http://docs.angularjs.org/api/ng.$location
I would store it to the element like "data-id={{thing.id}}"
Then from javascript read the ID back using the data attribute.

Appending HTML to end of body using javascript

I have several templates for faceboxes (lightbox) that I need at different points of the application. These are stored in different partials and files.
I will initialize different javascript functions in accordance to which ones I need. The question is, what is the best way to append the external HTML page into my body using javascript?
Since you tagged the question with it, here's a jQuery solution.
$("body").append("text");
Remember that the parameter can also be a DOM element. So you can do this :
var p = $("<p/>").text("a paragraph");
$("body").append(p);
the easy way with jQuery is:
$('#result').load('test.html');
<div id="result"><!--/ Hold My Data! /--></div>
obviously you can change #result with body
Also you can try some templates library..
Like handlebar and underscore..
and append in the el provided by backbone.js
Suppose you want to append this html in your template, then you can use the below code according to your application
Consider the code
Example 1:
rowData += '<div style="width: 130px;">'+param1+'</div>';
rowData += '<div style="width: 130px;">'+param2+'</div>';
$('#ID').html(rowData);
and please make sure that the js should be include in that file.
Here is the information of variable used above:
row data - the html that you want to append,
param- if you want to show the value of java script variable on browser dynamically,
#ID- ID of the div in which you want to append this html
example 2:
Consider the following HTML:
<h2>Hello World</h2>
<div class="user">
<div class="inner">Hi</div>
<div class="inner">Bye</div>
</div>
You can create content and insert it into several elements at once:
$( ".inner" ).append( "<p>Lorem Ipsum</p>" );

Categories