3

how can I create something like below div using jquery? preferably using something similar to $(document.createElement('div')); or something faster apart from $("<div spry:region="myDs">{hostname}</div>");

<div spry:region="myDs">
    {hostname}
</div>

Edited

How to put this code in another JS file and use it, coz "<%= request.getParameter(\"filepath\") %>" is creating problem 

var cpath="<%= request.getParameter(\"filepath\") %>";
var myDs = new Spry.Data.XMLDataSet(cpath, "csmclient/system");     
$(document).ready(function(){
    $('<div>')                      // Creates the element
    .attr('spry:region','myDs') // Sets the attribute spry:region="myDs"
    .html('{hostname}')         // Sets the inner HTML to {hostname}
    .appendTo('body');
});
Improve this question
5
  • I doubt you can. jQuery is designed to work with HTML, not multi-namespace XML documents. Commented Jun 15, 2011 at 13:03
  • @Quentin: I edited my question can you please take a look? thanks Commented Jun 16, 2011 at 5:48
  • I took the liberty of rolling back your question to the latest edit that has an answer in this thread, since you were asking new questions in this one. If you can't wait untill tomorrow, when your question quota has room for some new ones, meta is the place to complain about it. Commented Jun 16, 2011 at 8:49
  • Please don't change the meaning of questions after you've posted them, and at the very least, not after getting answers. One of the reasons behind the limit on number of questions per month is to avoid swamping the site with questions from people that don't have a long experience in their field, such as HTML and/or JavaScript. Commented Jun 16, 2011 at 11:58
  • @Lasse V.: I'll keep that in mind for next time. :) Commented Jun 16, 2011 at 12:00

4 Answers 4

Reset to default
12

I'm surprised no one has yet fully made use of jQuery's chaining capabilities:

$('<div>')                      // Creates the element
    .attr('spry:region','myDs') // Sets the attribute spry:region="myDs"
    .html('{hostname}')         // Sets the inner HTML to {hostname}
    .appendTo('body')           // Append the newly created element to body

Here's a jFiddle example that shows it in action.

UPDATE in response to your edit
You won't be able to use the Request object in an external javascript file like that, since the external script file is fetched by the browser in a separate request. You could easily solve the problem by writing an ASP.NET Handler script that returns your javascript file, by doing the following:

  1. Create a new handler in your ASP.NET project. Name it something sensible, like yourscriptname.js.ashx.
  2. Copy all your javascript code into the right place in the handler (you probably want a Response.Write() call or something...
  3. Change the src tag of your <script> element from somefile.js to somefile.js.asp?filepath=your/file.path.

This way, when the request for the javascript is sent by the browser, the request object has a value for "filepath" and everything will work again. Of course, you'll want to change your/file.path to something more relevant when you render it in the first place, in order to get the value from the request parameters to the page.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

@Tomas: Can you look around my code in my edited question, as i want to use it in a external JS file but "<%= request.getParameter(\"filepath\") %>" seems to be creating the problem. Thanks
@Tomas: I am using normal jsp, is there any other way with jsp?
@Tomas: Also, what if my html content is very large, what will be the best way to create then, and if I put some anchor tags and call some function from within will they work. Please have a look at my edited question. Thanks
@Abhishek: Now your follow-up questions are more like new questions than actual follow-ups - I think you'll be better off creating entirely new questions rather than editing an old one. If you want the old question(s) as background, you can always provide a link in the new question. As for creating large html elements, I'd go for an ajax request for a html template on your server, possibly utilizing jQuery Templates.
@Tomas: I am not allowed to ask any more questions. It says only 50 questions in 30days :)
|
3

To create elemts in jQuery and append them:

jQuery('<div/>', {
    "spry:region": "myDS",
    text: '{hostname}'
}).appendTo('body');

look here for full reference

Improve this answer

Comments

2

First of all, document.createElement('div') is javascript, not jQuery. If you don't want to use jQuery:

var main = document.getElementById('main');//where you want the div to be added
var div = document.createElement('div');
div.setAttribute("spry:region","myDs");
div.innerHTML = "{hostname}";
main.appendChild(div);

But jQuery makes easier to work with the DOM, so you can use one of the above answers :) .

Improve this answer

1 Comment

It should work if you edit the first line with some element you have on your page. That's why there is a comment near the line. Maybe you want to append it to the body, in that case, use "document.body.appendChild(div);" instead of using the var main.
1

$("html tags").appendTo("where you want to add")

$('<div spry:region="myDs">{hostname}</div>').appendTo("body")
$('<div spry:region="myDs">{hostname}</div>').appendTo("#content")

or

var div = $(document.createElement('div'));
div.html("{hostname}").attr('spry:region=', "myDs").appendTo("body")
Improve this answer

2 Comments

If you want to do the above with less typing, $("<div>", {"spry:region": "myDs", "html": "hostname"}).appendTo("#content") should work too.
@Chris: Can you look around my code in my edited question, as i want to use it in a external JS file but "<%= request.getParameter(\"filepath\") %>" seems to be creating the problem.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.