Now i done the ADD /Remove Elements
How to add/remove elements dynamically, pease find the image attachment, which shows the better understand,
category which populate records from database category table, and when user select the particular category than sub category will populate from datbase sub category table,
am looking one jquery or some open which do this same work,
refer some good plugins,
How to add the element when i click the ADD Elment, please chekc my code below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
var hdn_add_element_cnt = $("#hdn_add_element_cnt").val();
hdn_add_element_cnt = parseInt(hdn_add_element_cnt);
var app_str = "<div id=element_"+hdn_add_element_cnt+">New Element "+hdn_add_element_cnt+" Delete</div>";
$('#element_area').append(app_str);
$("#add_element").click(function(){
var hdn_add_element_cnt = $("#hdn_add_element_cnt").val();
hdn_add_element_cnt = parseInt(hdn_add_element_cnt);
hdn_add_element_cnt = hdn_add_element_cnt+1;
var app_str = "<div id=element_"+hdn_add_element_cnt+">New Element "+hdn_add_element_cnt+" Delete</div>";
$('#element_area').fadeIn(10000).append(app_str);
//Increment Elemenet ID Count +1
document.getElementById("hdn_add_element_cnt").value = hdn_add_element_cnt;
})
})
function delete_element(element_id_no){
var get_element_hidden_cnt = $("#hdn_add_element_cnt").val();
$("#element_"+element_id_no).fadeOut(100).remove();
}
</script>
</head>
<body>
<div style="width:500px; height:200px; background-color:#FF0000;">
<div id="add_element" style="width:400px; height:75px;">
ADD Element
</div>
<div id="element_area">
</div>
</div>
<input type="hidden" id="hdn_add_element_cnt" value="1" />
</body>
</html>
jQuery doesn't need plugins to do this. Standard functions work well:
.append() adds elements, so to add a <div> to the <body>, just do this:
$('body').append('<div id="foobar">This is my text</div>');
.remove() similarly removes elements, so to remove that <div> that you added, just do this:
$('#foobar').remove();
.html() and .text() can be used to set the contents of an element. .text() is usually for setting the displayed text, and .html() is for adding content elements:
$('#foobar').text('Hello');
$('#foobar').html('<h1 class="foo">Hello</h1>');
Your question is really vague, so I'm not sure what else to say.
Related
I seem to have a very specific problem where something is missing and I just can't see it.
From and index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript" src="./js/a1.js"></script>
<script language="javascript" type="text/javascript" src="./js/a2.js"></script>
<style>
</style>
</head>
<body onLoad="javascript:Scan()">
<div id = "TheDiv">?
</div>
</body>
</html>
From onLoad, I call Scan()
function Scan()
{
divResultado = document.getElementById('TheDiv');
//instanciamos el objetoAjax
ajaxScan=objetoAjax();
ajaxScan.open("GET", "myscan.php", true);
DBScan = setTimeout(Scan,15000 );
ajaxScan.onreadystatechange=function()
{
if (ajaxScan.readyState==4)
{
//mostrar resultados en esta capa
divResultado = ajaxScan.responseText;
}
};
ajaxScan.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajaxScan.send( );
}
myscan gets data from a database and in debug, I see that information is properly transfered to divResultado above.
But the data doesn't appear in the div with id = "TheDiv"
I've done this hundreds of times before, but something somwhere has made itself
invisible to me.
In the raw data HTML, I think it appears below and outside of the context.
What am I not seeing
Because you're not writing the data to the page, you're just assigning it to a variable:
divResultado = ajaxScan.responseText;
Which means divResultado no longer refers to the element on the page, it now refers to the text from the AJAX response.
To set the text to that element, try:
divResultado.innerText = ajaxScan.responseText;
Or, if the result is HTML:
divResultado.innerHTML = ajaxScan.responseText;
I want to format numeric column value as 55,25,236.30 in grid. I created a JS function and called from column template in grid. My JS function:
function NumberFormater(Price) {
kendo.culture("en-US");
kendo.cultures.current.numberFormat.groupSize = [3,2];
return kendo.toString(Price, "##,#.00");
}
but the value is showing like 5,525,236.30. According to this link the default value for groupSize is [3]. Is it not possible to set multiple values like [3,2] like numberformat in C#?
Make sure that the NumberFormater function receives a numeric argument. Below is a test page that works.
On a side note, I am not sure there is a need to set the culture and groupSize every time you execute the function.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
</head>
<body>
<input class="k-textbox" type="number" value="5525236.3" />
<button id="format" class="k-button">Format numeric value</button>
<script>
$("#format").click(function(){
var formattedValue = NumberFormater(parseFloat($(".k-textbox").val()));
alert(formattedValue);
});
function NumberFormater(Price) {
kendo.culture("en-US");
kendo.cultures.current.numberFormat.groupSize = [3,2];
return kendo.toString(Price, "##,#.00");
}
</script>
</body>
</html>
I am trying to setup two dropdown menus. The values in one depend on the current value of the other. How do I link them in a way that when i changed the selected value in one drop down menu, it automatically updates the other dropdown menu?
Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>User Stories By Iteration</title>
<meta name="Name" content="App Example: User Stories Table" />
<script type="text/javascript" src="/apps/1.32/sdk.js"></script>
<script type="text/javascript">
var rallyDataSource;
var relDropdown;
var table;
var relDropdown2;
function onReleaseSelected(releases, eventArgs) {
var queryConfig = {
type : 'testset',
attribute : 'Name',
query: '(Release.Name = "' + releases.getDisplayedValue() + '")'
};
relDropdown2 = new rally.sdk.ui.ObjectDropdown(queryConfig, rallyDataSource);
relDropdown2.display(document.getElementById("releaseDiv2"));
}
function onLoad() {
rallyDataSource = new rally.sdk.data.RallyDataSource('__WORKSPACE_OID__',
'__PROJECT_OID__',
'__PROJECT_SCOPING_UP__',
'__PROJECT_SCOPING_DOWN__');
var relConfig = {};
relDropdown = new rally.sdk.ui.ReleaseDropdown(relConfig, rallyDataSource);
relDropdown.display(document.getElementById("releaseDiv"), onReleaseSelected);
}
rally.addOnLoad(onLoad);
</script>
</head>
<body>
<div>
<div id="releaseDiv"></div>
<div id="releaseDiv2"></div>
</div>
<br/><br/>
</body>
</html>
SDK 1.x dropdowns cannot have their values refreshed once they are rendered. What you can do however is destroy the second dropdown and recreate it in response to the first dropdown's change event.
So in your onReleaseSelected just add the following code before creating and displaying a new one:
if(relDropdown2) {
relDropdown2.destroy();
}
I'm tweaking the REST sample located here for my custom entity http://msdn.microsoft.com/en-us/library/hh223541.aspx
It retrieves and displays the table for all attributes except money. That is, if my requested attributes don't include an attribute of type money the table displays. Once I add a money attribute nothing is displayed. Below is my custom html. I'm using the same SDK.OptionSetSample.js included in the sample vs solution.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Contacts Page</title>
<script src="../../ClientGlobalContext.js.aspx" type="text/javascript"></script>
<script src="Scripts/json2.js" type="text/javascript"></script>
<script src="Scripts/SDK.OptionSetSample.js" type="text/javascript"></script>
<script src="Scripts/SDK.MetaData.js" type="text/javascript"></script>
<script src="Scripts/SDK.REST.js" type="text/javascript"></script>
<link href="Styles/OptionSetSample.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var attributes = [
"new_revenuesportspartnershipsId",
"new_name",
"new_PledgeorCash",
"new_Designation",
"new_DonorStatus"
, "new_FY2011"
];
var ContactListTableData = {
Id: "ContactList",
BodyId: "ContactListBody",
CheckboxColumn: true,
SearchFieldId: "SearchString",
CreateButtonId: "createContact",
DeleteButtonId: "deleteSelectedRecords",
Columns: [
{ Name: "new_name" },
{ Name: "new_PledgeorCash" },
{ Name: "new_Designation" },
{ Name: "new_DonorStatus" }
,{ Name: "new_FY2011" }
]
};
var CurrentContactForm = {
Id: "CurrentContact",
SaveButtonId: "SaveCurrentContact",
CloseFormControlId: "closeFormSpan"
};
window.onload = function () {
SDK.OptionSetSample.Entity = "new_revenuesportspartnerships";
SDK.OptionSetSample.Columnset = attributes;
SDK.OptionSetSample.PrimaryIdAttribute = "new_revenuesportspartnershipsId";
SDK.OptionSetSample.TextSearchAttribute = "new_name";
SDK.OptionSetSample.PrimaryAttribute = "new_name";
SDK.OptionSetSample.TableData = ContactListTableData,
SDK.OptionSetSample.FormData = CurrentContactForm;
//Get the Attribute metadata
SDK.OptionSetSample.getAttributeMetadataCollection.Execute();
}
</script>
</head>
<body>
<ul id="message">
</ul>
<div>
<button id="createContact">
Create</button>
<button id="deleteSelectedRecords" disabled="disabled">
Delete Selected Contacts</button>
<span id="searchBy">Search by Full Name :</span><input id="SearchString" type="text" />
<table id="ContactList" class="RecordList" />
</div>
<div id="CurrentContact" class="editForm">
<span id="closeFormSpan" class="closeFormSpan">X</span>
<!-- Only Boolean, Picklist, Status, and String attribute types are supported in this sample.-->
<div id="new_nameField">
</div>
<div id="new_PledgeorCashField">
</div>
<button id="SaveCurrentContact" disabled="disabled">
Save</button>
</div>
</body>
</html>
The sample script looks like this for Money as it has a case already:
case "Money":
case "Integer":
var Value = record[AttributeMetadata.SchemaName];
record[AttributeMetadata.SchemaName] = {};
record[AttributeMetadata.SchemaName].Value = Value;
record[AttributeMetadata.SchemaName].isDirty = false;
In the two cases outlined, Integer will work fine as it is a primitive type and so will return the actual numerical value into record[AttributeMetadata.SchemaName].Value
However the money type is a complex object so that is assigned to the same variable but wont actually give you the value it represents just the object which is why it isn't displaying. You actually need a further .value on the end to retrieve the numerical value it represents.
Either change the switch to this:
case "Integer":
var Value = record[AttributeMetadata.SchemaName];
record[AttributeMetadata.SchemaName] = {};
record[AttributeMetadata.SchemaName].Value = Value;
record[AttributeMetadata.SchemaName].isDirty = false;
case "Money":
var Value = record[AttributeMetadata.SchemaName];
record[AttributeMetadata.SchemaName] = {};
record[AttributeMetadata.SchemaName].Value = Value.value;
record[AttributeMetadata.SchemaName].isDirty = false;
or when you put the money attribute in your table make sure that the value that gets shown is record[AttributeMetadata.SchemaName].Value.value
I think its a lower case for value it might be upper Value
Hope that makes sense.
I have a web page on which I use jQuery's AJAX to load new elements into a div. This part of my page works fine.
I now want to add a similar event to these newly-added elements. To do this I planned to use jQuery's .live() method but nothing appears to happen.
So I initially start with this
<div id="change-agent-list" class="tooltip">
<div class="top"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
Into .middle I asynchronously load markup that looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
</head>
<body>
<form name="main" method="post" action="/ils/agent-selector/" id="main">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
</div>
<ul id="content_0_agentsUL">
<li>
Agent 1
</li>
<li>
Agent 2
</li>
<li>
Agent 3
</li>
</ul>
<div id="agent-details"></div>
</form>
</body>
</html>
When the page initially loads I use this script - my intention is to add a click handler for each of the .agent-name elements that are asynchronously added later.
$j(document).ready(function () {
$j(".agent-name").live("click", function() {
var agentDetails = $j(".agent-details");
var loadingContent = '<div id="ajax-load"><img src="/sitecore/__/_images/global/ajax-load.gif" alt="AJAX content loading" /></div>';
agentDetails.show();
agentDetails.empty().html(loadingContent);
var modalURL = $j(".agent-name").attr("href");
agentDetails.load(modalURL);*/
return false;
});
});
The problem is that no events are being bound to the .agent-name elements. I've tried replacing all the inner script with a simple alert() so that I can see if any events are being bound to the .agent-name elements, and I can't get this alert() to display.
So in other words, no events are being bound to my .agent-name elements.
Even if I move the agent-name class to the list elements and change the jQuery to simply
$j(".agent-name").live("click", function() {
alert('1');
});
I still get nothing when I click on the elements.
Can anyone explain why, or how I fix this so that I can late-bind events to elements created in an AJAX callback?
I eventually solved this by using jQuery's on instead of "live".
You can only have one #agent-name because IDs are unique. You can just use $('#agents .link') since you already have a class on each anchor.
Not sure if this is helpful, but this works for me:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".agent-name").live("click", function() {
alert("click");
return false;
});
});
</script>
</head>
<body>
<form name="main" method="post" action="/ils/agent-selector/" id="main">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTQ1MTc3ODM4NGRkg9mLyLiGNVcP/ppO9C/IbwpxdwI=" />
</div>
<ul id="content_0_agentsUL">
<li>
Agent 1
</li>
<li>
Agent 2
</li>
<li>
Agent 3
</li>
</ul>
<div id="agent-details"></div>
</form>
</body>
</html>