We Keep Coding

Update QUERY_STRING without page reload

I currently have this code snippet in a CGI script:
document.onkeydown = function(e) {
switch (e.keyCode) {
case 37:
document.location = "?direction=West";
break;
case 38:
document.location = "?direction=North";
break;
case 39:
document.location = "?direction=East";
break;
case 40:
document.location = "?direction=South";
break;
}
};
That will update the QUERY_STRING and then reload the page.
Can this be done without constantly reloading after every key stroke?
JSON? jQuery?
I've tried fiddling with url.replace() and history.pushState().. no luck..

you can use window.history.pushState('page1', 'Title', 'page1?direction=West');
for this.
for more infomation adn help check link

I need this code with dynamicly

I have a header menu and i do not want to add for each menu link in switch case like this, how can i do it dynamic...
var sections = $(".href a");
var content = $("#load");
sections.click(function(){
switch(this.id){
case ('/p/settings/header-settings'):
$(content).load('/p/settings/header-settings #load');
window.history.pushState('user', 'user', '/p/settings/header-settings');
break;
case ('/p/settings/site-verifications'):
$(content).load('/p/settings/site-verifications #load');
window.history.pushState('user', 'user', '/p/settings/site-verifications');
break;
case ('/p/settings/analysis-settings'):
$(content).load('/p/settings/analysis-settings #load');
window.history.pushState('user', 'user', '/p/settings/header-settings');
break;
default:
$(content).load('/p #load' );
break;
}
});

Directly pass the id with respected place instead of switch .And do with on() for dynamically append element .Its will perform depend on your id
var sections = $(".href a");
var content = $("#load");
sections.on('click', function() {
var id = this.id;
if(condition) //add with some false condition as you wish for go to default statement s
{
$(content).load('/p #load' );
}else{
$(content).load(id + ' #load');
window.history.pushState('user', 'user', id);
}
});

Use this JS instead of your switch case. if you don't worry about default case
sections.click(function(){
$(content).load(this.id+' #load');
window.history.pushState('user', 'user', this.id);
});
If you want to take care of default condition too then you can use simplified switch case as shown below.
sections.click(function(){
switch(this.id){
case ('/p/settings/header-settings'):
case ('/p/settings/site-verifications'):
case ('/p/settings/analysis-settings'):
//For more case just add here the below code remain same
$(content).load(this.id+' #load');
window.history.pushState('user', 'user', this.id);
break;
default:
$(content).load('/p #load' );
break;
}
});

How to Handle events using button in samsung smart TV?

How to handle events while clicking button in samsung smart tv.if i design my form in scene means how i handle events please clear my doubt thanks in advance

In your index.html (main file) inside body tag define an a tag to make as 'anchor' for the key events:
Then in the Main.js file define the Main variable, a instance of TVKeyValue and Widget:
var widgetAPI = new Common.API.Widget();
var tvKey = new Common.API.TVKeyValue();
var Main =
{
};
Main.onLoad = function()
{
// Enable key event processing
this.enableKeys();
widgetAPI.sendReadyEvent();
};
Main.onUnload = function()
{
};
Main.enableKeys = function()
{
document.getElementById("anchor").focus();
};
Main.keyDown = function()
{
var keyCode = event.keyCode;
alert("Key pressed: " + keyCode);
switch(keyCode)
{
case tvKey.KEY_RETURN:
case tvKey.KEY_PANEL_RETURN:
alert("RETURN");
widgetAPI.sendReturnEvent();
break;
case tvKey.KEY_LEFT:
alert("LEFT");
break;
case tvKey.KEY_RIGHT:
alert("RIGHT");
break;
case tvKey.KEY_UP:
alert("UP");
break;
case tvKey.KEY_DOWN:
alert("DOWN");
break;
case tvKey.KEY_ENTER:
case tvKey.KEY_PANEL_ENTER:
alert("ENTER");
break;
default:
alert("Unhandled key");
break;
}
};
For more information consult this Tutorial (in Spanish): http://samsungstad.com/wiki/iniciando-con-smart-tv/programando-tu-primera-aplicacion-javascript/

