I'm doing few exercise using Node.js, Express.js and MongoDB.
At the moment I've a problem trying to push new contents created with jQuery.Ajax.
I have a list of posts in homepage with Jade: (now I will write something simple, but mine is with much more html elements...)
ul
each post in posts
li
h1 title
p post
With a normal form and postback it is ok because the page is refreshed.
Bue using jQuery and Ajax on success I should append the new post without refresh the page...
There is a solution with Jade to do that without writing the entire html in jQuery?
Can you suggest a better way to do this?
Jade is compiled as HTML, so no, there is no way to use jade templates in your jQuery. What you can do, however, is write snippets in jade, compile them, and save them to your webserver (such as post_template.html), then load file with jquery, create a jQuery element from the loaded text, and then change properties and contents of the elements within the new element. Then you append the element to the page.
This approach would allow you to avoid writing html in your jQuery.
//Wrap this in the code that gets updates
$.get( "templates/post.html", function( data ) {
var el = $(data);
//If you want to change specific properties
var title = el.children('h1');
title.text('My new text');
el.appendTo('ul#postList');
});
If you wanted to do this on click, for example, just wrap that function in a click handler for some element on the page that you want to use to trigger new item.
Related
I am trying to reference a HTML tag that is generated by a django's django_jsonforms link JSON Schema link via javascript to dynamically update the form. For example 2 dropdowns in a form, if you make a selection in the 1st dropdown the 2nd dropdown should update. I've done this for HTML selection tags that I manually typed out but I am trying to get this to work for HTML generated by JSON Schemas. Here is what I've tried:
inspect HTML page and try to call the tag by name with
var project_selection = document.getElementsByName("form[project]")[0];
this didn't work, which I was a little surprised by since I see when I inspect the page that the select tag has name="form[project]"
then I thought maybe the JSON Schema renders the tag after the javascript runs so I tried adding defer into my <script defer> and that didn't work
I tried using JSON Schema $id #anchor and $ref but none of those worked to reference the tag by ID
when I try a dummy tag with name I get a NodeList back that I can access with project_section[0], however when I try to do the same thing for this select tag generated by django's json schema i get what it looks like an empty list but the tag is under it (however I cannot access it). See the figures below.
dummy test for h1 tag with name
actual django generated select tag with name (looks empty but it's not when I expand it, however, I cannot index [0] item on it)
I am sure someone has come across this before so I hope this is an easy answer.
At the end of the day, I know I need to use the following with the JSON Schema to do a similar to onchange as shown in link
var element = document.getElementById('editor_holder');
var editor = new JSONEditor(element, options);
editor.on('change',function() {
// Do something
});
thanks for taking a look in advance!
references:
json schema
json schema editor github
json schema python
json schema python for django
Not entirely sure on this one, but you are using
getElementsByClassName, which is relevant to the class name of the element. Not the name. So for example:
<div class="cname"></div>
That is a class name, form elements have a name attribute that you can query via
var project_selection = document.getElementsByName("form[project]");
Finally figured out what was causing the issue. The DOM was not finished rendering the JSON Schema Form before the script was executing to call
var project_selection = document.getElementsByName("form[project]");
therefore wrapping the above script in a jquery ready function fixed the issue.
<script>
$('document').ready(function(){
var project_selection = document.getElementsByName("form[project]");
console.log(project_selection);
console.log(project_selection[0]);
});
</script>
see more at: Javascript HTML collection showing as 0 length
I am new to AngularJS with a jQuery background. For what I thought would be a simple task I am just finding it to be increasingly difficult. I have looked around on how to dynamically add html and bind to a controller but I just have not found my particular situation.
This is what I am trying to accomplish. I'll want to keep it simple for now with a simple dialog box. Basically, suppose I want to create my own custom dialog box. Suppose based on a button click I want to display the message "Are you sure you want to so and so" with the buttons yes, no, cancel. Then based on the button click, I'd like to perform a specific operation, users with windows development will be familiar with this.
First I must construct my message and my dialog box html based on the button clicked, append that output html to the document body as position absolute, and then once done with this remove the html from the document body.
In jQuery I can simply do this
...somewhere in code
var html = "<div id='123' class='dialog-box'><button id='yesButton'></button>
...elements for no and cancel</div>";
DisplayDialog("123", html);
...
function DisplayDialog(elementId, html) {
$(document.body).append(html);
var dElement = $(document.body).find("#" + elementId);
$(dElement).find("#yesButton").on("click" function () {
...code
$(dElement).remove();
});
...code for no, and cancel events
}
I just can't understand how to do this simply the angular way. Basically, I want to be able to get html, append it somewhere (whether in the body, or in a div element etc), and be able to interact with it using the $scope. I kept it simple for now for a dialog box, if I can understand this I can apply to much more complex operations where I might need to retrieve partial views in my MVC application and append it to a div
Its pretty straightforward in angular, this shouldn't be to hard for you given the jquery background:
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.append('Hi<br/>');
https://docs.angularjs.org/api/ng/function/angular.element
Another way:
You then use ng-bind in the html and set it to a $scope variable that represents the html:
<div ng-bind-html="divHtmlVar"></div>
$scope.divHtmlVar = '<b>main html</b>';
Relevant blog post:
http://blog.sodhanalibrary.com/2014/08/append-or-prepend-html-to-div-using.html
Let's say you're retrieving a complete HTML page using Ajax. You now have a page of HTML in a variable.
Assuming you need to find and extract some data from that page, how do you do it?
Traditionally I've done this using regular expressions, but I'm wondering if there's a way to perform jQuery operations on that retrieved source code instead. It would simplify things tremendously, as jQuery is built for parsing HTML DOM trees.
I'm thinking maybe appending the retrieved source to the current page DOM in hidden form...? Is there a better way?
jQuerys parseHTML might be what you are looking for: http://api.jquery.com/jquery.parsehtml/
If I understand you well, you have the html code of the page loaded through ajax in a variable (let's call it data), and then you want to search through it using jquery operations.
You could create a container in your first html page, and then fill it with the content returned by Ajax. You can then handle it normally with jQuery
So:
<body>
<div id="first_page">
<h3>First page</h3>
<p>This the page that makes the Ajax call</p>
</div>
<div id="ajax_container"></div>
</body>
Now, after you Ajax call, you fill the container with data
$("#container").html(data);
Then, you can use .find(), or simply write an appropriate jquery selector.
var a = $("#container").find("#my_id").html;
var b = $("#container #my_id").html();
Now a and b should contain the content from the element with id my_id from the page loaded with Ajax
PS: I'm not sure if you want to append the data to you current page. You don't have to, if that's not what you are trying to achieve.
We're using Spring and PrototypeJs in our app. Basically I want to have a template page and then fill the template page with some values. I found a JQuery.load method but we're not using JQuery.
Closest thing I found was prototype Template object which is just a string. I can make a template in Javascript like the following:
var template1 = new Template("user id: #id name is <span class name='userName'>#name</span>");
and then once I have all the data as json fill in the blanks but this is not enough. I want to display tags etc and be more complex and ideally just load this template file once and just fill in the values later. Is that even possible without using backbone.js or angularjs?
I guess my question is, how do I construct a page better? Currently I'm creating my entire page in javascript (e.g. new Element("div").addClassName("something")) so I was hoping to create my page 'template' in a jsp or some other form and then just fill in the blanks.
I have all the data to display on the page as json.
The Template class is quite flexible about how you create its members. What I would do, for readability, is code your template as an actual page element in the HTML, and then remove it on page load before using it to fill in your JSON.
<div id="template-1" class="#{classname}">
<h1>#{headline}</h1>
<p>#{description}</p>
</div>
<div id="articles"></div>
<script type="text/javascript">
var tmp = $('template-1').remove();
tmp.writeAttribute('id',false);
var template = new Template(tmp.outerHTML);
// do whatever with it
$('articles').insert(template.evaluate(myJSON));
</script>
That should get you started. The major benefit of working this way is that you don't have to keep backslashing quotes and writing everything in one line, or bashing it together with + signs.
I kind of need to create html page copy by clicking on button in this page, but where all <input type = 'text'... replaced with it's values.
I think, I can handle the second part, but how first to get html code?
Are this ever possible?
I need this for generating html reports.
Page is shown in internal browser of my prog. The basic idea, the student see the page with inputs, then when he fill all, he press button inside HTML page, some JS handler work and send to my prog same page, but without inputs for later review for teacher.
If you want to get the html for the body of the document, use this:
document.body.innerHTML
You can then modify it as needed and change it:
document.body.innerHTML = ... modified html ...
There are better ways to achieve the result though, like manipulating the DOM with jQuery.
You can use document DOM element and serialize it:
(new XMLSerializer()).serializeToString(document);
for cross-browser compatibility see this post
If you have a <form> you can post to the same page adding ?post=1 to the action.
Then in the php
if ($_GET["post"]==1) {
//same table or div structure getting the values submitted by the form
}
Do you know how to do it? was this you needed?