Helpful Information
 
 
Category: Jquery
Jquery --> JavaScript

Hy guys :D First time here and i'm loving it :D Soo big soo many users :D Well i think that i will get this thing fix ... Soo I did a BHO ( Browser Help Object ) in C# to edit one website but they have taken the Jquery Lib soo just work the Javascript ... Can some one help me "translate" this to Javascript ( believe it hurts me too )


$('<input type=" + "text" + " id=" + "PartNumberTextBox" + ">').appendTo('body');
$('#PartNumberTextBox').css('position','absolute');
$('#PartNumberTextBox').css('right','6');
$('#PartNumberTextBox').css('top','435');
$('#PartNumberTextBox').css("+"width"+", "+"+=280"+");
$('#PartNumberTextBox').css('background-color', '#000494');
$('body').keyup(function(e) {
var box1 = $('#TextboxNova');
var box2 = $('#so_id');
var box3 = $('#new_sn');
var code = e.keyCode || e.which;
if (code == '9') {
var button = $('#book_button');
if (event.srcElement.id === box3.attr('id'))
box2.focus();
else
if (event.srcElement.id === box2.attr('id'))
button.focus();
else
box1.focus();
}
});
$('#TextboxNova').live("change blur keyup mouseup", function () {
if ($('#new_part_no').val() === $('#TextboxNova').val() && $('#TextboxNova').val().length > 0){
$('#TextboxNova').css('background-color', '#0f0');
$("#new_sn").focus();
}
else
$('#TextboxNova').css('background-color', '#f00');
});

I forgot to explain that this code will be Injected on the website ( using BHO ) ...

Couldnít you inject jQuery itself, too, then? Like:


/*! jQuery v1.10.1 | (c) 2005, 2013 jQuery Foundation, Inc. | jquery.org/license
//@ sourceMappingURL=jquery-1.10.1.min.map
*/
(function(e,t){var n,r,i=typeof t,o=e.location,a=e.document,s=a.documentElement,l=e.jQuery,u=e.$,c={},p=[],f="1.10.1", Ö})(window);
// jQuery library code shortened for demonstration

$('<input type=" + "text" + " id=" + "PartNumberTextBox" + ">').appendTo('body');
$('#PartNumberTextBox').css('position','absolute');
$('#PartNumberTextBox').css('right','6');
$('#PartNumberTextBox').css('top','435');
$('#PartNumberTextBox').css("+"width"+", "+"+=280"+");
$('#PartNumberTextBox').css('background-color', '#000494');
$('body').keyup(function(e) {
var box1 = $('#TextboxNova');
var box2 = $('#so_id');
var box3 = $('#new_sn');
var code = e.keyCode || e.which;
if (code == '9') {
var button = $('#book_button');
if (event.srcElement.id === box3.attr('id'))
box2.focus();
else
if (event.srcElement.id === box2.attr('id'))
button.focus();
else
box1.focus();
}
});
$('#TextboxNova').live("change blur keyup mouseup", function () {
if ($('#new_part_no').val() === $('#TextboxNova').val() && $('#TextboxNova').val().length > 0){
$('#TextboxNova').css('background-color', '#0f0');
$("#new_sn").focus();
}
else
$('#TextboxNova').css('background-color', '#f00');
});

in one file.

Jquery is JavaScript - you just need the JQuery library to define the functions (which it does using JavaScript).

I will take a stab at it.

But no guarantees, at all.


(
function()
{
var inp = document.createElement('input');
inp.id = 'PartNumberTextBox';
inp.style.position = 'absolute';
inp.style.right = '6px';
inp.style.top = '435px';
inp.style.width = '280px'; // ?? guessing ?? original was WEIRD coding
inp.style.backgroundColor = '#000494';
document.body.appendChild( inp );

var nova = document.getElementById('TextboxNova');
var so = document.getElementById('so_id');
var newsn = document.getElementById('new_sn');
var button = document.getElementById('book_button');
var newpart = document.getElementById('new_part_no');
document.body.onkeyup = function(e)
{
if ( e == null ) e = window.event;
var code = e.keyCode || e.which;
if (code == '9')
{
if ( e.srcElement == newsn )
{
so.focus();
} else if ( e.srcElement == so ) {
button.focus( );
} else {
nova.focus();
}
}
}

nova.onchange = novafunc;
nova.onblur = novafunc;
nova.onkeyup = novafunc;
nova.onmouseup = novafunc;
function novafunc( )
{
if ( newpart.value === nova.value && nova.value.length > 0 )
{
nova.style.backgroundColor = '#0f0';
newsn.focus();
} else {
nova.style.backgroundColor = '#f00';
}
}

}
)();

