I need this code with dynamicly - javascript

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;
}
});

Related

Two Drop Down options with a button

I am trying to get this work.
I have 2 dropdown lists. Once the user select the required value and click the button. The button will load specific URL based on the selected options in both the dropdowns.
https://jsfiddle.net/vs3q879c/
<script>
$(document).ready(function() {
OR = document.getElementById("orientation");
SZ = document.getElementById("size");
ORSZ = OR + SZ;
switch (ORSZ) {
case PA5:
window.location.href = "www.xxxx.wwww/one.html";
break;
case PA4:
window.location.href = "www.xxxx.wwww/two.html";
break;
case PA3:
window.location.href = "www.xxxx.wwww/three.html";
break;
case LA5:
window.location.href = "www.xxxx.wwww/four.html";
break;
case LA4:
window.location.href = "www.xxxx.wwww/five.html";
break;
case LA3:
window.location.href = "www.xxxx.wwww/six.html";
break;
default:
default none();
}
</script>
You have a few mistakes. Instead of using window.location.href, try using window.open("www.my-url.com").
Also, you have 2 default statements in your switch clause, try something like this:
switch (ORSZ) {
case PA5:
window.location.href = "www.xxxx.wwww/one.html";
break;
case PA4:
window.location.href = "www.xxxx.wwww/two.html";
break;
case PA3:
window.location.href = "www.xxxx.wwww/three.html";
break;
case LA5:
window.location.href = "www.xxxx.wwww/four.html";
break;
case LA4:
window.location.href = "www.xxxx.wwww/five.html";
break;
case LA3:
window.location.href = "www.xxxx.wwww/six.html";
break;
default: none();
}
Lastly, when you're getting the select elements by ID, you're grabbing the object instead of the selected value. To fix that, you need to use .value:
OR = document.getElementById("orientation").value;
SZ = document.getElementById("size").value;
ORSZ = OR + SZ;
DEMO: http://jsbin.com/tivocodeza/edit?html,js,output
Yeah, the above - grab the value of the input, not the element.
You are also using jQuery in your fiddle $(document).ready();
if you are doing that, you can use jQuery for everything. Not sure you want that but in case you do, here is a code suggestion:
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
var ORSZ = $('#orientation').val() + $('size').val();
switch (ORSZ) {
case PA5:
window.open("www.xxxx.wwww/one.html", '_blank');
break;
//e
//t
//c
});
});
I added the id="submit" to your button to make it easier to select.

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/

Adding listeners to Dynamically Added Elements

I am trying to add multiple event listeners to elements that are being dynamically added to a page. I have attempted to use the on() function, as instructed in many posts but none of them seem to work for. When the page is clicked, a new should be added, with formatting determined by the correct CSS class. When a particular is focused, it should be movable using WASD and the jquery animate(). Here is what I have right now:
$(document).ready( function() {
var $index = 0;
$('div').on('keydown', 'div' , function(key) {
switch(parseInt(key.which,10)) {
case 87: //W
$(this).animate({top: '-=10px'}, 'fast');
break;
case 65: //A
$(this).animate({left: '-=10px'}, 'fast');
break;
case 83: //S
$(this).animate({top: '+=10px'}, 'fast');
break;
case 68: //D
$(this).animate({left: '+=10px'}, 'fast');
break;
default:
break;
}
});
$(document).click( function() {
// if(key.which == 13)
{
var $toadd = "<div class='";
switch($index % 4)
{
case 0:
$toadd += "red' tabindex='"+ ($index + 1) + "'></div>";
$index++;
break;
case 1:
$toadd += "green' tabindex='"+ ($index + 1) + "'></div>";
$index++;
break;
case 2:
$toadd += "blue' tabindex='"+ ($index + 1) + "'></div>";
$index++;
break;
case 3:
$toadd += "yellow' tabindex='"+ ($index + 1) + "'></div>";
$index++;
break;
default:
break;
}
$('body').append($toadd);
// $('body').on('click keydown','div', function() {
// $('body').append($toadd);
// });
}
});
});
Currently, the DIVs are added by clicking the page, but cant be moved using WASD. The s are focusable for the animate function to work. If I remove the dynamically adding by clicking and place a few static s, it works great.
Thanks for anything you can offer!
You need to use on() for event delegation in your case.
$(document).on('keydown', '.red, .green, .blue, .yellow' , function(key) //Instead of document use a container that exists in DOM at any given time to have the event delegated to these divs.
With this you attach the event to document head or any container that holds these divs and which inturn will be delegated to any of these divs present now or added for the future.

Determining the :input type in jQuery

I'm running an .each() loop on all my form elements. I cannot find a way to determine the input type (whether it's a checkbox, text, select, textarea etc...).
Any ideas?
// When submitting
$("input[name='event_form_submit']").click(function() {
$("form[name='tepg_form_processor'] :input").each(function() {
console.log($(this).attr("type"));
// Determine whether this is a select, input etc?
});
return false;
});
$("form[name='test'] :input").each(function() {
if(this.tagName == "INPUT") {
console.log(this.tagName + ": " + this.type);
}
else
console.log(this.tagName);
});
Fiddle: http://jsfiddle.net/samliew/YSsvp/8/
Available Input Element Types
I'd suggest:
$("form[name='test'] :input").each(function() {
/* gets the type of the element ('checkbox','text','radio', etc
if there's no 'type' then it retrieves the tagName of the
element instead 'select','textarea', etc */
var inputType = this.type || this.tagName.toLowerCase();
console.log(inputType);
/* then does uses a switch to do something depending
on what you want to do */
switch (inputType) {
case 'text':
// do something with text-inputs
break;
case 'radio':
// do something with radio-inputs
break;
case 'select':
// do something with select-elements
break;
// ...etc...
default:
// do something with other elements, element-types
break;
}
});
JS Fiddle demo.
Try this (jsfiddle):
$("form[name='test'] :input").each(function() {
alert(this.type);
});

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.

Categories