Add Script Reference (JavaScript) to Script Manager on Microsoft AJAX Partial Postback - javascript

I am trying to add a script reference to the script manager in the event of a Microsoft AJAX Partial Postback, ie a user clicks on a link in an Update Panel.
ScriptManager.RegisterClientScriptInclude(Page, Page.GetType(), "UniqueName",
Page.ResolveUrl(scriptPath));
Doesn't work and either does
ScriptReference script = new ScriptReference(scriptPath);
MyScriptManager.Scripts.Add(script);
From what I have read on the net, RegisterClientScriptInclude should work even in a partial postback.
http://www.codeproject.com/KB/ajax/addingCssJsAjaxPartialPos.aspx
Can anyone give any ideas why these don't work, or another way to do it?
EDIT: Additional information.
I am working with a very large legacy code base that has the forms and script manager in each page rather than in the master page. I would like to place the code into a class and use the following call to add the javascript effect.
ClientSideScripts.BackgroundColourFade(Page, ScriptManager, Control);
The reasons I want to include the script in the method call is
Consumes of the method don't have to remember to include the script
Changing the script used only requires a change in one place
Only include the javascript when needed to keep the load time of the page down

Have a look at this SO-Question because it answers your question:
ScriptManager.RegisterClientScriptInclude does not work in UpdatePanel
function dynamic() {
alert('dynamic');
$('#divDyn').text('Dynamic!');
}
// notify that the script has been loaded <-- new!
if (typeof (Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();

Related

C#: .NET based webbrowser doesn't show image

I am new in C# language and I have been trying to automate a website using .NET based webbrowser for ONLY personal use in Visual Studio 2015.
I have done document parsing, used Timer, used DocumentCompleted event properly to wait for the webpage to load completely and then parse the content, tried to make async events to behave like sync events (in order to load HTML content generated by clicking a link in a fully loaded webpage), etc to go through the phases in webpage automation: login -> get trains between stations -> click the Book now link -> go to the next page and fill in the passenger details.
Everything works fine but I am now stuck at the last phase, i.e., "go to the next page and fill in the passenger details" has a captcha image that must be resolved to go to the payment page. Don't get me wrong because I am not trying to get this captcha resolved automatically. The problem here is that I do not see the captch image which turned to be loaded only when this javascript call is invoked $(document).ready.
I thought my project has some buggy code which is stopping to load the captcha and therefore, I created a very basic new project, only added below code and navigated through different phases myself to see if the captcha really loads but unfortunately it would not load.
namespace TestWebBrowser
{
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
webBrowser1.Navigate("https://www.irctc.co.in/eticketing/loginHome.jsf");
}
private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
}
}
}
Please see below. The highlighted part is where I am expecting a captcha.
I must tell you that I am not a web designer and therefore I only understand very basic of how websites work.
I went through several questions on this forum and nothing helped me.
Internet explorer is also using .NET browser from behind but while using IE, I can see the captcha is getting loaded. So, why is this javascript call $(document).ready is not getting invoked in .NET browser. Please see below:
I have later tried to use CefSharp in a fresh new project and I can see the captcha is getting loaded in its chromium based webbrowser. But I have done so much coding with .NET based webbrowser already and therefore I want to stick to the latter at this moment in order to get this resolved.
Is this happening because .NET webbrowser is using some very old IE version configurations?
Please help me to understand.
UPDATE 1: Adding the javascript
<script type="text/javascript">
$(document).ready(function(){
var isJsBlocked=0;
if (typeof(nlpLoadCaptchaAsync) == 'function'){
nlpLoadCaptchaAsync();
}else{
isJsBlocked=1;
}
setTimeout(function(){
var isNLPCaptcha = document.getElementById('nlpIdentifier');
if(isNLPCaptcha == null || isNLPCaptcha=='' ) {
var nlptrack = new Image();
nlptrack.src="http://irctclive.nlpcaptcha.in/temp_redirect_count/irctc_timeout.php?ref=f2c5d744485b0b4251461454db791111&isJsBlocked="+isJsBlocked+"&dynamicParameter="+Date.now();
nlpCaptchaTimeOut(true);
}
}, 5000 );
});
</script>
The answer shared here: Use latest version of Internet Explorer in the webbrowser control solved my issue.
I basically had to change the version of IE version used by my webbrowser control.
Thanks to Matthias herrmann

Is there an alternative to preprocessorScript for Chrome DevTools extensions?

