JavaScript - Dynamically Executing New Javascript Sources
I'm attempting to run a small piece of code that will execute one of two source js files on my server. I have no problem creating the proper DOM script object with the proper type and conditional src value. However, when i add it to the document it does not seem to execute. I've tried adding it in two places, both using .appendChild();
myLocation.parentNode.appendChild(newScript); and document.getElementsByTagName("head")[0].appendChild(newScript); (myLocation is a calculated element representing the current script tag) In both these cases, the script tag is added to the document where I intended, but it does not appear to execute. The src has some doc writes in it and the tags the new script should generate right after itself are not there, as they are when I hard code the new sourced script tag into the document. All in all, my confusion comes from the fact that when I write a <script ... src="mysrc.js"></script> into my document, it behaves differently than when I have a script write an identical tag into the document in the same location. Also, fyi, I'm currently using Chrome (though I will require a multi-platform solution). Thanks for your time. Similar Tutorialsvar action = method+'sometexthere' submit eval('action') Hi, Here is something i was digging up but i stop after 3 hours of interpreting the code... (The code is inaccurate) What i was trying to get was load up a page and pass a javascript example: 1) load www.mysite.com 2) pass javascript using javascript: The problem that i'm facing is +action+ isn't define after the page was load up and i can't seem to validate by passing vars into the browser. example: javascript:document.write('<script>var desc = 10; var offx = 10; var offy = 10</script>') I'm a bit vague here, i will post more info later... i have this line in my code: PHP Code: echo '<a href="" onClick="yesnolist()">Free Chat</a>'; then at the top i have: Code: <? php //have some php here ?> <div class="innerContainer"> <head> <script type="text/JavaScript"> function yesnolist(val) { alert("lakjsd"); var e = confirm('Do you want to send a free chat request?'); if (e == true) { window.location.href = "http://www-rainbowcode-mobi/confirmfreechat.php"; window.location('http://www-rainbowcode-mobi/confirmfreechat.php'); return true; } else return false; } </script> </head> <span class="headings2">CONTACTS</span> //and more code after this echo '<a href="" onClick="yesnolist()">Free Chat</a>'; why is it not doing my onClick()?? please help? thanks Code: function displayResult() { var damn = document.getElementById("textyar").value; document.getElementById("oneforty").innerHTML = damn; var newDIV = document.createElement('div'); newDIV.className = "tweets"; var newspan =document.createElement('span'); newspan.className = "imagespanleft"; var img = document.createElement("IMG"); img.className="image"; img.src = "tweets/me.jpg"; newDIV.innerHTML = document.getElementById('textyar').value; document.getElementById('leftmaindiv').appendChild(newDIV).appendChild(newspan).appendChild(img); } this is the code , i m trying to create an interface like twitter where u put in text box and tweet appears below in problem is it is creating two divs instead of one , i tried insertbefore() as well but same behaviour plz ask any questions if u r still not clear Hi, I am new to programming and I am trying to write a code that will time how long it takes for you to write a word. First you input the word you would like to write, and than after you have pressed enter I want the program to "feel" when you start writing the word, at that point the timer should start. And then it shall know when you have completed the word and in that moment stop the timer. I have a built a timer that works fine, see startCounter() but i want it to be executed as i described above... This is the code: Code: <div> <div class="inputBox"> <input id="textBox" type="text" placeholder=" What word would you like to time?" onKeydown="Javascript: if (event.keyCode==13) hello();"> <input type="button" value="RushWrite" id="Btn" onclick="hello()"></input> <script> function hello() { if (textBox.value != "") { var wordInput = document.getElementById("textBox").value; document.getElementById("textBox").placeholder=" Let's RushWrite: "+wordInput; textBox.value = ""; document.getElementById("Btn").value="GoGo!"; document.getElementById("time").innerHTML="00.00"; }; } </script> <button id="time" type="text"></button> <script> function startCounter(){ var counter = 0; setInterval(function () { ++counter; document.getElementById("time").innerHTML=(counter); }, 1000); }; </script> <script> </script> </div> </div> Thankful for any advise! I have been using Perl code for about 15 years and I develop/support Perl code used by engineers who run this code in Linux terminals. The code uses Tk as the user interface, which in turn executes Perl scripts. We are looking into the possibility of putting the user interface in a web browser, which would (somehow) still run the same scripts on a Linux box. I can write a Perl script that, given a Linux machine name, user name and password, can open a connection to that machine and execute anything on that machine. My question: Can this sort of thing be done via a web page? This is posted in the JS forum because JS seems like it would provide the tools to create the type of interactive user interface I require. (I don't know a thing about JS, at the moment I'm trying to decide which language to use to implement my s/w, but first I need to determine if the language can do what I need.) I am doing a project in which I have to automatically download a file from a secured website by providing a username and password for which I am using "Selenium" with "Python 3.4.1" in Windows 7 x86_64 environment. The website is written using "JavaScript". And I don't have any practical working knowledge of JavaScript. I know Java but not JavaScript. So far, I have done this in Python: Code: from selenium import webdriver from selenium.webdriver.common.keys import Keys driver = webdriver.Firefox() driver.get("http://www.website_name.com") element_user_name = driver.find_element_by_id("userid") element_user_name.send_keys("user_name") element_passwd = driver.find_element_by_id("password") element_passwd.send_keys("some_passwd") elem = driver.find_element_by_id("submit") elem.send_keys(Keys.RETURN) After this code snippet, I am successfully directed to the home screen of the website. But now, I hit the snag. The source code of the website contains JavaScript functions which do not contain the code of the elements on the page which I want to manipulate. The main page contains code for user authentication, invalidate client and the likes of it. But when I right click on an element on the Home page, I get to see their source codes in a separate window (in Firefox 32). The source code of the element which I want to use "Favorites and Dashboards": Code: <!DOCTYPE html> <html id="ext-gen3" class=" ext-strict x-viewport" decorator="blank" webdriver="true"> <head></head> <body id="ext-gen4" class="ext-gecko3 cwc-view x-border-layout-ct" onload="cwc.getFrameworkWindow()"> <div id="cwc_header" class=" masthead x-border-panel" style="left: 0px; top: 0px; width: 1366px; height: 27px;"></div> <div id="cwcNavPanel" class=" x-panel cwc-navPanel x-border-panel" style="width: 220px; left: 0px; top: 56px;"> <div id="ext-gen17" class="x-panel-bwrap"> <div id="ext-gen18" class="x-panel-tbar x-panel-tbar-noheader" style="width: 220px;"></div> <div id="ext-gen19" class="x-panel-body x-panel-body-noheader" style="width: 220px; height: 323px;"> <div id="cwcAccordionNav" class=" x-panel x-panel-noborder" style="width: 218px;"> <div id="ext-gen48" class="x-panel-bwrap"> <div id="ext-gen49" class="x-panel-body x-panel-body-noheader x-panel-body-noborder" style="overflow: auto; width: 218px; height: 321px;" role="navigation"> <div id="ROOT/Favorites and Dashboards" class="x-panel x-panel-noborder x-tree" style="width: auto;"> <div id="ext-gen76" class="x-panel-header x-panel-header-noborder x-unselectable x-accordion-hd" style="cursor: pointer;" tabindex="0" role="tab" aria-expanded="true"></div> <div id="ext-gen77" class="x-panel-bwrap" style="display: block; visibility: visible; position: static; left: 0px; top: 0px; z-index: auto;"> <div id="ext-gen78" class="x-panel-body x-panel-body-noborder" style="width: auto; height: auto;"> <ul id="ext-gen79" class="x-tree-root-ct x-tree-arrows" role="group"> <div class="x-tree-root-node"> <li class="x-tree-node"></li> <li class="x-tree-node"></li> <li class="x-tree-node"></li> <li class="x-tree-node"></li> <li class="x-tree-node"></li> <li class="x-tree-node"></li> <li id="ext-gen447" class="x-tree-node"> <div id="ROOT/Favorites and Dashboards/6" class="x-tree-node-el x-unselectable x-tree-node-collapsed" unselectable="on" ext:tree-node-id="ROOT/Favorites and Dashboards/6"> <span class="x-tree-node-indent"></span> <img id="ext-gen94" class="x-tree-ec-icon x-tree-elbow-plus" src="/sm/default/s.gif" alt=""></img> <img class="x-tree-node-icon cwc-tree-noIcon-node" unselectable="on" src="/sm/default/s.gif" alt=""></img> <a id="ext-gen95" class="x-tree-node-anchor" tabindex="0" href="" role="treeitem" hidefocus="on" aria-expanded="false"> In this snippet, I want to click on "Favorites and Dashboards". How do I do it? Thanks for your help! Could you please help me with this. I've tried multiple ways of doing this, but nothing works. Code: <html> <head> <style> table { background: lightblue; padding: 30px; margin: 20px; } .border{ text-align: center; border: thin solid black; padding: 40px; font-size: 50px; } img { border:1px solid black; } .vis { padding: 40px; border: thick solid black; text-align: center; border-spacing: 30px; background: maroon; } .invis { background: lightblue; } </style> <script type="javascript/text"> var item = document.getElementById('animal'); function change(name){ item.src = name; } function back(){ item.src = "blank.jpg"; } function changeName(word){ var item2 = document.getElementById('animalName') item2.innerHTML = word } </script> </head> <body> <table width="700" height="600" cellspacing="40"> <tr> <td class="vis" rowspan="3"><p><br> <img src="cat.thumb.jpg" onMouseOver="change('cat.jpg'); changeName('cat')" onMouseOut="back();"> <p> <img src="dog.thumb.jpg" onMouseOver="change('dog.jpg'); changeName('dog')" onMouseOut="back();"> <p> <img src="cow.thumb.jpg" onMouseOver="change('cow.jpg'); changeName('cow')" onMouseOut="back();"> <p> <img src="owl.thumb.jpg" onMouseOver="change('owl.jpg'); changeName('owl')" onMouseOut="back();"> <p> <img src="pig.thumb.jpg" onMouseOver="change('pig.jpg'); changeName('pig')" onMouseOut="back();"> <p> </td> <td class="invis"> </td></tr> <tr> <td class="vis"> <div class="border"> <h1 id='animalName'>Dog</h1> </div> <br> <img id='animal' src="blank.jpg"> </td> </tr> <td class="invis"> </tr> </table> </body> </html> hi i am totally frustrated !! i have been using this on my webpage. http://www.barelyfitz.com/projects/tabber/ if u see under the advanced section there is a code for changing tabs dynamically. Code: document.getElementById('mytab1').tabber.tabShow(0); this doesn't work. basically i have a webpage internet.htm. which has a menubar with loads of menu items. if i click one of the submenu items this code should change the dynamic tabs in admin.htm. the code i have defined for the submenu click is: Code: <li><a href="admin.htm" onClick="document.getElementById('Admin').tabber.tabShow(0)" >Forms</a></li> the full code is: Code: <ul id="QualityMenuBar" class="MenuBarHorizontal"> <li><a class="MenuBarItemSubmenu" href="#"><strong>Admin</strong></a> <ul> <li><a href="AdminDocuments.htm" onClick="document.getElementById("Admin").tabber.tabShow(0)" >Forms</a></li> <li><a href="AdminDocuments.htm" >Guidance</a></li> <li><a href="AdminDocuments.htm" onClick="document.getElementById("Admin").tabber.tabShow(2)" >Organisation Chart</a></li> <li><a href="AdminDocuments.htm">Plans</a></li> <li><a href="AdminDocuments.htm">Procedures</a></li> </ul> </li> this is what the admindocuments.htm contains, based on the website link i have borrowed the code from. Code: <div class="tabber" id="admin"> <div class="tabbertab"> <h2>Forms</h2> <script type="text/javascript" src="adminForms.js"></script> </div> <div class="tabbertab"> <h2>Guidance</h2> <script type="text/javascript" src="adminGuidance.js"></script> </div> <div class="tabbertab"> <h2>Org. Chart</h2> <script type="text/javascript" src="adminOrg.js"></script> </div> <div class="tabbertab"> <h2>Plans</h2> <script type="text/javascript" src="adminPlans.js"></script> </div> <div class="tabbertab"> <h2>Procedures</h2> <script type="text/javascript" src="adminProc.js"></script> </div> </div> whenever i click the submenu they all point to the first tab only. it doesn't change inspite of the code. what am i doing wrong here? please advice. Many thanks. I've done some googling and have come across some information, but I'm not quite sure how to apply it to my problem. I have a PHP page saturna.php with six frames on it using the frameset commands. I would like to somehow make it so that when I click on something in one frame (with one PHP page loaded in it - game.php), it automatically/dynamically updates one of the other PHP pages (inventory.php) in another frame. What will happen is when the thing is clicked on in game.php, an entry will be added to the database, and the second PHP page (which retrieves information from the database) will notice that there is a new relevant record, and will add it to the inventory.php page in the table I have constructed there. From my googling it seems I need to use JavaScript to do this, but I'm not quite sure how - any ideas ? Thanks very much! I've been looking around and haven't been able to find much on the subject. Anyways I'm wondering how to pull data from more than one xml source on a single page. I've found people referencing the subject but nothing concrete on how it's done. Any help would be much appreciated.
I'm new here and this is my first post, I hope I can find help here. How can i dynamically generate this type of form element in javascript, including the table rows and columns enclosing the form elements and whenever that 'Add More' button is clicked, a new instant of the same form will generated and select drop down list populated. I have try to google for solution, but without success. I code in PHP, but i need it to integrate in my code. Thanks for your help. Hello my first post. I have a function that insert commas via onclick or onblur. Code: function addCommas(nStr) { nStr += ''; x = nStr.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } return x1 + x2; } I also am using code from this link, where I can specify what parameters to allow the user to enter only positive/negative, decimals values and restricting characters that are not allowed. http://www.mredkj.com/tutorials/validate2.html I am having a hard time to incorporate the addCommas function into the link above. Does anyone have an example that I can look at where I can have commas added to a value dynamically while typing? e.g. if I type 1000 after that last 0 keystroke, it turns the value into 1,000. If I add 3 more zeros it turns it into 1,000,000. In the same vain if I subtract a 0 from the 1,000,000 the value is 100,000 instead. I appreciate any assistance in advance. Hi everyone, I am pretty new to JS and I am looking for help writing a function that will dynamically calculate filed values. I have a PHP-generated form which may have a varying number of fields. I need to: 1. calculate the line total for each row -- unitprice * units = linetotal 2. calculate total of all linetotals. I have named my fields as follows: unitprice[1], unitprice[2]... , units[1], units[2], ... I have the following calculate function: Code: function calculateOld() { // get both values unitprice = document.forms["invoice"].unitprice.value; units = document.forms["invoice"].units.value; // do some calculation lineTotal = formatNumber((unitprice * units), 2); // set the value in the right field document.forms["invoice"].linetotal.value = lineTotal; unitprice2 = document.forms["invoice"].unitprice2.value; units2 = document.forms["invoice"].units2.value; if(unitprice2 != '') { // do some calculation lineTotal2 = formatNumber((unitprice2 * units2), 2); // set the value in the right field document.forms["invoice"].linetotal2.value = lineTotal2; document.forms["invoice"].totalprice.value = formatNumber((parseFloat(lineTotal) + parseFloat(lineTotal2)),2); } else { document.forms["invoice"].linetotal2.value = ''; document.forms["invoice"].totalprice.value = formatNumber(lineTotal,2); } } This does calculate what I need but only if I have up to two rows. I need to make the function dynamically count how many rows there are, and calculate the linetotal for each row. And here's where my limited JS knowledge brings me to a halt. I have been thinking about what this new and dynamic function should look like, but that's the best I could produce... Code: function calculate() { var unitprice[i] = document.forms["invoice"].unitprice[i].value; var units[i] = document.forms["invoice"].units[i].value; var linetotal[i] = formatNumber((unitprice[i] * units[i]), 2); return linetotal; } Your help will be appreciated. Please explain how things are done, don't just give me the code. Thanks in advance! I currently have a page which, when the user clicks a button creates a new row displaying a form. I also have other forms on this page however so I was wondering if anyone knew how to close a form using javascript? Thanks for any help. My code to create the table row and form are below... Code: myform = document.createElement("form"); myform.method = "post"; myform.action = "editdetails.php"; myform.id = "editemail"; myform.name = "editemail"; var a=document.getElementById('editdetailstable').insertRow(2); var b=document.getElementById('editdetailstable').insertRow(3); var x=a.insertCell(0); x.innerHTML="New Email: "; x.align = "right"; var y=a.insertCell(1); y.innerHTML="<input type='text' name='email' id='email' />"; var z=b.insertCell(0); z.innerHTML="<input type='button' value='Change' />" z.colSpan = "2"; z.align = "center"; I am wondering if there is a way to display feeds from multiple sources on my page using this tool. The feeds are at the following URL http://www.vanityasart.com/viastorm.com/news.html It loads the first feed fine and then stops loading the others. Any ideas? H Hi Everyone I'll explain the situation first: I need to build a website that allows students to select from a drop down list and then hit an 'Add button'. From there, that value will go to another part of the screen and display as bullets. Once that list is built, they can hit a final submit button that sends an email to someone with everything they selected. More Detail: LEFT SIDE OF SCREEN: [DROP DOWN LIST] <- this will have all the courses listed that we offer. Once once is selected. [ADD] <- add button that puts the values from the dropdown list to an array. RIGHT SIDE OF SCREEN: My Courses: * TEST1001 * TEST1002 This is being updated dynamically so that whenever the add button is hit, this lists grows. [SEND] <- Send button Thank you, I have the need to include an Ad Tag from a third party source that is generated via javascript which document.writes the code to display the ad. I have no control over this. I have it working on my end, BUT for the life of me I cannot get this to center in my div. It's like it busts out and aligns left after my div. I can't fathom what is going on. "IF" I include this ad tag directly in the page inside the div, it centers. But I need to dynamically pass it some data before it requests the ad, so I Have to dynamically create it, but this is the issue. It displays, just aligned left outside the target div. So, I am given a js tag with a src and that src generates a document.write that writes out an iframe. Here is my code below. I take the js src and replace some value in it since it is a string. Then I create a script element and then insert it into my div element on my page. var js_src = ("contents_of_the_src").gsub(/tie=/,'tie=' + random10_digit) var js_script = new Element('script',{'src': js_src}); Event.observe($('myDiv'), 'load', $('myDiv').insert({top : js_script})); so the view in question is something like this: <div id="myDiv"> <script language="text/javascript"> var js_src = ("contents_of_the_src").gsub(/tie=/,'tie=' + random10_digit) var js_script = new Element('script',{'src': js_src}); Event.observe($('myDiv'), 'load', $('myDiv').insert({top : js_script})); </script> </div> I've tried moving the js out of the div, afterwards, and try to insert then. I tried to create a new div, center that, and write the ad tag to it. All left alighned and outside of the div. Hi Friends, I need to select browser option dynamically using javascript for handling cookies , i.e., in need select checkbox "override automatic cookie handling" checkbox dynamically. Kindly help me friends how to select this checkbox dynamically. Tools - -> Internet Options --> Privacy (Tab) --> Advance (Button) --> Override automatic cookie handling . Thanks in Advance, Siva. My swf.js file is getting hacked along with some jquery files, they are injecting cross browser hacking script to .js files. Please help me how can I protect it? Hello all, I need my form to submit to two sources, zoho crm and broker office. One is used to create a contact list and the other is an insurance quote engine. Problem one. How can I use javascript to force my form to submit data to both sites? The bigger problem is they use different names for the same field. In other words one wants to recieve a vaule as first_name and the other wants it as firstName. Thanks in advance. |