Search Results

Search found 36725 results on 1469 pages for 'javascript library'.

Page 261/1469 | < Previous Page | 257 258 259 260 261 262 263 264 265 266 267 268  | Next Page >

  • In Firefox, how do I bring an existing popup window with multiple tabs to the front using javascript

    - by brahn
    I would like to have a button on a web page with the following behavior: On the first click, open a pop-up. On later clicks, if the pop-up is still open, just bring it to the front. If not, re-open. The below code generally works in Firefox, Safari, and IE8 (see here for Chrome woes). However, I have found a failure mode in Firefox that I don't know how to deal with: If for some reason the user has opened a second tab in the pop-up window and that second tab has focus within that window, the popupWindow.focus() command fails to have any effect. (If the first tab has focus within that window, everything works just great.) So, how can I focus the popup and the desired tab in Firefox? <head> <script type="text/javascript"> var popupWindow = null; var doPopup = function () { if (popupWindow && !popupWindow.closed) { popupWindow.focus(); } else { popupWindow = window.open("http://google.com", "_blank", "width=200,height=200"); } }; </script> </head> <body> <button onclick="doPopup(); return false"> create a pop-up </button> </body>

    Read the article

  • Line by Line explanation of "Javascript: Good Parts" example?

    - by Matrym
    I'm reading "Javascript: The Good Parts" and am totally baffled by what's really going on here. A more detailed and/or simplified explanation would be greatly appreciated. // BAD EXAMPLE // Make a function that assigns event handler functions to an array of nodes the wrong way. // When you click on a node, an alert box is supposed to display the ordinal of the node. // But it always displays the number of nodes instead. var add_the_handlers = function (nodes) { var i; for (i = 0; i < nodes.length; i += 1) { nodes[i].onclick = function (e) { alert(i); } } }; // END BAD EXAMPLE The add_the_handlers function was intended to give each handler a unique number (i). It fails because the handler functions are bound to the variable i, not the value of the variable i at the time the function was made: // BETTER EXAMPLE // Make a function that assigns event handler functions to an array of nodes the right way. // When you click on a node, an alert box will display the ordinal of the node. var add_the_handlers = function (nodes) { var i; for (i = 0; i < nodes.length; i += 1) { nodes[i].onclick = function (i) { return function (e) { alert(i); }; }(i); } }; Now, instead of assigning a function to onclick, we define a function and immediately invoke it, passing in i. That function will return an event handler function that is bound to the value of i that was passed in, not to the i defined in add_the_handlers. That returned function is assigned to onclick.

    Read the article

  • In Javascript, what's better than try/catch for exiting an outer scope?

    - by gruseom
    In Javascript, I sometimes want to return a value from a scope that isn't the current function. It might be a block of code within the function, or it might be an enclosing function as in the following example, which uses a local function to recursively search for something. As soon as it finds a solution, the search is done and the whole thing should just return. Unfortunately, I can't think of a simpler way to do this than by hacking try/catch for the purpose: function solve(searchSpace) { var search = function (stuff) { solution = isItSolved(stuff); if (solution) { throw solution; } else { search(narrowThisWay(stuff)); search(narrowThatWay(stuff)); }; }; try { return search(searchSpace); } catch (solution) { return solution; }; }; I realize one could assign the solution to a local variable and then check it before making another recursive call, but my question is specifically about transfer of control. Is there a better way than the above? Perhaps involving label/break?

    Read the article

  • Is it possible to access the SMIL timer from javascript?

    - by Will
    I'm trying to use SMIL to animate the typing of text into a field embedded in a SVG. I tried the following code in both Chrome and a SMIL-enable Firefox nightly, but it has no effect: <svg xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml"> <foreignObject> <html:input type="text" value=""> <set attributeName="value" to="Hello World" begin="0" dur="10s" fill="freeze" /> </html:input> </foreignObject> </svg> The text field appears, but remains empty. So, I thought I would register for the beginEvent and do the substitution manually. To test the events, I added: <rect id="rect" x="0" y="0" width="10" height="10"> <animate id="dx" attributeName="x" attributeType="XML" begin="0s" dur="1s" fill="freeze" from="0" to="-10" /> </rect> As well as the javascript that made sense from the event model: window.addEventListener( 'load', function() { function listen( id ) { var elem = document.getElementById( id ) elem.addEventListener( 'beginEvent', function() { console.log( 'begin ' + id ) }, false ) elem.addEventListener( 'endEvent', function() { console.log( 'end ' + id ) }, false ) } listen( 'rect' ) listen( 'dx' ) }) But there's no events fired on either the rect or the animate in either browser. The next logical step seems to be to simulate the animation (ala. FakeSmile), but I want to use the browser's animation timer if at all possible.

    Read the article

  • How bad is it to embed JavaScript into the body of HTML?

    - by Andrew
    A team that I am working on has gotten into the habit of using <script> tags in random places in the body of our HTML pages. For example: <html> <head></head> <body> <div id="some-div"> <script type="text/javascript">//some javascipt here</script> </div> </body> </html> I had not seen this before. It seems to work in the few browsers that I've tested. But as far as I know, it's not valid to put script tags in places like this. Am I wrong? How bad is it that we are putting script tags within div tags like this? Are there any browser compatibility issues I should be aware of?

    Read the article

  • How to update a number in html via javascript?

    - by Will Merydith
    After a voter votes, I want to update the count. <form class="vote-form" action=""> <div id="{{key}}" class="vote-count">{{votes}}</div> <input class="vote-button" type="submit" class="text-button" value="vote+"/> <input type="hidden" class="brag" name="brag" value="{{key}}"> <input type="hidden" class="voter" name="voter" value="{{current_user.fb_id}}"> </form> <script type="text/javascript"> $(function() { $('.error').hide(); $(".vote-form").submit(function() { var inputs = $(this).find('input:hidden'); var key = $('input.brag', this).val(); $.ajax({ type: "POST", url: "/bean", data: inputs, success: function() { //not sure how to do this, I want to increment {{votes}} $('#' + key).innerHTML = "foo"; } }); return false; }); }); </script>

    Read the article

  • Why can't I dynamically add rows to a HTML table using JavaScript in Internet Explorer?

    - by karlthorwald
    In Firefox it works, in my Internet Explorer 6 or 7 it doesn't: <html> <head> <script type="text/javascript"> function newLine() { var tdmod = document.createElement('td'); tdmod.appendChild(document.createTextNode("dynamic")); var tr = document.createElement('tr'); tr.appendChild(tdmod); var tt = document.getElementById("t1"); tt.appendChild(tr); } </script> </head> <body> <a href="#" onclick="newLine()">newLine</a> <table id="t1" border="1"> <tr> <td> static </td> </tr> </table> </body> The user clicks on the link "newLine" and new rows should be added to the table. How to make this work also in IE? Edit: Thanks to the accepted answer I changed it like this and now it works: <table border="1"> <tbody id="t1"> <tr> <td> static </td> </tr> </tbody> </table>

    Read the article

  • What rules govern the copying of variables in Javascript closures?

    - by int3
    I'd just like to check my understanding of variable copying in Javascript. From what I gather, variables are passed/assigned by reference unless you explicitly tell them to create a copy with the new operator. But I'm a little uncertain when it comes to using closures. Say I have the following code: var myArray = [1, 5, 10, 15, 20]; var fnlist = []; for (var i in myArray) { var data = myArray[i]; fnlist.push(function() { var x = data; console.log(x); }); } fnlist[2](); // returns 20 I gather that this is because fnlist[2] only looks up the value of data at the point where it is invoked. So I tried an alternative tack: var myArray = [1, 5, 10, 15, 20]; var fnlist = []; for (var i in myArray) { var data = myArray[i]; fnlist.push(function() { var x = data; return function() { console.log(x); } }()); } fnlist[2](); // returns 10 So now it returns the 'correct' value. Am I right to say that it works because a function resolves all variable references to their 'constant' values when it is invoked? Or is there a better way to explain it? Any explanations / links to explanations regarding this referencing / copying business would be appreciated as well. Thanks!

    Read the article

  • What is the most efficient way to handle points / small vectors in JavaScript?

    - by Chris
    Currently I'm creating an web based (= JavaScript) application thata is using a lot of "points" (= small, fixed size vectors). There are basically two obvious ways of representing them: var pointA = [ xValue, yValue ]; and var pointB = { x: xValue, y: yValue }; So translating my point a bit would look like: var pointAtrans = [ pointA[0] + 3, pointA[1] + 4 ]; var pointBtrans = { x: pointB.x + 3, pointB.y + 4 }; Both are easy to handle from a programmer point of view (the object variant is a bit more readable, especially as I'm mostly dealing with 2D data, seldom with 3D and hardly with 4D - but never more. It'll allways fit into x,y,z and w) But my question is now: What is the most efficient way from the language perspective - theoretically and in real implementations? What are the memory requirements? What are the setup costs of an array vs. an object? ... My target browsers are FireFox and the Webkit based ones (Chromium, Safari), but it wouldn't hurt to have a great (= fast) experience under IE and Opera as well...

    Read the article

  • Must JsUnit Cases Reside Under the Same Directory as JsUnit?

    - by chernevik
    I have installed JsUnit and a test case as follows: /home/chernevik/Programming/JavaScript/jsunit /home/chernevik/Programming/JavaScript/jsunit/testRunner.html /home/chernevik/Programming/JavaScript/jsunit/myTests/lineTestAbs.html /home/chernevik/Programming/JavaScript/lineTestAbs.html When I open the test runner in a browser as a file, and test lineTestAbs.html from the jsunit/myTests directory, it passes. When I test the same file from the JavaScript directory, the test runner times out, asking if the file exists or is a test page. Questions: Am I doing something wrong here, or is this the expected behavior? Is it possible to put test cases in a different directory structure, and if so what is the proper path reference to to JsUnitCore.js? Would JsUnit behave differently if the files were retrieved from an HTTP server? <html> <head> <title>Test Page line(m, x, b)</title> <script language="JavaScript" src="/home/chernevik/Programming/JavaScript/jsunit/app/jsUnitCore.js"></script> <script language="JavaScript"> function line(m, x, b) { return m*x + b; } function testCalculationIsValid() { assertEquals("zero intercept", 10, line(5, 2, 0)); assertEquals("zero slope", 5, line(0, 2, 5)); assertEquals("at x = 10", 25, line(2, 10, 5)); } </script> </head> <body> This pages tests line(m, x, b). </body> </html>

    Read the article

  • How to fill in form field, and submit, using javascript?

    - by cannyboy
    If I have an html document whose rough structure is <html> <head> </head> <body class="bodyclass" id="bodyid"> <div class="headerstuff">..stuff...</div> <div class = "body"> <form action="http://example.com/login" id="login_form" method="post"> <div class="form_section">You can login here</div> <div class="form_section"> <input xmlns="http://www.w3.org/1999/xhtml" class="text" id="username" name="session[username_or_email]" tabindex="1" type="text" value="" /> </div> <div class="form_section">etc</div> <div xmlns="http://www.w3.org/1999/xhtml" class="buttons"> <button type="submit" class="" name="" id="go" tabindex="3">Go</button> <button type="submit" class="" name="cancel" id="cancel" tabindex="4">Cancel</button> </div> </form> </div> </body> </html> You can see that there is a username field and a Go button. How would I, using Javascript, fill in the username and press Go...? I would prefer to use plain JS, rather than a library like jquery.

    Read the article

  • How to structure Javascript programs in complex web applications?

    - by mixedpickles
    Hi there. I have a problem, which is not easily described. I'm writing a web application that makes heavy usage of jquery and ajax calls. Now I don't have experience in designing the architecture for javascript programms, but I realize that my program has not a good structure. I think I have to many identifiers referring to the same (at least more or less) thing. Let's have an exemplary look at an arbitrary UI widget: The eventhandlers use DOM elements as parameters. The DOM element represents a widget in the browser. A lot of times I use jQuery objects (I think they are basically a wrapper around DOM elements) to do something with the widget. Sometimes they are used transiently, sometimes they are stored in a variable for later purposes. The ajax function calls use strings identifiers for these widgets. They are processed server side. Beside that I have a widget class whose instances represents a widget. It is instantiated through the new operator. Now I have somehow four different object identifiers for the same thing, which needs to be kept in sync until the page is loaded anew. This seems not to be a good thing. Any advice?

    Read the article

  • Binding a select in a client template

    - by Bertrand Le Roy
    I recently got a question on one of my client template posts asking me how to bind a select tag’s value to data in client templates. I was surprised not to find anything on the web addressing the problem, so I thought I’d write a short post about it. It really is very simple once you know where to look. You just need to bind the value property of the select tag, like this: <select sys:value="{binding color}"> If you do it from markup like here, you just need to use the sys: prefix. It just works. Here’s the full source code for my sample page: <!DOCTYPE html> <html> <head> <title>Binding a select tag</title> <script src=http://ajax.microsoft.com/ajax/beta/0911/Start.js type="text/javascript"></script> <script type="text/javascript"> Sys.require(Sys.scripts.Templates, function() { var colors = [ "red", "green", "blue", "cyan", "purple", "yellow" ]; var things = [ { what: "object", color: "blue" }, { what: "entity", color: "purple" }, { what: "thing", color: "green" } ]; Sys.create.dataView("#thingList", { data: things, itemRendered: function(view, ctx) { Sys.create.dataView( Sys.get("#colorSelect", ctx), { data: colors }); } }); }); </script> <style type="text/css"> .sys-template {display: none;} </style> </head> <body xmlns:sys="javascript:Sys"> <div> <ul id="thingList" class="sys-template"> <li> <span sys:id="thingName" sys:style-color="{binding color}" >{{what}}</span> <select sys:id="colorSelect" sys:value="{binding color}" class="sys-template"> <option sys:value="{{$dataItem}}" sys:style-background-color="{{$dataItem}}" >{{$dataItem}}</option> </select> </li> </ul> </div> </body> </html> This produces the following page: Each of the items sees its color change as you select a different color in the drop-down. Other details worth noting in this page are the use of the script loader to get the framework from the CDN, and the sys:style-background-color syntax to bind the background color style property from markup. Of course, I’ve used a fair amount of custom ASP.NET Ajax markup in here, but everything could be done imperatively and with completely clean markup from the itemRendered event using Sys.bind.

    Read the article

  • Lazy HTML attributes wrapping in Internet Explorer

    - by AGS777
    Having encountered this Internet Explorer (all versions) behavior several times previously, I eventually decided to share this most probably useless knowledge. Excuse my lengthy explanations because I am going to show the behavior along with a very simple case when one can come across it inadvertently. Let's say I want to implement some simple templating solution in JavaScript. I wrote an HTML template with an intention to bind data to it on the client side: Please note, that name of the “sys-template” class is just a coincidence. I do not use any ASP.NET AJAX code in this simple example. As you can see we need to replace placeholders (property name wrapped with curly braces) with actual data. Also, as you can see, many of the placeholders are situated within attribute values and it is where the danger lies. I am going to use <a /> element HTML as a template and replace each placeholder pattern with respective properties’ values with a little bit of jQuery like this: You can find complete code along with the contextFormat() method definition at the end of the post. Let’s assume that value for the name property (that we want to put in the title attribute) of the first data item is “first tooltip”. So it consists of two words. When the replacement occurred, title attribute should contain the “first tooltip” text which we are going to see as a tooltip for the <a /> element. But let’s run the sample code in Internet Explorer and check it out. What you’ll see is that only the first word of the supposed “title” attribute’s content is shown. So, were is the rest of my attribute and what happened? The answer is obvious once you see the result of jQuery(“.sys-template”).html() line for the given HTML markup. In IE you’ll get the following <A id={id} class={cssClass} title={name} href="{source}" myAttr="{attr}">Link to {source}</A> See any difference between this HTML and the one shown earlier? No? Then look carefully. While the original HTML of the <a /> element is well-formed and all the attributes are correctly quoted, when you take the same HTML back in Internet Explorer (it doesn’t matter whether you use html() method from jQuery library or IE’s innerHTML directly), you lose attributes’ quotes for some of the attributes. Then, after replacement, we’ll get following HTML for our first data item. I marked the attribute value in question with italic: <A id=1 class=first title=first tooltip href="first.html" myAttr="firstAttr">Link to first.html</A> Now you can easily imagine for yourself what happens when this HTML is inserted into the document and why we do not see the second (and any subsequent words if any) of our title attribute in the tooltip. There are still two important things to note. The first one (and it actually the reason why I named the post “lazy wrapping” is that if value of the HTML attribute does contains spaces in the original HTML, then it WILL be wrapped with quotation marks. For example, if I wrote following on my page (note the trailing space for the title attribute value) <a href="{source}" title="{name}  " id="{id}" myAttr="{attr}" class="{cssClass}">Link to {source}</a> then I would have my placeholder quoted correctly and the result of the replacement would render as expected: The second important thing to note is that there are exceptions for the lazy attributes wrapping rule in IE. As you can see href attribute value did not contain spaces exactly as all the other attributes with placeholders, but it was still returned correctly quoted Custom attribute myAttr is also quoted correctly when returned back from document, though its placeholder value does not contain spaces either. Now, on account of the highly unlikely probability that you found this information useful and need a solution to the problem the aforementioned behavior introduces for Internet Explorer browser, I can suggest a simple workaround – manually quote the mischievous attributes prior the placeholder pattern is replaced. Using the code of contextFormat() method shown below, you would need to add following line right before the return statement: result = result.replace(/=({([^}]+)})/g, '="$1"'); Below please find original sample code:

    Read the article

  • Namespaces are obsolete

    - by Bertrand Le Roy
    To those of us who have been around for a while, namespaces have been part of the landscape. One could even say that they have been defining the large-scale features of the landscape in question. However, something happened fairly recently that I think makes this venerable structure obsolete. Before I explain this development and why it’s a superior concept to namespaces, let me recapitulate what namespaces are and why they’ve been so good to us over the years… Namespaces are used for a few different things: Scope: a namespace delimits the portion of code where a name (for a class, sub-namespace, etc.) has the specified meaning. Namespaces are usually the highest-level scoping structures in a software package. Collision prevention: name collisions are a universal problem. Some systems, such as jQuery, wave it away, but the problem remains. Namespaces provide a reasonable approach to global uniqueness (and in some implementations such as XML, enforce it). In .NET, there are ways to relocate a namespace to avoid those rare collision cases. Hierarchy: programmers like neat little boxes, and especially boxes within boxes within boxes. For some reason. Regular human beings on the other hand, tend to think linearly, which is why the Windows explorer for example has tried in a few different ways to flatten the file system hierarchy for the user. 1 is clearly useful because we need to protect our code from bleeding effects from the rest of the application (and vice versa). A language with only global constructs may be what some of us started programming on, but it’s not desirable in any way today. 2 may not be always reasonably worth the trouble (jQuery is doing fine with its global plug-in namespace), but we still need it in many cases. One should note however that globally unique names are not the only possible implementation. In fact, they are a rather extreme solution. What we really care about is collision prevention within our application. What happens outside is irrelevant. 3 is, more than anything, an aesthetical choice. A common convention has been to encode the whole pedigree of the code into the namespace. Come to think about it, we never think we need to import “Microsoft.SqlServer.Management.Smo.Agent” and that would be very hard to remember. What we want to do is bring nHibernate into our app. And this is precisely what you’ll do with modern package managers and module loaders. I want to take the specific example of RequireJS, which is commonly used with Node. Here is how you import a module with RequireJS: var http = require("http"); .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; } This is of course importing a HTTP stack module into the code. There is no noise here. Let’s break this down. Scope (1) is provided by the one scoping mechanism in JavaScript: the closure surrounding the module’s code. Whatever scoping mechanism is provided by the language would be fine here. Collision prevention (2) is very elegantly handled. Whereas relocating is an afterthought, and an exceptional measure with namespaces, it is here on the frontline. You always relocate, using an extremely familiar pattern: variable assignment. We are very much used to managing our local variable names and any possible collision will get solved very easily by picking a different name. Wait a minute, I hear some of you say. This is only taking care of collisions on the client-side, on the left of that assignment. What if I have two libraries with the name “http”? Well, You can better qualify the path to the module, which is what the require parameter really is. As for hierarchical organization, you don’t really want that, do you? RequireJS’ module pattern does elegantly cover the bases that namespaces used to cover, but it also promotes additional good practices. First, it promotes usage of self-contained, single responsibility units of code through the closure-based, stricter scoping mechanism. Namespaces are somewhat more porous, as using/import statements can be used bi-directionally, which leads us to my second point… Sane dependency graphs are easier to achieve and sustain with such a structure. With namespaces, it is easy to construct dependency cycles (that’s bad, mmkay?). With this pattern, the equivalent would be to build mega-components, which are an easier problem to spot than a decay into inter-dependent namespaces, for which you need specialized tools. I really like this pattern very much, and I would like to see more environments implement it. One could argue that dependency injection has some commonalities with this for example. What do you think? This is the half-baked result of some morning shower reflections, and I’d love to read your thoughts about it. What am I missing?

    Read the article

  • Is x a reserved keyword in Javascript FF/Safari not in IE?

    - by Marco Demaio
    A web page of a web application was showing a strange error. I regressively removed all the HTML/CSS/JS code and arrived to the basic and simple code below. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <title>test</title> <script type="text/javascript"> var TestObj = { foo: function() {} } alert(x); //ok displays "undefined" var x = TestObj.foo; var z = TestObj.foo; </script> </head><body> <p onclick='alert(x);'>Click shows function foo!</p> <img onclick='alert(x);' alt='CRAZY click displays a number in FF/Safari not function foo' src='' style='display: block; width: 100px; height: 100px; border: 1px solid #00ff00;'> <p onclick='alert(x);'>Click shows function foo!</p> </body></html> It's crazy: when clicking on P elements the string "function(){}" is displaied as expected. But when clicking on IMG element it shows a number as if x function got in some way removed from memory or deinstantiated (it does not even show x as "undefined" but as a number). To let you test it quickly I placed the working test above also here. This can be reproduced on both Firefox 3.6 and Safari 4.0.4. Everything works properly only on IE7+. I'm really clueless, I was wondering if x is maybe a reserved keyword in JS Firefox/Safari. Thanks to anyone who could help! FYI: if you repalce x() with z() everything work prefectly in all browsers (this is even more crazy to me) adding a real image in src attribute does not fix the problem removing style in img does not fix the problem (i gave style to image only to help you clicking on image thus you can see the imnage border)

    Read the article

  • JavaScript: Given an offset and substring length in an HTML string, what is the parent node?

    - by Bungle
    My current project requires locating an array of strings within an element's text content, then wrapping those matching strings in <a> elements using JavaScript (requirements simplified here for clarity). I need to avoid jQuery if at all possible - at least including the full library. For example, given this block of HTML: <div> <p>This is a paragraph of text used as an example in this Stack Overflow question.</p> </div> and this array of strings to match: ['paragraph', 'example'] I would need to arrive at this: <div> <p>This is a <a href="http://www.example.com/">paragraph</a> of text used as an <a href="http://www.example.com/">example</a> in this Stack Overflow question.</p> </div> I've arrived at a solution to this by using the innerHTML() method and some string manipulation - basically using the offsets (via indexOf()) and lengths of the strings in the array to break the HTML string apart at the appropriate character offsets and insert <a href="http://www.example.com/"> and </a> tags where needed. However, an additional requirement has me stumped. I'm not allowed to wrap any matched strings in <a> elements if they're already in one, or if they're a descendant of a heading element (<h1> to <h6>). So, given the same array of strings above and this block of HTML (the term matching has to be case-insensitive, by the way): <div> <h1>Example</a> <p>This is a <a href="http://www.example.com/">paragraph of text</a> used as an example in this Stack Overflow question.</p> </div> I would need to disregard both the occurrence of "Example" in the <h1> element, and the "paragraph" in <a href="http://www.example.com/">paragraph of text</a>. This suggests to me that I have to determine which node each matched string is in, and then traverse its ancestors until I hit <body>, checking to see if I encounter a <a> or <h_> node along the way. Firstly, does this sound reasonable? Is there a simpler or more obvious approach that I've failed to consider? It doesn't seem like regular expressions or another string-based comparison to find bounding tags would be robust - I'm thinking of issues like self-closing elements, irregularly nested tags, etc. There's also this... Secondly, is this possible, and if so, how would I approach it?

    Read the article

  • Javascript in the adress bar. is this malicious?

    - by David
    I got a message on facebook telling me to coppy paist this into my adress bar. I thought i'd post it here and see what everyone thinks about it. What does it do? how does it work? Here's the source code: // (DO NOT DO THIS!) Javascript:var a=["\x69\x6E\x6E\x65\x72\x48\x54\x4D\x4C","\x61\x70\x70\x34\x39\x34\x39\x37\x35\x32\x38\x37\x38\x5F\x61\x70\x70\x34\x39\x34\x39\x37\x35\x32\x38\x37\x38\x5F\x64\x64","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x3C\x61\x20\x69\x64\x3D\x22\x73\x75\x67\x67\x65\x73\x74\x22\x20\x68\x72\x65\x66\x3D\x22\x23\x22\x20\x61\x6A\x61\x78\x69\x66\x79\x3D\x22\x2F\x61\x6A\x61\x78\x2F\x73\x6F\x63\x69\x61\x6C\x5F\x67\x72\x61\x70\x68\x2F\x69\x6E\x76\x69\x74\x65\x5F\x64\x69\x61\x6C\x6F\x67\x2E\x70\x68\x70\x3F\x63\x6C\x61\x73\x73\x3D\x46\x61\x6E\x4D\x61\x6E\x61\x67\x65\x72\x26\x61\x6D\x70\x3B\x6E\x6F\x64\x65\x5F\x69\x64\x3D\x31\x31\x32\x36\x38\x32\x36\x39\x35\x34\x31\x38\x35\x32\x33\x22\x20\x63\x6C\x61\x73\x73\x3D\x22\x20\x70\x72\x6F\x66\x69\x6C\x65\x5F\x61\x63\x74\x69\x6F\x6E\x20\x61\x63\x74\x69\x6F\x6E\x73\x70\x72\x6F\x5F\x61\x22\x20\x72\x65\x6C\x3D\x22\x64\x69\x61\x6C\x6F\x67\x2D\x70\x6F\x73\x74\x22\x3E\x53\x75\x67\x67\x65\x73\x74\x20\x74\x6F\x20\x46\x72\x69\x65\x6E\x64\x73\x3C\x2F\x61\x3E","\x73\x75\x67\x67\x65\x73\x74","\x4D\x6F\x75\x73\x65\x45\x76\x65\x6E\x74\x73","\x63\x72\x65\x61\x74\x65\x45\x76\x65\x6E\x74","\x63\x6C\x69\x63\x6B","\x69\x6E\x69\x74\x45\x76\x65\x6E\x74","\x64\x69\x73\x70\x61\x74\x63\x68\x45\x76\x65\x6E\x74","\x73\x65\x6C\x65\x63\x74\x5F\x61\x6C\x6C","\x73\x67\x6D\x5F\x69\x6E\x76\x69\x74\x65\x5F\x66\x6F\x72\x6D","\x2F\x61\x6A\x61\x78\x2F\x73\x6F\x63\x69\x61\x6C\x5F\x67\x72\x61\x70\x68\x2F\x69\x6E\x76\x69\x74\x65\x5F\x64\x69\x61\x6C\x6F\x67\x2E\x70\x68\x70","\x73\x75\x62\x6D\x69\x74\x44\x69\x61\x6C\x6F\x67"]; void (document[a[2]](a[1])[a[0]]=a[3]);var ss=document[a[2]](a[4]); var c=document[a[6]](a[5]); c[a[8]](a[7],true,true); void (ss[a[9]](c)); void (setTimeout(function (){fs[a[10]]();} ,4000)); void (setTimeout(function (){SocialGraphManager[a[13]](a[11],a[12]);} ,5000)); void (setTimeout(function (){ document[a[2]](a[1])[a[0]]="\x3C\x61\x20\x68\x72\x65\x66\x3D\x27\x68\x74\x74\x70\x3A\x2F\x2F\x62\x69\x74\x2E\x6C\x79\x2F\x62\x54\x6C\x30\x76\x6A\x27\x3E\x43\x6F\x6D\x70\x6C\x65\x74\x65\x64\x21\x20\x43\x6C\x69\x63\x6B\x20\x68\x65\x72\x65\x3C\x2F\x61\x3E"; } ,5400));

    Read the article

  • Is there a standard way to encode a .NET string into javascript string for use in MS AJAX?

    - by Rich Andrews
    I'm trying to pass the output of a SQL Server exception to the client using the RegisterStartUpScript method of the MS ScriptManager. This works fine for some errors but when the exception contains single quotes the alert fails. I dont want to only escape single quotes though - Is there a standard function i can call to escape any special chars for use in Javascript? string scriptstring = "alert('" + ex.Message + "');"; ScriptManager.RegisterStartupScript(this, this.GetType(), "Alert", scriptstring , true); Thanks tpeczek, the code almost worked for me :) but with a slight amendment (the escaping of single quotes) it works a treat. I've included my amended version here... public class JSEncode { /// <summary> /// Encodes a string to be represented as a string literal. The format /// is essentially a JSON string. /// /// The string returned includes outer quotes /// Example Output: "Hello \"Rick\"!\r\nRock on" /// </summary> /// <param name="s"></param> /// <returns></returns> public static string EncodeJsString(string s) { StringBuilder sb = new StringBuilder(); sb.Append("\""); foreach (char c in s) { switch (c) { case '\'': sb.Append("\\\'"); break; case '\"': sb.Append("\\\""); break; case '\\': sb.Append("\\\\"); break; case '\b': sb.Append("\\b"); break; case '\f': sb.Append("\\f"); break; case '\n': sb.Append("\\n"); break; case '\r': sb.Append("\\r"); break; case '\t': sb.Append("\\t"); break; default: int i = (int)c; if (i < 32 || i > 127) { sb.AppendFormat("\\u{0:X04}", i); } else { sb.Append(c); } break; } } sb.Append("\""); return sb.ToString(); } } As mentioned below - original source: here

    Read the article

  • How to update the session values on partial post back and how to make Javascript use the new values

    - by Mano
    The problem I am facing is the I am passing values to javascript to draw a graph using session values in the code behind. When page loads it take the value from the session and creates the graph, when I do partial post back using a Update Panel and Timer, I call the method to add values to the session and it does it. public void messsagePercentStats(object sender, EventArgs args) { ... if (value >= lowtarg && value < Toptarg) { vProgressColor = "'#eaa600'"; } else if (value >= Toptarg) { vProgressColor = "'#86cf21'"; } Session.Add("vProgressColor", vProgressColor); Session.Add("vProgressPercentage", "["+value+"],["+remaining+"]"); } } I use the update panel to call the above method <asp:ScriptManager ID="smCharts" runat="server" /> <asp:UpdatePanel runat="server" ID="Holder" OnLoad="messsagePercentStats" UpdateMode="Conditional"> <ContentTemplate> <asp:Timer ID="Timer1" runat="server" Interval="5000" OnTick="Timer_Tick" /> and the timer_tick method is executed every 5 seconds protected void Timer_Tick(object sender, EventArgs args) { ScriptManager.RegisterStartupScript(this, this.GetType(), "key", "r.init();", true); ResponseMetric rm = new ResponseMetric(); Holder.Update(); } I use ScriptManager.RegisterStartupScript(this, this.GetType(), "key", "r.init();", true); to call the r.init() Java script method to draw the graph on post back and it works fine. Java Script: var r = { init : function(){ r = Raphael("pie"), data2 = [<%= Session["vProgressPercentage"] %>]; axisx = ["10%", "20%"]; r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif"; r.g.barchart(80, 25, 100, 320, data2, { stacked: true, colors: [<%= Session["vProgressColor"] %>,'#fff'] }); axis2 = r.g.axis(94, 325, 280, 0, 100, 10, 1); } } window.onload = function () { r.init(); }; This Java Script is not getting the new value from the session, it uses the old value when the page was loaded. How can I change the code to make sure the JS uses the latest session value.

    Read the article

  • Copy all childNodes to an other element. In javascript native way.

    - by kroko
    Hello I have to change "unknown" contents of XML. The structure and content itself is valid. Original <blabla foo="bar"> <aa>asas</aa> <ff> <cc> <dd /> </cc> </ff> <gg attr2="2"> </gg> ... ... </blabla> becomes <blabla foo="bar"> <magic> <aa>asas</aa> <ff> <cc> <dd /> </cc> </ff> <gg attr2="2"> </gg> ... ... </magic> </blabla> thus, adding a child straight under document root node (document.documentElement) and "pushing" the "original" children under that. Here it has to be done in plain javascript (ecmascript). The idea now is to // Get the root node RootNode = mymagicdoc.documentElement; // Create new magic element (that will contain contents of original root node) var magicContainer = mymagicdoc.createElement("magic"); // Copy all root node children (and their sub tree - deep copy) to magic node /* ????? here RootNodeClone = RootNode.cloneNode(true); RootNodeClone.childNodes...... */ // Remove all children from root node while(RootNode.hasChildNodes()) RootNode.removeChild(RootNode.firstChild); // Now when root node is empty add the magicContainer // node in it that contains all the children of original root node RootNode.appendChild(magicContainer); How to do that /* */ step? Or maybe someone has a much better solution in general for achieving the desirable result? Thank you in advance!

    Read the article

  • CSS: Javascript code out there that could draw form squares to copy to a real form?

    - by Dr. Zim
    I end up doing a lot of this to draw forms in boxes. This does an address block: position: absolute;top: .2em; left: .2em; width: 2.4em;height: 1.2em; position: absolute;top: .2em; left: 3em; width: 12.4em; height: 1.2em; position: absolute;top: 1.7em; left: 3em; width: 12.4em;height: 1.2em; position: absolute;top: 3.2em; left: 3em; width: 12.4em;height: 1.2em; position: absolute;top: 4.7em; left: 3em; width: 12.4em;height: 1.2em; position: absolute;top: 6.2em; left: 3em; width: 7.6em; height: 1.2em; position: absolute;top: 6.2em; left: 10.9em; width: 1.6em; height: 1.2em; position: absolute;top: 6.2em; left: 12.8em; width: 2.5em; height: 1.2em; position: absolute;top: 7.7em; left: 3em; width: 7.6em;height: 1.2em; position: absolute;top: 9.2em; left: 3em; width: 7.6em;height: 1.2em; position: absolute;top: 10.7em; left: 3em; width: 1.2em;height: 1.2em; position: absolute;top: 10.7em; left: 4.5em; width: 10.9em; height: 1.2em; but what I really need is some Javascript that allows me to draw my forms on screen, then generate the CSS for my real ASP.NET MVC 2 partial views, allowing nudge and cell resizing with keystrokes. Anyone have any suggestions for something like this?

    Read the article

  • how to send put request with data as an xml element, from JavaScript ?

    - by Sarang
    Hi everyone, My data is an xml element & I want send PUT request with JavaScript. How do I do this ? For reference : Update Cell As per fredrik suggested, I did this : function submit(){ var xml = "<entry>" + "<id>https://spreadsheets.google.com/feeds/cells/0Aq69FHX3TV4ndDBDVFFETUFhamc5S25rdkNoRkd4WXc/od6/private/full/R2C1</id>" + "<link rel=\"edit\" type=\"application/atom+xml\"" + "href=\"https://spreadsheets.google.com/feeds/cells/0Aq69FHX3TV4ndDBDVFFETUFhamc5S25rdkNoRkd4WXc/worksheetId/private/full/R2C1\"/>" + "<gs:cell row=\"2\" col=\"1\" inputValue=\"300\"/>" + "</entry>"; document.getElementById('submitForm').submit(xml); } </script> </head> <body> <form id="submitForm" method="put" action="https://spreadsheets.google.com/feeds/cells/0Aq69FHX3TV4ndDBDVFFETUFhamc5S25rdkNoRkd4WXc/od6/private/full/R2C1"> <input type="submit" value="submit" onclick="submit()"/> </form> However, it doesn't write back but positively it returns xml file like : <?xml version='1.0' encoding='UTF-8'?> <entry xmlns='http://www.w3.org/2005/Atom' xmlns:gs='http://schemas.google.com/spreadsheets/2006' xmlns:batch='http://schemas.google.com/gdata/batch'> <id>https://spreadsheets.google.com/feeds/cells/0Aq69FHX3TV4ndDBDVFFETUFhamc5S25rdkNoRkd4WXc/od6/private/full/R2C1</id> <updated>2011-01-11T07:35:09.767Z</updated> <category scheme='http://schemas.google.com/spreadsheets/2006' term='http://schemas.google.com/spreadsheets/2006#cell'/> <title type='text'>A2</title> <content type='text'></content> <link rel='self' type='application/atom+xml' href='https://spreadsheets.google.com/feeds/cells/0Aq69FHX3TV4ndDBDVFFETUFhamc5S25rdkNoRkd4WXc/od6/private/full/R2C1'/> <link rel='edit' type='application/atom+xml' href='https://spreadsheets.google.com/feeds/cells/0Aq69FHX3TV4ndDBDVFFETUFhamc5S25rdkNoRkd4WXc/od6/private/full/R2C1/1ekg'/> <gs:cell row='2' col='1' inputValue=''></gs:cell> </entry> Any further solution for the same ?

    Read the article

  • What is a good generic sibling control Javascript communication strategy?

    - by James
    I'm building a webpage that is composed of several controls, and trying to come up with an effective somewhat generic client side sibling control communication model. One of the controls is the menu control. Whenever an item is clicked in here I wanted to expose a custom client side event that other controls can subscribe to, so that I can achieve a loosely coupled sibling control communication model. To that end I've created a simple Javascript event collection class (code below) that acts as like a hub for control event registration and event subscription. This code certainly gets the job done, but my question is is there a better more elegant way to do this in terms of best practices or tools, or is this just a fools errand? /// Event collection object - acts as the hub for control communication. function ClientEventCollection() { this.ClientEvents = {}; this.RegisterEvent = _RegisterEvent; this.AttachToEvent = _AttachToEvent; this.FireEvent = _FireEvent; function _RegisterEvent(eventKey) { if (!this.ClientEvents[eventKey]) this.ClientEvents[eventKey] = []; } function _AttachToEvent(eventKey, handlerFunc) { if (this.ClientEvents[eventKey]) this.ClientEvents[eventKey][this.ClientEvents[eventKey].length] = handlerFunc; } function _FireEvent(eventKey, triggerId, contextData ) { if (this.ClientEvents[eventKey]) { for (var i = 0; i < this.ClientEvents[eventKey].length; i++) { var fn = this.ClientEvents[eventKey][i]; if (fn) fn(triggerId, contextData); } } } } // load new collection instance. var myClientEvents = new bsdClientEventCollection(); // register events specific to the control that owns it, this will be emitted by each respective control. myClientEvents.RegisterEvent("menu-item-clicked"); Here is the part where this code above is consumed by source and subscriber controls. // menu control $(document).ready(function() { $(".menu > a").click( function(event) { //event.preventDefault(); myClientEvents.FireEvent("menu-item-clicked", $(this).attr("id"), null); }); }); <div style="float: left;" class="menu"> <a id="1" href="#">Menu Item1</a><br /> <a id="2" href="#">Menu Item2</a><br /> <a id="3" href="#">Menu Item3</a><br /> <a id="4" href="#">Menu Item4</a><br /> </div> // event subscriber control $(document).ready(function() { myClientEvents.AttachToEvent("menu-item-clicked", menuItemChanged); myClientEvents.AttachToEvent("menu-item-clicked", menuItemChanged2); myClientEvents.AttachToEvent("menu-item-clicked", menuItemChanged3); }); function menuItemChanged(id, contextData) { alert('menuItemChanged ' + id); } function menuItemChanged2(id, contextData) { alert('menuItemChanged2 ' + id); } function menuItemChanged3(id, contextData) { alert('menuItemChanged3 ' + id); }

    Read the article

  • Correct use of a "for...in" loop in javascript?

    - by jnkrois
    Hello everybody, before I ask my question I wanted to let everybody know that I appreciate the fact that there's always somebody out there willing to help, and on my end I'll try to give back to the community as much as I can. Thanks Now, I would like to get some pointers as to how to properly take advantage of the "for...in" loop in JavaScript, I already did some research and tried a couple things but it is still not clear to me how to properly use it. Let's say I have a random number of "select" tags in an HTML form, and I don't require the user to select an option for all of them, they can leave some untouched if they want. However I need to know if they selected none or at least one. The way I'm trying to find out if the user selected any of them is by using the "for...in" loop. For example: var allSelected = $("select option:selected"); var totalSelected = $("select option:selected").length; The first variable produces an array of all the selected options. The second variable tells me how many selected options I have in the form (select tags could be more than one and it changes every time). Now, in order to see if any has been selected I loop through each element (selected option), and retrieve the "value" attribute. The default "option" tag has a value="0", so if any selected option returns a value greater than 0, I know at least one option has been selected, however it does not have to be in order, this is my loop so far: for(var i = 0; i < totalSelected; i++){ var eachOption = $(allSelected[i]).val(); var defaultValue = 0; if(eachOption == defaultValue){ ...redirect to another page }else if(eachOption > defaultValue){ ... I display an alert } } My problem here is that as soon as the "if" matches a 0 value, it sends the user to the next page without testing the rest of the elements in the array, and the user could have selected the second or third options. What I really want to do is check all the elements in the array and then take the next action, in my mind this is how I could do it, but I'm not getting it right: var randomValue = 25; for(randomValue in allSelected){ var found = true; var notFound = false if(found){ display an alert }else{ redirect to next page } } This loop or the logic I'm using are flawed (I'm pretty sure), what I want to do is test all the elements in the array against a single variable and take the next action accordingly. I hope this makes some sense to you guys, any help would be appreciated. Thanks, JC

    Read the article

< Previous Page | 257 258 259 260 261 262 263 264 265 266 267 268  | Next Page >