Folks,
I am trying to dynamically generate a modal. How would I find this piece of text and swap in the values?
I have a label, which I would like to dynamically set the content to from the table. Whats the proper way to find and replace the | .emailAddress ?
.modal-body
h3
span.label.label-info Email
| .emailAddress
script.
var $modal = $('#mymodal')
, $titleField = $modal.find('.modal-title')
, $emailField = $modal.find('| .emailAddress');
$('body').on('show.bs.modal', '.modal', function () {
var mid = $(event.target).closest('tr').data('id');
var email = $(event.target).closest('tr').data('email');
$titleField.text(email);
$emailField.text(email);
});
You don't explain how you're using Jade, there are two versions:
server side, your client get an generated HTMl
client side, you compile your Jade template to JavaScript and load the JS file in the client.
For your problem there are two solutions:
You change the HTML which is already generated because the user action can be triggered after the page is loaded. (this is how your solution looks like, but this has nothing to do with Jade!)
You reload the Jade template: remove the old template from the DOM and pass the use data (from the modal action) to the new template, only works for solution 2.
But maybe your error is this selector, which is not correct:
$modal.find('| .emailAddress');
try this:
$modal.find('.emailAddress');
Related
I tried rendering EJS code that I sent from home.js to home.ejs as a string but it didn't work. I'm trying this now but nothing seems to work. My code is:
home.js
var templates = {};
templates.onScroll = fs.readFileSync('views/partials/onScrollAppendPost.ejs', 'utf-8');
res.render("users/home", {templates: templates});`
home.ejs
var template = new EJS({text: <%- JSON.stringify(templates.onScroll) %>}).update('#mainContainer', {postArr: postArr});
Edit:
What im trying to do is I want to detect when a user gets to the bottom of the page. With this code:
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
//get post data and append post
}});
When the user gets to the bottom of the page i want to append ejs code to the page. Basically i want to communicate between ejs and js.
Based on the example at http://ejs.co, you first need to include a browser build of ejs in your page:
<script src="ejs.js"></script>
Then you can use EJS client-side like this:
var html = ejs.render('your template here', {postArr: postArr});
$('#mainContainer').html(html);
Here's I'm assuming postArr is set appropriately, possibly as the result of an AJAX request.
As you're using EJS to generate EJS it all gets a lot more difficult to understand but the relevant code in your home.ejs would be something like this:
var html = ejs.render(<%- JSON.stringify(templates.onScroll) %>, {postArr: postArr});
$('#mainContainer').html(html);
This assumes that the onScroll template doesn't include any other templates. You haven't specified whether home.ejs is being used to generate HTML or JavaScript so it's unclear precisely what other escaping considerations might apply but it's possible that won't be a problem.
I have a custom template tag that returns suppose name of a student and roll number if passed as an argument id of the student.
#register.inclusion_tag('snippet/student_name.html')
def st_name_tag(profile, disp_roll=True, disp_name=True):
#some calculations
return {'full_name':student.name,
'roll':student.roll_number,
}
The template(included) consists of some Html file which is written in a single line(to avoid unterminated string literal error from js).
I simply want to call the st_name_tag from inside the JS function.
My JS looks like:
{% load profile_tag %}
<script type = "text/javascript">
eventclick : function(st){
var div = ('<div></div>');
var st_id = st.id;
if (st.status == 'pass'){
div.append('<p>Student Name:{% st_name_tag '+st_id+' %}</p>');
}
}
So far I tried the above method along with removing the + and '' signs from st_id varaible. That hasnt helped me at all. Help Please!
You are trying to render a template based on the interaction by user. The first happens on the server (server-side as it is often referred to), and the latter happens on the user's browser.
The order that these happen is first to render the template on server, send and present in browser, then user interacts with js. Because of this fact, as I mentioned in the comment, it is not possible to affect the template rendered within javascript.
I would recommend you to use ajax in order to accomplish this. Whenever an iteraction occurs, you asynchronously make a request to the server to present you with new data.
I have a file which contains lots of tags like follows
<script type="text/template" id="template-1">
</script>
<script type="text/template" id="template-2">
</script>
I want to load the file and than load all the content inside the script tags in memory.
I am trying the below code but its not working.
tpl = {
// Hash of preloaded templates for the app
templates : {},
loadTemplates : function(name) {
var that = this;
$.get(name, function(data) {
$(data).find('script').each(function (_, entry) {
that.templates[$(this).attr('id')] = $(this).text();
});
});
},
// Get template by name from hash of preloaded templates
get : function(name) {
return this.templates[name];
}
};
any help?
call is made like this
tpl.loadTemplates('/templates/templates-home.html');
In general you seem like you're on the right track. The browser will load (but ignore) script tags marked with type=text/template and you can later select the contents of those tags and process them with javascript.
I think your problem is likely with the order of your procedure.
You haven't posted the javascript that uses your templates so I can only assume. I suspect your trying to load the templates before the document is ready, thus, the script tags aren't actually on the page when you load them. To fix, your can move your javascripts below the templates in the document OR execute your code in a window.onLoad handler.
EDIT
Okay, now I have a better idea of what you're trying to do. You still haven't told me what part of this is broken, but my gut tells me that this bit is the problem: $(data).find('script'). jQuery expects to be traversing the DOM. At this point in time, data is just a string returned from the server, it's not actually loaded in the DOM. So jQuery won't actually find ANY script tags. Try appending your result to the body before querying the DOM for script elements. Maybe something like this:
$('body').append(data);
$('script[type="text/template"]').each ...
I'm not really thrilled about that though. Can you just inject them into the page on the server side? Why do you need to delay the loading?
EDIT 2
If you don't want your script tags to be visible in the html document, then I suggest you don't use them. Instead you can have your template endpoint just return a bundle of javascript and evaluate it directly. Something like:
$.get(name, function(data) {
// data is a string that sets up your window.template variable
eval(data);
});
My servlet sends to the JSP page an object. This object has some attributes and depending on these attributes i want to change the color during a hover action. One solution is to change the hover style directly in my JSP page. But i was wondering, can i use somehow this object inside the script tag and take the decisions from there? I found this but it didn't work (or i use it a wrong way)!
<script>
$(document).ready(function() {
//import myObject;
});
</script>
Your JSP gets rendered on the server and sent to the client. The client (browser) does not know anything about your Java/JSP code.
But, you can render properties of your Java object into the rendered page, like:
<script>
var stringVariable = "${myObject.myStringProperty}";
var intVariable = ${myObject.myIntProperty};
</script>
This will be rendered on your server, and the browser will see it like:
<script>
var stringVariable = "Hello World!";
var intVariable = 4711;
</script>
Using this technique, you can use your server side variables on the client, wherever you need them (HTML, CSS, Javascript).
Is it possible, if one has a javascript variable like this:
var myVariable = "alert('BAM! It works!');"
to send it to an html page that has a script tag in, in other words, looks like this:
<script id="theScriptTag"></script>
and by 'sending' I mean going like this in the Javascript file:
getElementById("theScriptTag").innerHTML = myVariable;
Now maybe people normally don't do this. If there's another way to get a Javascript variable to an HTML page please don't hessitate to tell. It's difficult for me to explain why I would like to do it like this, only that I need to do it like this.
Thanks in advance!
EDIT...
From all the comments I can see this is some serious bad practice. Let me give you the over view and 'bigger picture' here... On the very same HTML page there is a form, and a div. Now right after a user fills out the form and submits it, it goes to the server and 'custom javascript' is generated depending on the variable the user selected. This custom javascript is then intended to go back to the client and execute. When it executes is creates/fills up a div element that then contains a google charts table (thus needed to get generated server side). The JS that needs to be executed looks like this:
var sendAttemptsChartTableData, sendAttemptsChartTable;
google.load('visualization', '1', {packages:['table']})
google.setOnLoadCallback(drawTable);
function drawTable() {
sendAttemptsChartTableData = new google.visualization.DataTable();
sendAttemptsChartTableData.addColumn('string','smsGuid')
sendAttemptsChartTableData.addColumn('string','attemptNo')
sendAttemptsChartTableData.addColumn('string','response')
sendAttemptsChartTableData.addColumn('string','error')
sendAttemptsChartTableData.addRows(1)
sendAttemptsChartTableData.setCell(0,0,'092A49AA-E2EF-46D3-A83E-0932B17B649A')
sendAttemptsChartTableData.setCell(0,1,'1')
sendAttemptsChartTableData.setCell(0,2,'<aatsms><submitresult action="enqueued" key="2066317199" result="1" number="0833756610"/><submitresult action="enqueued" key="2066317200" result="1" number="0833756610"/><submitresult action="enqueued" key="2066317201" result="1" number="0833756610"/><submitresult action="enqueued" key="2066317202" result="1" number="0833756610"/></aatsms>')
sendAttemptsChartTableData.setCell(0,3,'')
sendAttemptsChartTable = new google.visualization.Table(document.getElementById('sendAttemptsTable'));
var view = new google.visualization.DataView(sendAttemptsChartTableData);
sendAttemptsChartTable.draw(view, {showRowNumber: true, allowHtml:false});
google.visualization.events.addListener(sendAttemptsChartTable, 'select', smsSearchHandler);
}
Based on your edit I understand your form sumbission results in a custom script. Would a JSONP-like solution work? Basically you can create a script tag in your current document, pointing its source to a server side script that processes the form and returns the code.
A basic example:
function getScript(){
/**process form, generate params**/
var nwScript = document.createElement('script');
nwScript.src = '/myscriptsrc/somescript.php?'+[generated parameters];
document.body.appendChild(nwScript);
}
If your goal is to execute the javascript code contained in the string, you can use the following :
var myVariable = "alert('BAM! It works!');";
eval(myVariable);
What you are trying to do is essentially this:
var myVariable = "alert('BAM! It works!');";
eval(myVariable);
eval takes the string you provide and "evaluates" the content - it executes the javascript stuff you provide in the string. Normally you want to do this with input from the user.
But this is considered bad habit, because:
it is slow
it is unsecure
Usually you can go another way, so you don't need to use eval. In most cases this is cleaner, faster and more secure.
Perhaps you could tell, WHAT you are trying to achieve, and then we can find a better solution.