I want to create a custom profiler for Javascript as a Chrome DevTools Extension. To do so, I'd have to instrument all Javascript code of a website (parse to AST, inject hooks, generate new source). This should've been easily possible using chrome.devtools.inspectedWindow.reload() and its parameter preprocessorScript described here: https://developer.chrome.com/extensions/devtools_inspectedWindow.
Unfortunately, this feature has been removed (https://bugs.chromium.org/p/chromium/issues/detail?id=438626) because nobody was using it.
Do you know of any other way I could achieve the same thing with a Chrome Extension? Is there any other way I can replace an incoming Javascript source with a changed version? This question is very specific to Chrome Extensions (and maybe extensions to other browsers), I'm asking this as a last resort before going a different route (e.g. dedicated app).
Use the Chrome Debugging Protocol.
First, use DOMDebugger.setInstrumentationBreakpoint with eventName: "scriptFirstStatement" as a parameter to add a break-point to the first statement of each script.
Second, in the Debugger Domain, there is an event called scriptParsed. Listen to it and if called, use Debugger.setScriptSource to change the source.
Finally, call Debugger.resume each time after you edited a source file with setScriptSource.
Example in semi-pseudo-code:
// Prevent code being executed
cdp.sendCommand("DOMDebugger.setInstrumentationBreakpoint", {
eventName: "scriptFirstStatement"
});
// Enable Debugger domain to receive its events
cdp.sendCommand("Debugger.enable");
cdp.addListener("message", (event, method, params) => {
// Script is ready to be edited
if (method === "Debugger.scriptParsed") {
cdp.sendCommand("Debugger.setScriptSource", {
scriptId: params.scriptId,
scriptSource: `console.log("edited script ${params.url}");`
}, (err, msg) => {
// After editing, resume code execution.
cdg.sendCommand("Debugger.resume");
});
}
});
The implementation above is not ideal. It should probably listen to the breakpoint event, get to the script using the associated event data, edit the script and then resume. Listening to scriptParsed and then resuming the debugger are two things that shouldn't be together, it could create problems. It makes for a simpler example, though.
On HTTP you can use the chrome.webRequest API to redirect requests for JS code to data URLs containing the processed JavaScript code.
However, this won't work for inline script tags. It also won't work on HTTPS, since the data URLs are considered unsafe. And data URLs are can't be longer than 2MB in Chrome, so you won't be able to redirect to large JS files.
If the exact order of execution of each script isn't important you could cancel the script requests and then later send a message with the script content to the page. This would make it work on HTTPS.
To address both issues you could redirect the HTML page itself to a data URL, in order to gain more control. That has a few negative consequences though:
Can't reload page because URL is fixed to data URL
Need to add or update <base> tag to make sure stylesheet/image URLs go to the correct URL
Breaks ajax requests that require cookies/authentication (not sure if this can be fixed)
No support for localStorage on data URLs
Not sure if this works: in order to fix #1 and #4 you could consider setting up an HTML page within your Chrome extension and then using that as the base page instead of a data URL.
Another idea that may or may not work: Use chrome.debugger to modify the source code.

Force browser to refresh javascript code while developing an MVC View?

Pretty straight-forward, I'm developing an MVC5 application and have noticed (lately) that my Browser appears to be caching the JavaScript code I have on the view within #section Scripts { }.
Currently I am developing with Chrome and I have tried CTRL+F5 & CTRL+SHFT+R which reloads the page, but the alert() I uncommented within the javascript code is still rendering as commented. I also tried going to my localhost through Incognito Mode as well as other Browsers (Firefox, IE) and am getting the same behavior. This is my /Home/Index.cshtml View, which is the default View which loads when the application starts. I have also tried adding some extra HTML text into the page and again the new code is not taking effect/showing.
My current Chrome version is Version 41.0.2272.118 m if anyone has any ideas what might be going on?
UPDATE:
I have gone under the Developer Tools => General Settings in Chrome and checked [X] Disable cache (while DevTools is open) and then repeatedly (with DevTools still open) tried CTRL+SHFT+R and CTRL+F5 with the same results of before where my changes are not taking effect.
UPDATE 2:
With DevTools open I have also held the Refresh button down and tried Normal/Hard/and Empty Cache & Hard Reload options all with the same result. For simplicity of testing I added an alert in the below to dispaly as soon as the page loads (and currently no alert comes up):
$(document).ready(function () {
alert("Test");
// Other Code/Functions -- No Error showing in Console
});
If you are using Bundling from MVC, you have two options to disable caching:
Use BundleTable.EnableOptimizations. This instructs the bundling to minify and optimize your bundle even while debugging. It generates a hash in the process, based on the content of the script, so your customers browsers can cache this file for a long time. It will generate a whole different hash the next time your file changes, so your customers can see your changes. The downside is that your script will become unreadable and you won't be able to debug it, so this might not be your best option.
Use System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("url", true) to resolve your script's URL, the second parameter (true) is requiring a hash to be generated with the URL, thus, preventing caching from your browser when you change the file. This is exactly the same hash generated in the first option, but without minifying.
I created a small demo showing that the second option prevents caching from happening, the trick is getting the hash generated from your script's content without minifying your script.
I created a script file called myscript.js with this content:
$(document).ready(function () {
alert('a');
});
Then I added this to my BundleConfig.cs:
// PLEASE NOTE this is **NOT** a ScriptBundle
bundles.Add(new Bundle("~/bundles/myscripts").Include(
"~/Scripts/myscript*"));
If you add a ScriptBundle, you will get a minified response again, since ScriptBundle is just a Bundle using JsMinify transformation (source). That's why we just use Bundle.
Now you can just add your script using this method to resolve the script URL with the hash appendend. You can use the Script.Render
#Scripts.Render(System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/myscripts", true))
Or the script tag:
<script src="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/myscripts", true)"></script>
Either way will generate a URL with a hash to prevent caching:
After editing my file:
You might want to add a no_cache variable after your script url like:
<script src="js/stg/Stg.js?nocache=#random_number"></script>
If you manage to put a random number to the place i indicated, the browser will automatically download the latest version of the script after an F5
A quick trick that solves this problem consists of opening the script file in a new tab, then refresh it on this page.
If you happen to have Chrome dev tools open it will even refresh it there.
From dev tool you can even easily right click-open in new tab the script.

