Inject javascript in existing asp.net webforms app - javascript

I am currently working on a website which has a lot of javascript . How can i make sure that my javascript has the best chance of running properly? By adding another script section in the page or through asp.net registering the script?

You should read: http://msdn.microsoft.com/en-us/library/aa478975.aspx
By using the RegisterStartupScript() method on the server side Page_Load you can ensure that all of your HTML markup is loaded and ready to be modified. It is also good practice to put your javascript sections at the bottom of your form's markup if you want to access html elements, for example setting a textboxes text or something.
You can't really say one is "better" or has a "better chance of running properly" than the other, because you would use either/or depending on what you need to do. If you read the above link that I posted I think things will make a lot more sense for ya.

You only need to use ASP.NET to register the script if you're making changes to it server side. Other than that, put it in the <head> section.

Related

How to load one HTML page into another which has java script code?

I have a scenario where the Spring based web application is returning a HTML based response.
Now, I want to embed this html response into another web page. The HTML response when rendered independently (meaning not in any other web page) works fine.
There is lot of JQuery related code in the response page which is not getting triggered when the response is loaded in another page.
How can I achieve this?
Since the response which is returned includes lot of JavaScript which has been written to make the UI responsive I have to make sure that all those libraries also load and function correctly.
I will list them below:
1. Bootstrap
2. Bootstrap Select
3. enquire.js
I do not know how all these libraries function but yes they are definitely playing a key role in making the UI responsive.
I have also taken a look here but could not understand whether this will satisfy my requirement.
Just to add I came across AMD but not really sure if it is the best way.
You can achieve this by using Iframes, just give your iframe an id 'myIframe' and on getting html response, do the following from javascript:
document.getElementById('myIframe').contentWindow.document.write("here is your html response..");
Hope this helps.

Modular approach to client-side applications

This is a follow-up to my previous question.
Suppose there is a single web page with a login form and sign-up link. When a user clicks on the link a new sign-up form is displayed. Suppose also I create separate HTML, CSS, and JavaScript files for both forms for modularity.
Now the web page should contain some JavaScript code to load the login form, when the page is loaded, and load the sign-up form upon click on the link.
Does this approach make sense? Are there any frameworks/libraries, which implement this approach? How would you suggest implement it?
I think the idea has some issues. First you should know that there are some old fashion ways to load another completely separated page in the main document. Using "iframe" tag is one of the most popular and unsecure ways to do such a thing. Showing popups and use "window.open" is another way that can show a new window and load the specific url completely separated. BUT...
There are many reasons that I'm now gonna suggest you not to do that in any of mentioned ways. You can simply use some libraries like "JQuery" to load another html in the current page without any need to load new resources that cause performance issues for you. I believe you should search for "JQuery $.get" and you will see how easy it would be.
Hope it helps.
Cheers
Yes that makes sense to me. I really like this approach as I think breaking an app into smaller chunks will make the development & maintenance much easier.
Basicly you need to load the css and js files by appending a link and script tag respecticly into the head section of the html. For loading the html part of the module you can simply use jQuery.get() method as suggested by other answer.
I have tried to implement it. I recently released my work on this. a small code base. actually in my approach each module has its own folder with its js, html and css files and optionally a server-side file too like a php or aspx file that will be called by javascript to query the server.
here is the project page in github called Yuva
take a look and let me know if this makes sense to you.

Best practices for creating a reusable javascript web-app

I'm writing a web-app, using javascript, for the first time.
I was wondering what is the best method to make the web-app easily reusable, i.e. to make a "package" containing the js files, html and css, and load them like "load webapp"->launch it.
Currently I have an index.html which contains two divs:
the first one is a site-specific home page
the second one, initially hidden, is the panel of the web-app
once an initial selection is done in the homepage, I launch the app invoking a js method.
I'd like to make this more general, and I was wondering whether using jquery load() could be a clean solution (I'm currently using jquery). This would load the html, but I think I should still manually load the css in the page using the lib/app.
Any idea is appreciated.
Just make sure you don't embed any CSS or JS into your ASPX pages wherever possible, always keep them in separate files it'll be much easier to reuse certain aspects without having to dig around for the code. I've even seen JavaScript classes used to encapsulate a range of functionality, which could also be an option if you're that way inclined :).
In your said example, you're probably best calling a function in an external JS file on document ready.
Organizing your JS as JQuery plugins may also be an option for you. It may not make sense to put all of your JS into one plugin but if you split up your work into bite sized components this may make sense. Im not going to mention any particular resource because there are so many and I don't want to look like a spammer.
Hope this helps!
jQuery load won't help you organize your code, or load js dynamically, it has a complete other function (register to the onLoad event, or load an html page, or partial page via ajax)
If you're looking for dynamically load js libraries, use lab.js (at http://labjs.com) or require.js (at http://requirejs.org). But keep in mind that it can also be ok to have just one big js file that will get cached and load at once.
As far as organizing your js, it depends on the app. Sometimes jQuery plugin is the way to go. I had developed a solution that I am using on my projects, I just share it with you here: http://thebeast.heroku.com