Refresh page after clearing all form fields (jquery)

Is it possible to refresh the page after clearing all the form fields? Is this a separate function or could it be added to my existing script.
function clear_form_elements(ele) {
$(ele).find(':input').each(function() {
switch(this.type) {
case 'password':
case 'select-multiple':
case 'select-one':
case 'text':
case 'textarea':
$(this).val('');
$(this).removeAttr("style");
break;
case 'checkbox':
case 'radio':
this.checked = false;
}
});
}

I do not know whether this will work really.But you can do this way as well in jquery :
$('#PageRefresh').click(function() {
location.reload();
});
this is rather easy and straight forward.

Need help on change event on both input boxes

i need help on this one....i want to trigger the alert() e.g some code to execute after the change event on both input boxes....here is my code..
Millimeter: <input type="text" id="millimeter" class="filter"/>
Inch: <input type="text" id="inch" class="filter"/>
<script type="text/javascript">
$(document).ready(function(){
$(".filter").change(function(){
var value = this.value;
var id = this.id;
var convert = "";
switch(id)
{
case "millimeter":
convert = (value / 25.4).toFixed(2); //converts the value of input(mm) to inch;
$("#inch").val(convert).change();
break;
case "inch":
convert = (value * 25.4).toFixed(2); //converts the value of input(inch) to mm;
$("#millimeter").val(convert).change();
break;
default:
alert('no input has been changed');
}
alert(id+" triggered the change() event");
//some code here....
});
});
</script>
what i want is to trigger the alert() 2 twice...the result would be look like this..."Millimeter triggered the change() event"...and then when the other input box changes its value...."Inch triggered the change() event"....vice versa...i'm new to javascript and jquery...any help would be much appreciated..

The problem with your code is that in the change event of the first textbox you are triggering the change event of the second and thus entering in an endless loop. You should only use the following:
$("#inch").val(convert);
and:
$("#millimeter").val(convert);
in order to set the value of the other field but do not trigger change again.

Running your script on jsFiddle got me a "Maximum call stack size exceeded" error. This is because you're calling your .change() function inside of itself. I removed it, and it works fine.
Fiddle: http://jsfiddle.net/EwdLs/
$(".filter").change(function() {
var value = this.value;
var id = this.id;
var convert = "";
switch (id) {
case "millimeter":
convert = (value / 25.4).toFixed(2); //converts the value of input(mm) to inch;
$("#inch").val(convert);
break;
case "inch":
convert = (value * 25.4).toFixed(2); //converts the value of input(inch) to mm;
$("#millimeter").val(convert);
break;
default:
alert('no input has been changed');
}
alert(id + " triggered the change() event");
//some code here....
});

If you want each input's change to also trigger the other input's change, but don't want to get in an endless loop, try some variation on the following:
$(document).ready(function(){
function applyChange(el, changeOther) {
var value = el.value;
var id = el.id;
var convert,
other = "";
if (changeOther) {
switch(id) {
case "millimeter":
convert = (value / 25.4).toFixed(2);
other = "#inch";
break;
case "inch":
convert = (value * 25.4).toFixed(2);
other = "#millimeter";
break;
default:
alert('no input has been changed');
break;
}
if (other != "") {
$(other).val(convert);
applyChange($(other)[0], false);
}
}
alert(id+" triggered the change() event");
//some code here....
}
$(".filter").change(function(){
applyChange(this, true);
});
});
In case it's not obvious, I basically took your existing change handler and put it in a new function, applyChange, which has a parameter to tell it whether or not to recurse. The code as is is clunky, but it should give you the general idea of one way to do what you seem to be asking.
P.S. Be sure to add in some validation that what the user entered is really a number.