I need a reference of a HTML element that has an id of #searchResults
$.get('search-for-prospect', function() {
_content.find('.prospect-container').sort(function(a,b){
...stuff...
}).appendTo('#searchResults');
})
I tried using jQuery's get to get the that element, but it doesn't work as expected.
I need to get a reference of searchResults and append to it. How can I achieve that?
The only way to get HTML from another page with javascript is by making AJAX call (in fact js template engines work this way).
So you have to $.ajax the page you want, parse it as HTML and do what you want to do.
Beware: you are not editing the HTML file itself, but just its "in memory copy".
Javascript, as far as it is used as client-side technology, does not allow modifying files or in general accessing the file system. So if you're looking for some trick to write in the HTML, you're on the wrong way
Related
I have a page which has many buttons that perform an action with javascript. No problem here, just a html page and multiple .js file, one .js file for every action. Just to separate stuff a bit and make everything a bit more manageable. I will write a script to combine them all at deployment.
A lot of my javascript actions need html elements to function. For example to change a color the color.js needs a div with form elements so that user can change the color and press the button to save changes. The color.js binds functions to the onClick of the buttons and such. No problem here.
A problem comes up when there are many javascript actions using many html elements. All these html elements need to put into one html page. This makes managing things complicated. For example when i change the color field id i need to go to color.js and do the change. In addition i have to find the html element in my huge html page and also do the change.
Is it possible to put the html elements needed by my javascript actions into the .js file and somehow include it in my html page?
Of course i can escape all html elements and put it in a javascript variable and document.write it. But escaping is not a nice thing to do and changing html afterwards is quite painful.
I'm also not looking for a ajax function, cause with many different actions this will cause network problems.
Cheers for any thoughts on the subject!
You can use templates to generate dynamic HTML via JavaScript. Most of Templates Engines have the same implementation:
A template structure (DOM) or HTML string
A method to render the template
The data that fills the template (Array, Object)
Settings to configure the template engine
I have used some template engines, one of them is Hogan.js which has a friendly sugared-syntax, very easy to use, but lower performance. It implements the Mustache syntax.
Other template engine is in Underscore.js library, which provides no sugared-syntax but a native javascript syntax, giving more power, and best performance.
The last one that I have used is kendo-ui templates.Kendo UI templates have a heavy emphasis on performance over feature glut. It will trade convenient "syntax sugar" for improved performance.
If you want to try more engines, here you can get a lot of them:
Template-Engine-Chooser
By other hand, if you want just to load static HTML (e.g. an static view), you can use jQuery.load(url) to load data from the server and place the returned HTML into the matched element. .load() is a shorthand method of jQuery.ajax()
Recomendation: whichever option you choose, I recommend using cache, either to save the view or to save the compiled template, thus the performance is improved by avoiding request of the same resource.
Background information :
A tool simulates IE behavior, instead of HTML for browser, it uses a special object which contains html segment<![CDATA[ HTML Here or JS here ]]>. The tool disabled the ajax call; however, the activeX works on that tool. In other words, HTML display in browser = special object display. No server side language (i.e. php) allowed.
Problem :
The object developed for that tool contains everything(html+css+js) in one single file. Then it makes developer difficult to manage changes. Currently, when I develop, I copied the HTML from <![CDATA[ All HTML or JS here ]]>; after I modified it , I copied the html file back to <![CDATA[ HTML Here or JS here ]]>. I want the object is more organized, for example: in the html segment of the object, just put something like <![CDATA[<javascript>require a.html<javascript> ]]> , then the content in a.html will be automatically placed in the object. Can you suggest any solution or any library for this problem?
ps: I didn't use requirejs before, it seems requirejs uses ajax call to include text file, is it possible that requirejs uses local path to include a file?
Thank you.
Partial solution to my problem: I used activeX to read the entire file, and used jQuery to set the file content to some html element. so the js will look like:
<![CDATA[
<script>var k = readfile(getAbsolutePath()+"\\a.html");
jQuery("#display").html(k);<script> ]]>
I think this solution is for my tool only; To make it work, some requirements:
1. can get the absolute path of the text/html file.
2. activeX works.
OK, now that I understood your problem.
Use
<iframe src="another_file.html">
That is probably the only way to load multiple html files without Ajax or PHP, as far as I know.
Per comment from prytsh, using an embed call should do the trick in HTML5:
You can try this by using jquery
//use this line in jquery
$("#id").load("trackingCode.html");
I am currently writing a program that uses AJAX to load a form for editing objects on a website. I have found a similar question at Loading script tags via AJAX, but it doesn't really satisfy the needs of the program.
The ajax returned is a pre-built set of elements in a form, and when certain areas are called, say, a TinyMCE textarea (which it is), it returns a set of script tags built into the text.
So my question is, is it possible to run through the script tags that have been put in the div and run them?
Plus, I want to avoid using jQuery as it could be running on any number of platforms.
Yes, you can add the incoming html and scripts to the dom, then search the dom for any script tags. You would then eval the scripts and could ignore any jQuery script tags if you wish.
However:
This sort of solution tends to be quite brittle.
It would be much better and more stable for you to modify the Ajax payload into separate html and javascript scripts. That way your Ajax handler would be able to handle them directly without trying to separate them.
Added
Re: how to send back the html and javascript parts: you can either make separate Ajax calls, or return an JSON object that includes both parts. Eg:
{"js": "<the js part of the response>",
"html": "<the html part of the respons>"}
Use a json library on your host system to take care of the issue of escaping any quotes or other json special characters in either the js or html values.
Returning both the html and js at once saves an Ajax call (which can be significant) and will usually simplify your code quite a bit vs two calls.
I use this technique in production and it works well.
Do you mean you return a js script from the ajax and want to run it??If so, you can use the eval function.
How can I use a custom tag inside my javascript code? For example:
function toHTML(message){
return #{customTag message:message /};
}
does not work..
Thanks!
//Some clarification
I am retrieving a list of messages using AJAX, and I have an html tag called "customTag" which contains the html code to format the message into a <li> element.
If I call
#{customTag message:'hello' /}
directly in the HTML file, it works and replaces it by <li>hello</li>. But when I try calling it from javascript, I get an error message.
The problem you have, is that you are trying to mix server-side logic (the rendering of templates) with client side events (the javascripts execution). So, your approach will not work, because the custom tag is executed from the serverside before you it ever gets to the client side.
You can get it to work using Play tags, but I would suggest that you think about using Javascript templates for doing this kind of client side. Take a look at the Chat application in the samples-and-tests folder in the Play download to see it in action. However, if you want to get it working using Play templates/tags, see below.
If you change your custom tag so that it does not take in an input, but instead is "aware" of the javascript variable, then this should work. So your tag code would look like
"<li>" +message+ "</li>";
So, this does not use the tag to pass variables into the tag, but instead uses the client side javascript variable.
I tested this with the following code in a test application (views/Application/index.html) and it outputted the javascript as expected.
<html><head></head>
<body>
<script type="text/javascript">
function toHTML(message){
return #{message /}
}
alert(toHTML("hello"));
</script>
</body>
</html>
This wont work. Try using double quotes around your value. Or, write clearly what you want actually.
In my opinion, this can't work because custom tag is evaluated on server side i.e. before the content was send to the client and then before the JavaScript was interpreted.
[sorry for my English !]
I've been trying to get this sorted all day, but really cant figure it out. I've got a page with <div id="ajax"></div> that is populated off a tab based menu pulling in a snippet of HTML code stored in an external file that contains some javascript (mainly form validation).
I've seen in places that I need to eval() the code, but then on the same side of things people say its the last thing to do.
Can someone point me in the right direction, and provide an example if possible as I am very new to jQuery / JavaScript.
Many thanks :)
pulling in a snippet of HTML code stored in an external file that contains some javascript (mainly form validation).
Avoid doing this. Writing <script> to innerHTML doesn't cause the script to get executed... though moving the element afterwards can cause it to get executed, at different times in different browsers.
So it's inconsistent in practice, and it doesn't really make any sense to include script anyway:
when you load the same snippet twice, you'd be running the same script twice, which might redefine some of the functions or variables bound to the page, which can leave you in extremely strange and hard-to-debug situations
non-async/defer scripts are expecting to run at parse time, and may include techniques which can't work when inserted into an existing document (in the case of document.write this typically destroys the whole page, a common symptom when trying to load third-party ad/tracking scripts).
Yes, jQuery tries to make some of this more consistent between browsers by extracting script elements and executing them. But no, it doesn't manage to fix all cases (and in principle can't). So don't ask it to. Keep your scripts static, and run any binding script code that needs to happen in the load callback.
If you fetch html via Ajax, and that html has a <script> tag in it, and you write that html into your document via something like $('#foo').append(html), then the JS should run immediately without any hassle whatsoever.
jquery automatically processes scripts received in an ajax request when adding the content to your page. If you are having a particular problem then post some code.
See this link
dataType: "html" - Returns HTML as
plain text; included script tags are
evaluated when inserted in the DOM.