ASP.NET Conversion to Fully AJAX Based Application

I am in charge of converting an ASP.NET web application into fully AJAX based application. I know Javascript and Jquery very well.
Initially I thought to point every anchor tag's click event to JS function and to call stuff via ajax and to populate the body and so on. I encountered a problem when it came to ASP.NET Form on every page and when there was need to make a post-back. I decided to point every Form tag's onSubmit event to a JS function to post stuff using ajax and to get results and I got to know this is not possible with ASP.NET as every time where is a button click, there will be post back so it's hard to let page know what button was clicked.
I then decided to use ASP.NET built-in AJAX controls to use with Forms which is pretty easy and worked like the way they should.
Now I am stuck with the question of which I should go with?
I like to be JS way because it's more customizable than AJAX.NET. I highly need your suggestions.
I don't see a problem in using ASP.NET Ajax. The scriptmanager and UpdatePanel controls will make you task easy and fast to convert to and ajax enabled website.
I am not sure what kind of customization you are looking for but you can still use js way whereever necessary. One another plus point with ASP.NET Ajax is it is well tested and used by thousands of sites and comes with lots of controls like in ajaxcontrol toolkit.
If you want to convert a web forms application completely to JavaScript coding, this is going to be really hard to do. It would be a lot easier to use the updatepanel control to make it look asynchronous to the user, as this doesn't break the server-side integration. But if you are using JS to post back to the server, then wipe the UI and replace it with the new one every time, that's going to be a lot harder.
Ideally, the best way is to use web services, call the web services through JS code (either JQuery or using the Sys.Net.WebServiceProxy ASP.NET AJAX object) to stream the data and you build the client in JS.
Let me know if you want more info...
HTH.

Stylesheets for content?

Forgive my ignorance since this seems like its something I should know by now.
I know I could make a stylesheet that will allow me to make changes in my CSS throughout several pages that use the CSS. I also know that you can make an external javascript file that could contain functions you want to reuse. But lets say I had pure HTML content (lets pretend a bunch of buttons or links) that I wanted replicated on several pages. Is there anything similar to a stylesheet in that regard? This would allow you to update the buttons/links all at once.
Try server-side includes.
The most frequent use of SSI is to include the contents of one or more files into a web page on a web server. For example, a web page containing a daily quote could include the quote by placing the following code into the file of the web page:
You could also use PHP, if your host allows it. Just change the name of the page from .html to .php and reference the header:
<?php include "header.php" ?>
Both of these require you to change the file's extension, so you might also want to use mod_rewrite to let users still access it via the .html name. Again, if your host supports it.
The question isn't that stupid, as there in fact is nothing native in HTML to do this.
If supported by your server, Server Side Includes are your best option. If you have PHP, you can also do a <?php include "footer.html"; ?>
All other server side languages have a similar construct.
Depends... I know Dreamweaver has some rather advanced support for templates. You can delve into the manual of your WYSIWYG HTML editor and get acquainted to how it can help you with repeatable content items. Otherwise, as Simon hinted, you should consider learning some server side technology (scripting language such as PHP is an easy choice), write your repeatable HTML and let the scripts output that whenever and wherever you need. Good luck!
It seems you're not using some server side technology like ASP.NET which has user controls on which you could place those.
An alternative would be to use Server Side Includes like:
<!--#include virtual="header.html"-->
Grz, Kris.
You can try using the CSS content property, but the content is inserted after/before the target. http://www.w3schools.com/Css/pr_gen_content.asp
EDIT
You can also try storing your content in XML documents and using JavaScript to load the XML sheets. Each sheet can store your button content, input content, etc. All you have to do is parse the XML and render the content as HTML elements.
While SSI seems like the best idea I believe, if memory serves me well, that if you're using IIS you're going to have to adjust some settings on the server to work get SSI with the html file extention.
While SimpleCoder's idea doesn't seem like the best idea it is an interesting one. Building on that idea maybe json data instead of xml would be best. I'd play around with this just for the fun of it.
If neither SSI or PHP is available, you could do it with javascript only:
Load the page into a hidden IFRAME, then grab it (with innerHTML)
- and move it to where you need it..
Unless you don't care about SEO, I would advise against using javascript for this purpose.
It's possible, but such a technique could prevent search engines from properly indexing your site.

Categories