Hello I am very new to ExtJs please help me knowing Ext.get()
This works:
Ext.get('tag2').hide(); // worked well on with Id
<div id ="tag2">using id</div><!--given with id-->
Now this is the problem
Ext.get('tag2').hide()//hiding only id not class
<div class ="tag2">using class</div><!--given with class-->
Doesn't work on class.
Take a look the complete code:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('tag2').hide()//hiding only id not class
Ext.create('Ext.Button', {
renderTo: Ext.getElementById('helloWorldPanel'),
text: 'show',
listeners: {
click: function() {
this.hide();
},
hide: function() {
Ext.get('tag1').hide();
Ext.get('tag2').show();//not working hear
}
}
});
});
</script>
</head>
<body>
<div class ="tag1">Test Div</div>
<div class ="tag2">using class</div><!--given with class-->
<div id ="tag2">using id</div><!--given with id-->
<div id = 'helloWorldPanel' /> <!-- panel will be rendered here-- >
</body>
</html>
Use the following instead of get. Get accepts the id, for querying classes, you need to use select.
Ext.select('.tag2').hide();
UPDATED
Ext.get() is using ID to find element.
Ext.select(selector) - use this to access DOM element by class selector
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/classic/theme-neptune/resources/theme-neptune-all.css" rel="stylesheet" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/extjs/6.0.0/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var tag = Ext.get('tag');
var tagTwo = Ext.select('.tag2');
console.log(tag);
console.log(tagTwo);
tag.hide(); // hide by ID
tagTwo.hide(); // hide all divs with tag2 class value
});
</script>
</head>
<body>
<div id="tag">Test Div</div>
<div class="tag2">Test Div2</div>
<div class="tag2">Test Div3</div>
</body>
</html>
Related
With the use of Javascript I want to display different HTML content based on the value of a class of an HTML element which is existing on the page. eg:
<body class="de">
display:
<div id="de">some html</div>
If the body element has another class value, eg class="en" it should display
<div id="en">some other html</div>
I have already played around with hasClass function and an if statement. But it did not work for me.
What about ?
<body class="en">
<script>
if($('body').hasClass('de')) {
$('body').html('<div id="de">some html</div>');
}
else if($('body').hasClass('en')) {
$('body').html('<div id="en">some other html</div>');
}
else if($('body').hasClass('es')) {
$('body').html('<div id="es">another html</div>');
}
else {
...
}
</script>
Dynamic :
var bodyClass = $('body').attr("class");
var bodyValue = $('#' + bodyClass).html();
$('body').html(bodyValue);
But you should verify that body has a class and that an element with an identical id exist in your document.
The solution I am working with:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body class="lang-de some other">
<h1>Überschrift 1</h1>
<div id="lang"></div>
<script>
var bodyClass = $('body').attr("class").substr(0,7);
var bodyValue = $('#' + bodyClass).html();
$('body').html(bodyValue);
if($('body').hasClass('lang-de')) {
document.getElementById("lang"); {
$('#lang').html('<div id="de">some html</div>');}
}
else if ($('body').hasClass('lang-en')) {
document.getElementById("lang"); {
$('#lang').html('<div id="en">some other html</div>');}
}
</script>
</body>
</html>
With jQuery :
$('.de').html('<div id="de">some html</div>');
If you have different tags to fulfil with different html content use a generic class + a specific one (eg : class="dynamic de") and loop all elements with "dynamic" class and use hasClass in a if/elseif (or better a switch/case) to target them separatly.
Btw, AngularJs has "directives" that handle perfectly that kind of need ;)
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body class="lang-de some other">
<h1>Überschrift 1</h1>
<div id="lang-de"></div>
<div id="lang-en"></div>
<script>
var bodyClass = $('body').attr("class").substr(0,7);
$('div#lang-*').hide();
$('#' + bodyClass).show();
</script>
</body>
</html>
What about?
<html>
<head>
<style>
body.lang-en #en{display:block;}
body.lang-de #de{display:block;}
</style>
</head>
<body class="lang-en">
<div id="en" hidden>some text</div>
<div id="de" hidden>some other text</div>
<hr>
<button onclick="toggle()"></button>
</body>
<script>
function toggle(){
var lang=['lang-en','lang-de'];
var i=lang.indexOf(document.body.className);
document.body.className=(i+1 == lang.length ? 0 :i+1);
}
</script>
</html>
OR
with jQuery
$('#en,#de,#jp').hide();
$('#'+$('body').attr('class').replace('lang-','')).show();
http://jsbin.com/OYodAvo/1/edit
Today I was wondering if there's a way to grab a div's class that's already been clicked and mirror the class name to a textbox and set it as the value.
If another div has been clicked, replace it with that one.
Is there anyway to do this in JQuery?
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Grab Element's DIV</title>
<meta charset='utf-8'>
<meta name='viewport' content='initial-scale=1.0'>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.min.js'></script>
</head>
<body>
<div class="container">
<center>
<p>
Grab DIV Class Onclick: <input type="text" id="divclass" placeholder="show class name here" />
</p>
<div class="wrapper">
<div class="im-red"></div>
<div class="blue-foo"></div>
<div class="green-beans"></div>
</div>
</center>
</div>
</body>
</html>
JavaScript:
$(function() {
$(".wrapper div").click(function() {
});
});
I think you are looking for:
$(function() {
$(".wrapper div").click(function() {
$("#divclass").val($(this).attr('class'));
});
});
Live Demo
I'd suggest:
$('.wrapper div').click(function(){
$('#divclass').val(this.className);
});
JS Fiddle demo.
References:
val().
I have created a html webpage here:
http://diagrams.inse1d.info/wbt.html
Code:
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div id="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" id="wbtTitle" /></h1>
<div id="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" id="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
Here is the jQuery code I wrote:
$(document).ready(function() {
$("h1").keypress(function(e) {
//get
wbtTitle = $('#wbtTitle').val();
// Write text after enter
if (e.which == 13) {
$("h1").text(wbtTitle);
}
});
$("span").keypress(function(e) {
//get
wbtNote = $('#wbtNote').val();
// Write note after enter
if (e.which == 13) {
$("span").text(wbtNote);
}
});
//Insert new WBT on button click
$("button").each(function() {
$(this).click(function() {
var wbtSet = $( "article" ).html();
$(wbtSet).insertAfter('section');
});
});
});
What I want to do is set the title and some note text using input boxes which works using jQuery. I then want to add a copy of the html into another article when the button is pressed without copying the inputs previously made with the possibility of setting new values when the article is cloned. The process should repeat over and over again.
Here is an image to help explain:
I am quite new to jQuery, I think you need to use a loop to fix this, I read that a .each() can be used http://api.jquery.com/jQuery.each/ but not quite sure.
Any help will be appreciated. Thanks.
I think I got your answer.
I changed the html a bit, because you duplicated some id's with your approach, that's not good. id's have to be unique on a page. I simply changed them to classes.
<!DOCTYPE html>
<html>
<head>
<title>WBT Charts</title>
<link rel="stylesheet" type="text/css" href="wbt.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="wbt.js"></script>
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,700' rel='stylesheet' type='text/css'>
</head>
<body>
<section>
<article>
<div class="wbtBlock">
<p>Press enter to save amendments</p>
<h1>Title of wbt:<input type="text" class="wbtTitle" /></h1>
<div class="graph">
<p>Graph to go here</p>
</div>
<p><strong>Notes: </strong></p>
<p><span><input type="textarea" class="wbtNote" /></span></p>
</div>
</article>
</section>
<button>Add New WBT Chart</button>
</body>
And of course the jQuery. I got rid of your first two functions because they had no purpose in this context.
$(document).ready(function() {
//Insert new WBT on button click
$("button").on('click', function() {
var title = $(this).prev().find('.wbtTitle').val();
var note = $(this).prev().find('.wbtNote').val();
var wbtSet = $(this).prev("section").html();
$(this).prev().find('.wbtTitle').replaceWith(title);
$(this).prev().find('.wbtNote').replaceWith(note);
$(this).prev("section").after('<section>' + wbtSet + '</section>');
});
});
Here is a working fiddel
Fixing the answer given by hitokun_s
window.onload = function() {
// Save a copy of the element wbtSet element on pageload
var wbtSet = $("article").clone();
$("button").each(function() {
$(this).click(function() {
// Append a new one to the holder of the wbSets
$(wbtSet).appendTo($('section'));
});
});
}
I think this is what you want to do.
window.onload = function() {
$("button").each(function() {
$(this).click(function() {
var wbtSet = $("article:first-child").clone();
wbtSet.find("input").val("");
$(wbtSet).appendTo($('section'));
});
});
}
Kindly notify me I am explaining it well or not. I'm using .append() to repeat a div inside a page.
HTML
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append("<div class='Box'>I'm new box by prepend</div>");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<button id="num">Click Me</button>
/body>
</html>
This works good when I add a div repeatedly. But I like to call it externally like the below code.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append($('#Box'));
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
/body>
</html>
Why is this not working?
Try using clone():
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$(".Box:first").clone().appendTo("#form");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
</body>
</html>
You have to create a new element before adding it.
Demo
try this
$(document).ready(function(){
$("#num").click(function () {
$(".Box").first().clone().appendTo("#form");
});
});
Try something like this:-
$("#parent_div").append('<div id="created_div"></div>');
First off here is the code!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="content/wmd.css" rel="stylesheet" type="text/css" />
<title>some title </title>
</head>
<body>
<div class="main">
<form>
<h2>Only teaxt area</h2>
<div id="wmd-editor-uno" class="wmd-panel">
<div id="wmd-button-bar-uno" class='wmd-button-bar'></div>
<textarea name='id-uno' id='id-uno'></textarea>
</div>
</form>
</div>
<script type='text/javascript' src="Scripts/mootools-yui-compressed.js"></script>
<script type='text/javascript' src="Scripts/moowmd.js"></script>
<script type="text/javascript">
var MyConfig = [
{
input: 'id-uno',
postfix: '-uno'
}];
window.addEvent('domready', function() {
window.MyMooWMD = new mooWMD.WMD(window.MyConfig);
window.MyMooWMD.start();
});
</script>
</body>
</html>
Bam!
My problem is this, it doesn't work like the example at mooWMD tutorial all I get is an empty text area with the wmd.css style applied to it. I cant figure out what I could be doing wrong. All the file locations are correct but i get 'mooWMD' is undefined. I am at a loss any and all suggestions are appreciated.
The problem (for later generations) is IE does not accepts the following syntax:
{
att1: 'value',
att2: 'value'
}
Where other browsers do.
I changed it to
{
'att1': 'value',
'att2': 'value'
}
And it is fine now.
(using the mailing list would have gotten my attention earlier)
The code in the local javascript tag executes as soon as the tag is processed. This may happen before moowmd.js has completed loading.
Wrap the code in a function:
<script type="text/javascript">
function loaded() {
var MyConfig = [
{
input: 'id-uno',
postfix: '-uno'
}];
window.addEvent('domready', function() {
window.MyMooWMD = new mooWMD.WMD(window.MyConfig);
window.MyMooWMD.start();
});}
</script>
Then add an onload handler to your body tag:
<body onload="loaded();">
The onload handler will not fire until all the javascript, images, css, etc have loaded.
<head>
<title>some title </title>
<link rel="stylesheet" type="text/css" href="Content/wmd.css" />
<script type="text/javascript" src="Scripts/showdown.js"></script>
</head>
<body>
<div class="main">
<div id="wmd-editor" class="wmd-panel">
<div id="wmd-button-bar">
</div>
<textarea id="wmd-input"></textarea>
</div>
<div id="wmd-preview" class="wmd-panel">
</div>
<div id="wmd-output" class="wmd-panel">
</div>
</div>
<script type="text/javascript" src="Scripts/wmd.js"></script>
</body>
The root of the problem ended up being the moowmd editor just didn't work consistently in IE. The reason I was tiring to go with the moowmd was I liked how he handled setting up multiple editors. I ended up just switching to stackoverflow's branch of wmd it is working well so far.