how to create dynamic fileupload control and show image in imagebox using jquery?

Posted by Hariinakoti under jQuery on 11/12/2012 | Points: 10 | Views : 3721 | Status : [Member] | Replies : 4
Hi All,
How to create dynamic controls using jquery? as for my requirement i want to show image in imagebox with fileupload control using jquery.

Thanks & Regards
Hari



Responses

Posted by: Sravya on: 11/12/2012 [Member] Starter | Points: 25

Up
0
Down
Hi...
For Dynamic Control Using Jquery.. I just Explaining How to add or Remove Textbox Example Using Jquery.
In jQuery, it's quite easy to add or remove a textbox dynamically. The idea is quite simple, just combine the use of 'counter' variable, jQuery createElement(), html() and remove() method. See below example :

<html>
<head>
<title>jQuery add / remove textbox example</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<style type="text/css">
div{
padding:8px;
}
</style>
</head>
<body>

<h1>jQuery add / remove textbox example</h1>
<script type="text/javascript">
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
'<input type="text" name="textbox' + counter +
'" id="textbox' + counter + '" value="" >');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
$("#getButtonValue").click(function () {
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});
});
</script>
</head>
<body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
<label>Textbox #1 : </label><input type='textbox' id='textbox1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>
</body>
</html>

Thanks & Regards
Sravya

Hariinakoti, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Hariinakoti on: 11/12/2012 [Member] Starter | Points: 25

Up
0
Down
@Sravya
:)
already i tried this code .but here it is not working.I know u copied that code in this url
http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/

Thanks & Regards
Hari

Hariinakoti, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Sravya on: 11/12/2012 [Member] Starter | Points: 25

Up
0
Down
Hi Harinakoti...
I was not copied... I tried...and I got solution...That's why I have sent...k Thank you..
I am giving one more example Try this..

Thanks & Regards.
Sravya

Hariinakoti, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Sravya on: 11/12/2012 [Member] Starter | Points: 25

Up
0
Down
Hi...Harinakoti...
I am giving one more example to create dynamic Datatable using Jquery..please go through this...

To create dynamic datatable in c# and assign back to gridview.
we first need to create columns for table.
in below code. i created 3 columns in datatable with no row.

public DataTable DynamicColumns()
{
// Define the new datatable
DataTable dt = new DataTable();
// Define 3 columns
DataColumn dc;
dc = new DataColumn("BagID");
dt.Columns.Add(dc);
dc = new DataColumn("Weight");
dt.Columns.Add(dc);
dc = new DataColumn("ArticlesCount");
dt.Columns.Add(dc);
return dt;
}
now in code you can save these columns in viewstate, because if column once created, no need to call this function again.
if(ViewState["DynamicDataTable"]==null)
{
ViewState["DynamicDataTable"]=DynamicColumns();
}
now its time to create rows in datatable, the below code will add new rows in datatable which i created earlier.
public DataTable DynamicRows(object dynamicDataTable, string bagid, string Weight, string ArticleCount)
{
DataTable dt = (DataTable)dynamicDataTable;
DataRow row = dt.NewRow();
row["BagID"] = bagid;
row["Weight"] = Weight;
row["ArticlesCount"] = ArticleCount;
dt.Rows.Add(row);
return dt;
}
To call both functions effectively?
if(ViewState["DynamicDataTable"]==null)
{
ViewState["DynamicDataTable"]=DynamicColumns();
}
ViewState["DynamicDataTable"]=DynamicRows(ViewState["DynamicDataTable"], "DotNet", "25", "50");
GridView1.DataSource=ViewState["DynamicDataTable"];
GridView1.DataBind();

Thanks & Regards
Sravya


Hariinakoti, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response