Develop Reference

How to load the contents of a file and insert a variable in it using Javascript?

I'm adding some html to a div using the following jQuery method:
$('#pageTabContent').append($('\
<div class="tab-pane" id="'+ticketId+'">\
And a whole lot more html here..
</div>'));
This works fine, but because I've got way too much html in my javascript I want to move that to a separate file. The problem is that I also need to insert the ticketId in the html. Is there a way using Javascript/jQuery to load the html from a separate file, but still insert the ticketId in it?
[EDIT] Please note that the ticketId is different for every time this piece of code is used. I will be used multiple times within one page load, so I cannot load the ticketId in the html using php. I has to be done client side.
All tips are welcome!

For that specific example, it's pretty straightforward:
$.get("/path/to/file.html", function(html) {
var newStuff = $(html);
newStuff.find("div.tab-pane:first").attr("id", ticketId);
newStuff.appendTo("#pageTabContent");
});
You can generalize that a bit, the basic concept is: 1. Load the HTML, 2. Use jQuery to create DOM elements from it, 3. Use jQuery to find the element in question and modify it, 4. Add to the element.
Another approach is to use some form of templating, either a templating plugin or just DIY:
$.get("/path/to/file.html", function(html) {
html = html.replace("{{ticketId}}", ticketId);
$("#pageTabContent").append(html);
});
Again, there are plugins and templating systems to do that for you, which would offer various features over doing your own.

I generally recommend avoiding dynamic html generation in javascript.
There are several good template based frameworks out there. One I like to use in KnockoutJS http://knockoutjs.com/
Another benefit of this approach is change tracking between your model and your html elements.

Is it good to generate Html page elements using AJAX queries?

depending upon UI inputs, i need to dynamically change (create or hide) other UI elements.
Also i don't want to refresh my page.Is it good to generate Html page elements using AJAX queries? Also what is the best way to do it?

I am using Knockoutjs's html binding to do the work. Here is the idea:
Create a global viewModel:
var _viewModel = {
body: ko.observable()
}
In the html page:
<div id="dynamic-part" data-bind="html: body" ></div>
In the javascript
ko.applyBindings(_viewModel, $('#dynamic-part')[0]);
whenever you want to load the dynamic-part, you can have kind of javascript code like follows:
$.get('/some/new/page/part', function(data) {_viewModel.html(data);});
When you apply the above technology along with sammy and LAB, you will get a very powerful one-page web application, where all the pages of the application can be load with ajax call.

Normally the way it's done is that the initial page has tags with identifiers, but no content in the divs. As your AJAX results come back, you set the innerHTML of those divs to the retrieved content, addressing them by identifier. Here's a page which explains it well.

At first you have to copy with the technical stuff.
How to make an AJAX request in the first place?
I would choose the jQuery library. This has a ajax function.
Then you decide:
Do you give back just some data and build the HTML content in JavaScript? (Here again jQuery is a good way to do it)
Or do you build the HTML on the server-side and just put it in my document using the ajax callback method success?
That's for starter

How to use the function given in the link + javascript

I am a newbie to javascript functioning and wanted to see its functioning regarding pasting dynamic data in the html.
I have this link where they tell what to use for the same in a table but I can't figure out how to do the same...
The link to the code is javascript link
I first made an html page using the html shown and then added the lines of javascript shown below it in <SCRIPT LANGUAGE="JavaScript"> tag.
But I am not getting the same output.... What am i doing wrong ?
Please help...

It seems like the example you're trying to imitate is doing client-side data binding. First of all, yes, you need to reference jQuery script in your page. Secondly, you'd be better off accomplishing client-side data binding with the jQuery Templates plugin.

Executing JS in dynamically loaded content

I've started working on a project that loads all of the different pages content dynamically.
On the surface this seems simple enough, an AJAX call to a script that returns the content that is placed inside a DIV. Except that not only HTML but JS is returned as well. I'm seeing a lot of things like this:-
<img src="spacer.gif" height="1" width="1" onload="SOMEJSHERE"/>
Dotted in the code to execute JS functions. This doesn't provide the kind of HTML/JS code separation I've come to love using JQuery.
I can understand that they don't want to load all the JS and HTML at once, there is an awful lot of it... But this just doesn't feel like the best way.
Some experience and suggestions please?
Lyle

Have a look at the jQuery .live() event. It can apply behaviors (event bindings) to all current and future elements on the page, which match the given selectors.
This means that your newly-loaded HTML need not contain any script. Just make sure the loaded elements have the right selectors (class names and id's).

hey i use "eval" to execute js dynamically.
e.g.
<script>
var strjs = 'function execute(){alert("foobaring");} execute();';
eval(strjs);
</script>

In the end I used the tabs.select option from JQuery UI (which we were using for the ajaxed pages) and executed the appropriate JS as needed.

Best approach for including bits of Javascript on individual pages in Sitefinity

Frequently, I just want to drop a bit of jQuery on an individual page. Given my early understanding of Sitefinity, I think...
I can't easily put JS in the <head>.
I could put JS in a Generic Content control, but then my JS is sitting inline in the <body>. Maybe I need to relax, but I don't usually like to put much JS in the <body>.
It feels like this kind of scenario is an afterthought. Is JS a 2nd-class citizen in Sitefinity?

JavaScript does not live in the head. Yahoo even says it is better for performance

I agree with epascarello you really shouldn't be putting your javascript in the head anyway.
And just in case you didn't know about this the jQuery framework is part of Sitefinity. The article also shows you how you can include external libraries in sitefinity from anywhere withing your project whether it be master page or user control.

Why not have the jQuery code in a separate .js file and use unobtrusive JavaScript? With jQuery you can separate behavior and markup so nicely that you should never have to include JavaScript in your head or body ever again.
Just use the standard onLoad function in jQuery and put all of your initialization code in there.
Try it, I think that you will like it! If you like using CSS for separation of presentation and markup, then jQuery can do the same thing with behavior and markup.

This is an old question, but one way you can do it now is:
Add a Javascript block (under Scripts & Styles), and then paste the URL to the jquery code:
http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js
Then add another Javascript block with your jquery, like:
$(document).ready(function() {
alert("hello");
});
Or you can also paste the URL to your js file.