First of all THANK YOU FOR ALL THAT ALL YOU GUYS MADE FOR ME :D



I will take a stab at it.

But no guarantees, at all.


(
function()
{
var inp = document.createElement('input');
inp.id = 'PartNumberTextBox';
inp.style.position = 'absolute';
inp.style.right = '6px';
inp.style.top = '435px';
inp.style.width = '280px'; // ?? guessing ?? original was WEIRD coding
inp.style.backgroundColor = '#000494';
document.body.appendChild( inp );

var nova = document.getElementById('TextboxNova');
var so = document.getElementById('so_id');
var newsn = document.getElementById('new_sn');
var button = document.getElementById('book_button');
var newpart = document.getElementById('new_part_no');
document.body.onkeyup = function(e)
{
if ( e == null ) e = window.event;
var code = e.keyCode || e.which;
if (code == '9')
{
if ( e.srcElement == newsn )
{
so.focus();
} else if ( e.srcElement == so ) {
button.focus( );
} else {
nova.focus();
}
}
}

nova.onchange = novafunc;
nova.onblur = novafunc;
nova.onkeyup = novafunc;
nova.onmouseup = novafunc;
function novafunc( )
{
if ( newpart.value === nova.value && nova.value.length > 0 )
{
nova.style.backgroundColor = '#0f0';
newsn.focus();
} else {
nova.style.backgroundColor = '#f00';
}
}

}
)();


Thanks Old Pedant for this GIANT help ... i don't know too mutch about javascript but isn't there syntax errors ? i made some adventures and try to fix your code ... can you please see the diferences and if it's all okay ?


(

function () {
var inp = document.createElement('input');
inp.id = 'PartNumberTextBox';
inp.style.position = 'absolute';
inp.style.right = '6px';
inp.style.top = '100px';
inp.style.width = '280px';
inp.style.backgroundColor = '#000494';
document.body.appendChild(inp);
var nova = document.getElementById('PartNumberTextBox');
var so = document.getElementById('so_id');
var newsn = document.getElementById('new_sn');
var button = document.getElementById('book_button');
var newpart = document.getElementById('new_part_no');
document.body.onkeyup = function (e) {
if (e === null) e = window.event;
var code = e.keyCode || e.which;
if (code == '9') {
if (e.srcElement == newsn) {
so.focus();
} else if (e.srcElement == so) {
button.focus();
} else {
nova.focus();
}
}
};

nova.onchange = novafunc;
nova.onblur = novafunc;
nova.onkeyup = novafunc;
nova.onmouseup = novafunc;

function novafunc() {
if (newpart.value === nova.value && nova.value.length > 0) {
nova.style.backgroundColor = '#0f0';
newsn.focus();
} else {
nova.style.backgroundColor = '#f00';
}
}

})();

JSHint Report

/*jshint forin:true, noarg:true, noempty:true, eqeqeq:true, bitwise:true, strict:true, undef:true, unused:true, curly:true, browser:true, indent:4, maxerr:50 */

Errors:

Line 4: var inp = document.createElement('input');

Missing "use strict" statement.

Line 18: if (e === null) e = window.event;

Expected '{' and instead saw 'e'.