Execute javascript retrieved with AJAX in Chrome extension

I am writing a chrome extension that injects a div into a website with a content script. The content script makes an AJAX request to a website that I cleared in the manifest.json file and it inserts the data into the div with innerHTML. Part of what the AJAX request returns is javascript that needs to be executed. The AJAX request from within the content script works fine.
When I make the same AJAX request from a regular website, the javascript that is returned executes just fine, but when I make the AJAX request from the content script it does not execute. No errors are displayed in the console. I don't want to reload the website, if possible.
I assume that this is a security 'feature' and not a bug. How can I turn off or circumvent this behavior?
First off what Rob W said is very important, if you don't already know it, a good explanation of the different environment a content script runs in is useful.
You might want to check this out. It's not 100% what you're looking for but the main part is there. Basically from your background page (if you don't have one already create one), you use chrome.tabs.executeScript() to execute the script you've downloaded. That runs the javascript in the real page context instead of the "content script" context. All you need now is to get that script (in string form) to the background page, and determine the tabId to execute it on (from the sender tab)
You can use chrome.extension.sendMessage to send it to the background page, and in the background.js, use chrome.extension.onMessage to receive the message with your script. From there use the sender argument to get the tabId (sender.tab.id), and build your executeScript call.
One more helpful hint, page scripts (dynamic javascript executions) in chrome by default don't show up in any set way in the chrome debugger, but you can append something like this to the string of your javascript:
"\n//# sourceURL=/myFolder/myDynamicJavascript.js"
This will make this script always show up with the "/myFolder/myDynamicJavascript.js" path for the chrome debugger, allowing you to set breakpoints in the js code you've inserted. It's a lifesaver.

Calling a JS function from HTML IFRAME (both web resources)

I've uploaded two web resources, a.HTML and b.JS. In the HTML document I have a section where a script is executed (and it works as supposed to) upload loading into the IFRAME on my form.
Now, because of the size of the code, I feel the need to refactor it and I'd like to move out some of the methods from the script tag of my HTML web resource to a separate JS web resource.
At the first step I've set up the separate JS web resource as follows.
function test() { alert("Success."); }
From the script inside the HTML document I execute the following, getting an error as test seems not to be known to the page.
alert("Get ready for test...");
test();
alert("Did it work?");
I've added the JS web resource to the form and savepublished, of course. There's surprisingly little info on the subject out there. I've found those links but none of them matches exactly what I need and gives me no hint on how to approach the issue at hand.
This link resembles what I want to achieve but it's about calling JS from JS where both are web resources.
This link is diagonally opposite to what I want but I don't know how to reverse it from calling HTML from JS whre both are web resources.
What should I correct?
Calling a function in a javascript webresource, from an HTML webresource in Microsoft Dynamics CRM
CRM 2015
Javascript webresource:
function test() { alert("Success."); }
HTML webresource:
window.parent.test();
CRM 2016
They now load HTML webresources in an Iframe so you can't access external js files, but you can access the XRM object. So you can place the function on this object.
Javascript webresource:
Xrm.Page.test = test;
function test() { alert("Success."); }
HTML webresource:
window.parent.Xrm.Page.test();
Check the following assumptions that you did:
save the web resource?
publish all changes?
add the resource to the frame in the regarded entity?
name the function hazaa
call the correct name, i.e. parent.window.test()?
If yes to all of the above, do three things.
Contact Microsoft. You've just found a serious bug.
Watch out. There will be pigs flying very soon.
Get a coat. It's about to get much colder.
(By that, I mean that you surely have missed on something in the list I've provided and that you need not to contact Microsoft, pigs won't start to fly and the hell won't freeze over.)
I think your test() function is in scope of your html document's window.
and when you call it from inside the iframe's document, it searches for test() in its scope.
Try out
alert("Get ready for test...");
parent.window.test();
alert("Did it work?");
and in case the test() is defined in the iframe and you are calling it from the HTML document try this.
alert("Get ready for test...");
document.getElementById("iframeId").src ="javascript:test();"
alert("Did it work?");

Categories