I have a client script on a page, that calls a dynamic script generated by a user control using ClientScript.RegisterStartupScript. The user controls script is dynamic, the pages' static.
The issue I have, is the page client script cant find the function rendered by the user control. The method signatures match, everything is good.
However, the user controls script is contained on the page after the static script. Would this make a difference? If so, is there a way to render the script before the static script - according to the MSDN api docs the only way is to combine all scripts into one.
I don't have the luxury of doing this because the dynamic script uses the ClientID of the user control to uniquely identify itself - there is more than one occurrence of the user control.
Is there an easy way around this?
Cheers
My advise is that you make this "dynamic" script a static one that takes the control(s) id(s) as parameter. For example you could have something like:
function MyFunction(dynamicElementID)
{
var myelement =document.getElementById(dynamicElementID);
//do something with myelement...
}
And then on your code-behind, you can call this script as so:
ClientScript.RegisterStartupScript(this.GetType(),"myscript","MyFunction('"+control.ClientID+"');");
I find it a little odd that you have dynamic functions that a static scripts knows about? Can you show some of your code? I think there is probably a better approach to resolving your dependencies.
Typically dynamic controls will pass their Id's to generic static functions.
Related
I have a static web page for a restaurant. The menu changes twice a year. Site is bi-lingual.
I want to know what would you recommend to achieve such effect -
I want to change one (not four like now) file (could be text, JSON, whatever) and see results on those pages - two pages in one language should be updated, and two in the other. I don't want to mess with CMS of any kind (I'm a front-end developer and don't want to get into SQLs/PHP and such). I thought maybe jQuery or AngularJS could do that? But how?
The file itself could be something like that:
en_Tea | de_Tea
en_sandwich | de_sandwich
en_pizza | de_pizza
or JSON of some kind...
You could do something like add a stub .js file that gets imported to your full page files. In the stub file, you could simply have a function that builds a constant array with whatever values you like. The calling portions of your code could then use the values however they would like.
Check jQuery Ajax functions & methods
Some you could use:
$.ajax() - the most configurable one.
.load() - adds functionality which allows you to define where in the document the returned data is to be inserted.
$.get() - abstracts some of the configurations away, setting reasonable default values for what it hides from you.
Most are shorthands for $.ajax()
You can make these requests when certain elements are clicked and bring/replace specific content without having to refresh the whole page.
I have a single file, 'core.js', with a collection of my sites JavaScript. I like to combine my script this way so I can cut down on HTTP requests. My problem is, page specific code's, obviously, getting run on pages it needn't.
Without splitting 'core.js' into separate scripts, what's the best solution for ensuring my page specific code only gets run on the page it's supposed to be run on?
Many thanks!
The simplest way is to make everything in core.js be functions and then put one inline function call in each given page to call the code specific to that page. That makes core.js a resource and each page decides what functions in that resource to call.
I've also seen it done where you put a trigger class name on the body tag and then the code in core.js examines the classes on the body tag to decide what initialization code to run. This works best when you have a small number of types of pages and you want to run the same initialization code on all pages of the same type, but I don't think it's all that good if each page has different JS. In that case, I think it's better to use the first technique of let the page decide what JS initialization function to call.
I am developing an extension for Mediawiki which is based on another extension (developed in-house) that will not work above with a Mediawiki installation with a version superior 1.16.5 . I need to include javascript in pages belonging to a specific namespace and I cannot use the ResourceLoader http://www.mediawiki.org/wiki/ResourceLoader .
Does someone know if there's a simple to do this? I need to include JQuery and Datatables for a custom rendering of the pages belonging to the namespace.
There are at least three ways to go about this.
The 1st approach is to edit the magic page MediaWiki:Common.js and add something like this:
if(wgNamespaceNumber == 0) { // NS_MAIN
importScript('MediaWiki:MyScript.js');
}
You can place arbitrary javascript in the block, the importScript bit there is for executing JavaScript stored in a Wiki page but there are other ways to include JS on the fly as well (see eg. this question). See Manual:Interface/JavaScript for details of the MediaWiki side of things.
The 2nd approach would be to hack the PHP that produces the MediaWiki page to inject <script> tags depending on the current namespace, but that's a bit more involved: you'd need to build a custom extension and hook it in at some appropriate point. The ParserAfterTidy hook looks suitable, see Hooks.
The 3rd approach would be to simply edit the skin and load the JS for every page in the wiki -- is there a reason you don't want to do this for every page? They're cached anyway, so it's only a one-time hit.
I am developing a site using Asp.net MVC 3 with Razor.
In the _Layout.cshtml (the master page) I want to put a logic based on whether or not the browser enables javascript.
What is the simplest way to make this logic?
For the sake of simplicity, let the master page just output as follows:
#if(....)//need to modify
{ <p>javascript enabled...</p>}
else {<p>javascript disabled...</p>}
If you want to block the access of your application you can use something like this
<noscript>
<meta http-equiv="refresh" content="0;url=../Controller/Error" />
</noscript>
There's no way to find this out on the server, therefore there's no way to find out before the first page is loaded. The best you can do is to put a bit of Javascript into the page that sets a cookie or posts an AJAX response to the server telling it that Javascript is active, so you can do something about it on subsequent page requests. Even apart from the obvious problem of the first page load, it's a bad strategy since the user may switch off Javascript in the meantime while your server still thinks it's active.
Graceful degradation/progressive enhancement are the keywords here. Make your page assume by default that no Javascript is active and act accordingly, i.e. serve plain HTML in either case. Include Javascript that will "upgrade" the site's functionality if Javascript is active. Let the client figure out if Javascript is working or not and give it the means to work in either case.
I'm afraid there's no good solution. Almost all of the solutions out there somehow involve running a script to do the check and it doesn't feel right (at least to me). The best solution I can suggest is use the <noscript /> tag and redirect to a different page that does not depend on javascript.
Here is one trick...
Assume the user has JavaScript blocked (off). We put this code into the index.aspx:
<script>
document.location.href = "index.aspx?js=1";
</script>
If you get the js=1, you know that user has JS enabled.
So you can generate the code in according the user has / hasn't JS.
The other way is to generate contents witho some special class, e.g. <div class="noscript">, and then you run the script (jQuery):
$(".noscript").hide();
I observed chunks like below sometimes on web pages. So i am curious to know what this really does? or why its written in such a way?
<script src="somefile.js?param1=one¶m2=two" />
i can only make out following few intentions behind it
Its not page URL (i mean .aspx/.php/.jsp etc.) so its not hacking kind of code where user can add code like this to pass data without getting users attention as its tag which does not render on UI OR implementing old type of AJAX alternative
This kind of URL param are useful if user do not wish the JS file (any other resource like image) to get cached. This can be quick way to manage caching
But i am unable to figure out following
Looks like page URL parameters but are these parameters anyway readable in JavaScript file and have some additional utility?
Do these parameters have any extra role to play here ?
What are the other possible practical scenarios where code like this can be/is used?
So please provide some inputs related with the same
Thanks,
Running Non-JS Code within .js Extensions
In cases like this, that source .js file might (given proper server-configurations) actually have PHP/.NET code within it, which can read those appended values.
As you said, Avoiding Cache...
Additionally, people will at times append a random string at the end of their referenced elements to avoid loading cached data.
The URL having '.js' means nothing. It could still be handled by a server-side script like an ASP or PHP.
Either the javascript file is not static (it is generated by the server based on the parameters in its querystring)
OR
In the JavaScript file itself, you can have it check its own querystring parameters (not just that of the page, but that of the javascript source url).
OR
(This doesn't exactly match your scenario, but) you can also add parameters at the end of image and script urls as a way of versioning. The version with the url="somescript.js?V=3" will be cached by the user until the page then changes and the url is not="somescript.js?V=4". The file will be replaced by the version on the server no matter what the browser setting may be.
My guess (without looking at this specific case) is that the javascript file is reading its own querystring. I have done this, and its very helpful.
Looks like page URL parameters but are these parameters anyway readable in JavaScript file and have some additional utility?
Yes you can read them in JavaScript, Scriptaculous uses that approach for loading modules, eg:
<script type="text/javascript" src="scriptaculous.js?load=effects,dragdrop">
</script>
Do these parameters have any extra role to play here ?
What are the other possible practical scenarios where code like this can be/is used?
That can be also used for server-side script joining and minifying, of course using some url rewriting technique to have the .js extension, and as you say, it's a common technique to add timestamp parameters to break the browser cache.
It can be used for three different reasons:
1) To generate the JavaScript file in the server depending on the parameters;
2) To avoid caching;
3) To pass parameters to JavaScript itself
An example of this in practice would be a server side handler for somefile.js that uses the parameters (names of other scripts) to determine which scripts are actually required and combine/minify them, returning them as a single somefile.js script file.