Line 20: if (code == '9') {

Expected '===' and instead saw '=='.

Line 21: if (e.srcElement == newsn) {

Expected '===' and instead saw '=='.

Line 23: } else if (e.srcElement == so) {

Expected '===' and instead saw '=='.

Feel like some warnings are incorrect? You can configure JSHint to turn off some warnings. Read more in the documentation.


Jshint it's giving me this errors ...

Sorry double post guys but i don't know why is this happening ..

ok let's go :



function () {
"use strict";
var inp = document.createElement('input');
inp.id = 'PartNumberTextBox';
inp.style.position = 'absolute';
inp.style.right = '6px';
inp.style.top = '435px';
inp.style.width = '280px';
inp.style.backgroundColor = '#000494';
document.body.appendChild(inp);
var nova = document.getElementById('PartNumberTextBox');
var so = document.getElementById('so_id');
var newsn = document.getElementById('new_sn');
var button = document.getElementById('book_button');
var newpart = document.getElementById('new_part_no');
document.body.onkeyup = function (e) {
if (e === null) {
e = window.event;
var code = e.keyCode || e.which;
if (code === '9') {
if (e.srcElement === newsn) {
so.focus();
} else if (e.srcElement === so) {
button.focus();
} else {
nova.focus();
}
}
}
};

nova.onchange = novafunc;
nova.onblur = novafunc;
nova.onkeyup = novafunc;
nova.onmouseup = novafunc;

function novafunc() {
if (newpart.value === nova.value && nova.value.length > 0) {
nova.style.backgroundColor = '#0f0';
newsn.focus();
} else {
nova.style.backgroundColor = '#f00';
}
}

})();

With this code there is no error in Jshint (http://www.jshint.com/) but this is what's happening :

http://s22.postimg.org/iwg79zj5t/Sem_T_tulo.png

Why is out of the frame ? The textbox isn't appearing on the website

Why is out of the frame ?


Because you tell it to be: document.body.appendChild(inp);
You need to append it to the desired frame, not to the frameset. Also, an ID must be unique in a document, you can’t have multiple elements with the same ID.



The textbox isn't appearing on the website

Most likely because a frameset element can’t have anything else but frame elements as children.
Using a frameset is a bad idea anyway.

Because you tell it to be: document.body.appendChild(inp);
You need to append it to the desired frame, not to the frameset. Also, an ID must be unique in a document, you canít have multiple elements with the same ID.


Most likely because a frameset element canít have anything else but frame elements as children.
Using a frameset is a bad idea anyway.

Soo it would be like this ?

document.frmMain.appendChild(inp);

Because you tell it to be: document.body.appendChild(inp);
You need to append it to the desired frame, not to the frameset. Also, an ID must be unique in a document, you canít have multiple elements with the same ID.


The problem is that i'm just doing one time ... he adds 3 ...




Most likely because a frameset element canít have anything else but frame elements as children.
Using a frameset is a bad idea anyway.


frames.childName.window.eval.call(frames.child_name.window, myCode);

Jshint it's giving me this errors ...
None of those "errors" are important.

You could fix all of them, but they won't change how the code works.

I have no idea why you get multiple <input>s added when you only invoke the code one time.

Here's a question that may not lead to anything... how do you invoke that code?

He showed that:

frames.childName.window.eval.call(frames.child_name.window, myCode);

which is pretty ugly, but might actually work.

Why use the latest JavaScript with "use strict" and HTML that was superceded back in 1997 wen HTML 4 replaced <frame> with <object>

In fact guys i'm not putting by that method ... i'm injecting the code with C# like this :


public void OnDocumentComplete(object pDisp, ref object URL)
{
HTMLDocument document = (HTMLDocument)webBrowser.Document;
IHTMLElement head = (IHTMLElement)((IHTMLElementCollection)
document.all.tags("head")).item(null, 0);
IHTMLScriptElement scriptObject = (IHTMLScriptElement)document.createElement("script");
scriptObject.type = @"text/javascript";
scriptObject.text = @"(

function lucas() {
var inp = document.createElement('input');
inp.id = 'PartNumberTextBox';
inp.style.position = 'absolute';
inp.style.right = '6px';
inp.style.top = '435px';
inp.style.width = '280px';
inp.style.backgroundColor = '#000494';
document.body.appendChild(inp);
var nova = document.getElementById('PartNumberTextBox');
var so = document.getElementById('so_id');
var newsn = document.getElementById('new_sn');
var button = document.getElementById('book_button');
var newpart = document.getElementById('new_part_no');
document.body.onkeyup = function (e) {
if (e === null) {
e = window.event;
var code = e.keyCode || e.which;
if (code === '9') {
if (e.srcElement === newsn) {
so.focus();
} else if (e.srcElement === so) {
button.focus();
} else {
nova.focus();
}
}
}
};

nova.onchange = novafunc;
nova.onblur = novafunc;
nova.onkeyup = novafunc;
nova.onmouseup = novafunc;

function novafunc() {
if (newpart.value === nova.value && nova.value.length > 0) {
nova.style.backgroundColor = '#0f0';
newsn.focus();
} else {
nova.style.backgroundColor = '#f00';
}
}

});
lucas()";
((HTMLHeadElement)head).appendChild((IHTMLDOMNode)scriptObject);
}

I'm adding the script in the head ...

Well no wonder!

When you put that code in the <head>, *NONE* of those elements that you are trying to get using document.getElementById() *EXIST* yet!!!

On top of that, you misunderstand the point of the

(
function lucas() { }
)();

outermost parentheses in that coding form. The first pair of parentheses *encapsulate* the function within them. The second pair then *INVOKE* the encapsulated function *IMMEDIATLY*. Your external call to lucas( ) is a waste of time and code; the call to that function has already been performed by the last ();

But in any case, this will never work, as given, if you inject it into the <head>, as is.

You have two choices: The better choice is to stop using C# code to inject the JavaScript. Instead, simply put it into your page *JUST BEFORE* the </body> tag. You can either simply drop it inline into your ".aspx" page or you can put it in separate ".js" file and then drop a reference to it (e.g., <script type="text/javscript" src="lucas.js"></script>) just before the </body>.

The not-as-good choice is to lose the parentheses shown in red and magenta above, completely.

And then, in place of your direct call to lucas( ), use window.onload = lucas;
That way, your function will not be called until the page is completely loaded and so all the elements you are using the ID's of will then exist.

CAUTION: If you have other JavaScript on the page, it might already be using window.onload and so you may then cause it to not work or perhaps it will override your use on onload. If that's the case, you will have to attach your lucas function as an event handler to the load, instead.

Well no wonder!

When you put that code in the <head>, *NONE* of those elements that you are trying to get using document.getElementById() *EXIST* yet!!!

On top of that, you misunderstand the point of the

(
function lucas() { }
)();

outermost parentheses in that coding form. The first pair of parentheses *encapsulate* the function within them. The second pair then *INVOKE* the encapsulated function *IMMEDIATLY*. Your external call to lucas( ) is a waste of time and code; the call to that function has already been performed by the last ();

But in any case, this will never work, as given, if you inject it into the <head>, as is.

You have two choices: The better choice is to stop using C# code to inject the JavaScript. Instead, simply put it into your page *JUST BEFORE* the </body> tag. You can either simply drop it inline into your ".aspx" page or you can put it in separate ".js" file and then drop a reference to it (e.g., <script type="text/javscript" src="lucas.js"></script>) just before the </body>.

The not-as-good choice is to lose the parentheses shown in red and magenta above, completely.

And then, in place of your direct call to lucas( ), use window.onload = lucas;
That way, your function will not be called until the page is completely loaded and so all the elements you are using the ID's of will then exist.

CAUTION: If you have other JavaScript on the page, it might already be using window.onload and so you may then cause it to not work or perhaps it will override your use on onload. If that's the case, you will have to attach your lucas function as an event handler to the load, instead.

The problem is that i need to use c# because it's a BHO ... i think that the problem is because of the whole website is made by frames ...Soo Javascripts will not work with frames ??? In other pages it's working ( like google , yhaoo ,etc ) but with websites with frames it doesn't work

Old Pedant , i can't do that because i don't have direct acess to the code of the page ... i have done what you said

Old Pedant , this isn't working on jsfindle

http://jsfiddle.net/ENfSu/

OF COURSE it does NOT WORK!

Your <input> fields are


<input id="newsn" .../>
<input id="newpart" .../>

Your code does:


var newsn = document.getElementById('new_sn');
var newpart = document.getElementById('new_part_no');

Your code then of course finds NO MATCHES for the ID's it is looking for!!

This works:


<!DOCTYPE html>
<html>
<body>

<input id="PartNumberTextBox" style="position: absolute; background-color: yellow; width: 280px; top: 435px; right: 6px;"/>
<input id="newsn" style="position: absolute;width: 280px; top: 300px; right: 6px; background-color: pink;"/>
<input id="newpart" style="position: absolute; width: 280px; top: 200px; right: 6px; background-color: lightblue;" value="xyz" />


<script type="text/javascript">
var nova = document.getElementById('PartNumberTextBox');
var newsn = document.getElementById('newsn');
var newpart = document.getElementById('newpart');
nova.onchange = novafunc;
nova.onblur = novafunc;
nova.onkeyup = novafunc;
nova.onmouseup = novafunc;

function novafunc() {
if (newpart.value === nova.value && nova.value.length > 0) {
nova.style.backgroundColor = '#0f0';
newsn.focus();
} else {
nova.style.backgroundColor = '#f00';
}
}
</script>
</body>
</html>

Notice that the value= for the "newpart" is "xyz".

Type "xyz" into the bottom text field (your "PartNumberTextBox") and watch its background color go red on the "x", stay red on the "y" but turn green on the "z".

This works:


<!DOCTYPE html>
<html>
<body>

<input id="PartNumberTextBox" style="position: absolute; background-color: yellow; width: 280px; top: 435px; right: 6px;"/>
<input id="newsn" style="position: absolute;width: 280px; top: 300px; right: 6px; background-color: pink;"/>
<input id="newpart" style="position: absolute; width: 280px; top: 200px; right: 6px; background-color: lightblue;" value="xyz" />


<script type="text/javascript">
var nova = document.getElementById('PartNumberTextBox');
var newsn = document.getElementById('newsn');
var newpart = document.getElementById('newpart');
nova.onchange = novafunc;
nova.onblur = novafunc;
nova.onkeyup = novafunc;
nova.onmouseup = novafunc;

function novafunc() {
if (newpart.value === nova.value && nova.value.length > 0) {
nova.style.backgroundColor = '#0f0';
newsn.focus();
} else {
nova.style.backgroundColor = '#f00';
}
}
</script>
</body>
</html>

Notice that the value= for the "newpart" is "xyz".

Type "xyz" into the bottom text field (your "PartNumberTextBox") and watch its background color go red on the "x", stay red on the "y" but turn green on the "z".

You are awesome :D Thanks

Old Pedant ... How can i add html code to a frame using Javascript ?

Are the contents of the frame from the same server as the page that will be doing this?

(And do you mean <frame> or <iframe>?)

Are the contents of the frame from the same server as the page that will be doing this?

(And do you mean <frame> or <iframe>?)

When i mean frame is really frame... this are the only tags on the webpage:


<html><head><title><form><frameset id ="fs" ><frame id=frmMenu><frame id="frmMain"><noframes/>


Yes the content are from the same page


<frame name="frmMenu" id="frmMenu" src="Menu.do?ap=eRepair&mo=WEB+REPAIR&fu=3rdParty+KP+Exchange" frameBorder="0" marginWidth="0" marginHeight="0" noResize="" scrolling="no">


<frame name="frmMain" id="frmMain" src="../../rmaweb/repair/rm3rdPartyKpExchangeAction.do" frameBorder="0" marginWidth="0" marginHeight="0" scrolling="auto">

Sorry no <form> ...

So from the <frameset> page, just use


var framedoc = document.getElementById("frmMenu").document;
// and then you can do things such as
var div = framedoc.getElementById("someID");

From inside the "frmMain" page:


var framedoc = window.parent.document.getElementById("frmMenu").document;
// and then you can do things such as
var div = framedoc.getElementById("someID");

I hope you know that <frame>s are considered obsolescent at best, obsolete by many.

So from the <frameset> page, just use


var framedoc = document.getElementById("frmMenu").document;
// and then you can do things such as
var div = framedoc.getElementById("someID");

From inside the "frmMain" page:


var framedoc = window.parent.document.getElementById("frmMain").document;
// and then you can do things such as
var div = framedoc.getElementById("someID");

I hope you know that <frame>s are considered obsolescent at best, obsolete by many.


Soo .. to add Textbox on the frame frmMain is :


var framedoc = window.parent.document.getElementById("frmMain").document;
var body = framedoc.getElementById("body");
var inp = body.createElement('input');
inp.style.position = 'absolute';
inp.style.right = '6px';
inp.style.top = '435px';
inp.style.width = '280px';
inp.style.backgroundColor = '#000494';
body.appendChild(inp);
Updta: Didn't work :/ I'm starting to getting worry..


<TITLE>Repair</TITLE>
<FORM method=post name=MainForm action=/pf/Main.do><INPUT name=target type=hidden><INPUT name=tarids type=hidden><INPUT name=menuid type=hidden><INPUT name=pfsel type=hidden><INPUT name=cu type=hidden><INPUT name=ca type=hidden><INPUT name=ap value=eRepair type=hidden><INPUT name=mo value="WEB REPAIR" type=hidden><INPUT name=fu value="3rdParty KP Exchange" type=hidden></FORM>
<SCRIPT type=text/javascript>var framedoc = window.parent.document.getElementById("frmMain").document;
var body = framedoc.getElementById("body");
var inp = body.createElement('input');
inp.style.position = 'absolute';
inp.style.right = '6px';
inp.style.top = '435px';
inp.style.width = '280px';
inp.style.backgroundColor = '#000494';
body.appendChild(inp);
</SCRIPT>
<FRAMESET id=fs frameSpacing=0 border=0 cols=* frameBorder=NO rows=82,*><FRAME id=frmMenu noResize marginHeight=0 src="Menu.do?ap=eRepair&amp;mo=WEB+REPAIR&amp;fu=3rdParty+KP+Exchange" frameBorder=0 name=frmMenu marginWidth=0 scrolling=no><FRAME id=frmMain marginHeight=0 src="../../rmaweb/repair/rm3rdPartyKpExchangeAction.do" frameBorder=0 name=frmMain marginWidth=0><NOFRAMES></NOFRAMES></FRAMESET>