Can java script add the contents below to a asp table aswell at the same time (with html tags)
<script type="text/javascript">
$(function () {
$('button').click(function () {
var x = $('textarea').val();
$('textarea').val('');
$('#test1').append('<div id="test">' + x + '</div>');
return false;
});
});
</script>
<textarea style="border: 0" cols="77" rows="2">Write Something....</textarea>
<button>Post Message</button>
<div id="test1"></div>
</asp:Content>
something like:
<script type="text/javascript">
$(function () {
$('button').click(function () {
var x = $('textarea').val();
$('textarea').val('');
$('#test1').append('<div id="test">' + x + '</div>');
//$save append aswell to Table1
return false;
});
});
</script>
<script type="text/javascript">
$(function () {
$('button').click(function () {
var x = $('textarea').val();
$('textarea').val('');
var newdiv = $("<div></div>").html(x).attr('id','test');
$('#test1').append(newdiv);
$('#Table1').append(newdiv);
//$save append aswell to Table1
return false;
});
});
</script>
It seems like you are using jquery here.
Have you got your jquery framework loaded & tried your code to see if it works??
It is running fine on jsfiddle.net here
Updates
If your Table1 is on the same page.
All you need to do is to get hold of the DOM element.
if you have a table
<table id="Table1">
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
</table>
You can add after your code
$('#test1').append('<div id="test">' + x + '</div>');
this code
$('#Table1 tr:last').after('<tr><td>'+ x +'<td></tr>');
Hope you find this helpful
Related
In my view I have a code like
<div id="DDLs">
<p>Begin: #Html.DropDownListFor(model => model.ItemID, Model.items, new { #id = "list1" })</p>
</div>
...
<script type="text/javascript">
$(document).ready(function () {
$("#list1").change(function () {
var countrySelected = $("select option:selected").first().text();
$.get('#Url.Action("MyAction")',
{ id: countrySelected }, function (data) {
$("#apendedInfo").html(data);
});
});
});
</script>
That works as expected.The problem is when I add another dropdownlistfor like this:
<div id="DDLs">
<p>Begin: #Html.DropDownListFor(model => model.ItemID, Model.items, new { #id = "list1" })</p>
<p>Options: #Html.DropDownListFor(model => model.Option, #ViewBag.Options as SelectList, new { #id = "list2"})</p>
</div>
After adding it, change event is sometimes fired with selected value of the added dropdownlist, not the one that I expect it would. I have no idea why.
Edit:
Thanks to dansasu11 answer, I've figuired out that the problem was in line:
var countrySelected = $("select option:selected").first().text();
I changed it to:
var countrySelected = $(this).val();
Now everything works - of ocurse insted of reciving Text of selected item I'm getting its value, which is also fine.
Perhaps I should have spent more time learning jQuery.
try
<script type="text/javascript">
$(document).ready(function () {
$("#list1").change(function () {
var countrySelected = $(this).find("option:selected").text();
$.get('#Url.Action("MyAction")',
{ id: countrySelected }, function (data) {
$("#apendedInfo").html(data);
});
});
});
</script>
or if you want to be able to select any of the dropdown and get the selected option then change to
<script type="text/javascript">
$(document).ready(function () {
$("select").change(function () {
var countrySelected = $(this).find("option:selected").text();
$.get('#Url.Action("MyAction")',
{ id: countrySelected }, function (data) {
$("#apendedInfo").html(data);
});
});
});
</script>
I want to change background body image for specific pages.
How can I do that..?? Is there any functionality in Orchard CMS, or I have to do it manually... any suggestions..??
Thanks.
#using(Script.Foot()) {
<script type ="text/javascript">
//<![CDATA[
$(document).ready(function () {
var url = window.location.pathname;
var count = url.match(new RegExp("/", 'g'));
var urlsplit = url.split("/");
var page_class = urlsplit[1];
$('body').addClass(page_class);
});
//]]>
</script>
}
I am building an Asp.net MVC app and would like to add a datepicker.
I have this code in my form in the view
#Html.LabelFor(b => b.Date)
#Html.EditorFor(b => b.Date, new {id = "news_date"})
and I would like to add this javascript to it to enable to datapicker:
$(document).ready(function () {
$("#news_date").datepicker({ dateFormat: 'dd/mm/yy' });
});
however when the application is run it shows the above code as text on the page.
How do I get it to recognize it as javascript?
Use script tag
#Html.LabelFor(b => b.Date)
#Html.EditorFor(b => b.Date, new {id = "news_date"})
<script type="text/javascript">
$(document).ready(function () {
$("#news_date").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
wrap your code with script tags
<script type="text/javascript">
$(document).ready(function () {
$("#news_date").datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
Here is my java script
$('#geoLocation').click(function () {
alert("I am Here");
if (navigator.geolocation) {
// Get Latitude and Longitude
navigator.geolocation.getCurrentPosition(showPosition);
}
else {
// Hide Locator Panel, if Browser not supported
document.getElementById('panel1').style.display = 'none';
}
});
function showPosition(position) {
// x.innerHTML = "Latitude: " + position.coords.latitude +
// "<br>Longitude: " + position.coords.longitude;
document.getElementById('latitude').innerHTML = position.coords.latitude;
document.getElementById('longitude').innerHTML = position.coords.longitude;
}
I need to get at the latitude and longitude values (which are hidden on the screen), in Postback on the CodeBehind. How do I do this?
You can use $('#HiddenFieldId').val() to assign data to HiddenField at client side.
<div id="geoLocation">Click me to retrieve Geo Location</div>
<asp:HiddenField runat="server" ID="LatitudeHiddenField" />
<asp:HiddenField runat="server" ID="LongitudeHiddenField" />
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$('#geoLocation').click(function () {
if (navigator.geolocation) {
// Get Latitude and Longitude
navigator.geolocation.getCurrentPosition(showPosition, geoLocationErrors);
} else {
// Hide Locator Panel, if Browser not supported
document.getElementById('panel1').style.display = 'none';
}
function showPosition(position) {
$('#<%= LatitudeHiddenField.ClientID %>').val(position.coords.latitude);
$('#<%= LongitudeHiddenField.ClientID %>').val(position.coords.longitude);
}
function geoLocationErrors() {
alert("Your browser doesn't support Geo Location.");
}
});
</script>
Then you can retrieve those value from HiddenField at server side as -
var latitute = LatitudeHiddenField.Value;
var longitude = LongitudeHiddenField.Value;
I assume 'latitude' and 'longitude' are HTML elements on the page ?
That being the case, you should be able to add a runat="server" attribute to them and then they will be available in server-side code. If you're site is ASP.NET 4/4.5 you can also add ClientIDMode="Static" and your showPosition function will work as it is; if not you could a class to them and use a jQuery class selector to get your two items.
I am working on asp.net c# . I want to add javascript function in c# by using htmlgeneric control .I have used code ,
HtmlGenericControl scriptTagLinks = new HtmlGenericControl("script");
scriptTagLinks.Attributes["type"] = "text/javascript";
string scrip = "$(function () {$([src='" + url + "']" + ").pinit();});";
// txtDesc.Text = rdr.GetString(4);
// TxtLink.Text = rdr.GetString(6);
scriptTagLinks.Attributes["src"] = scrip;
this.Controls.Add(scriptTagLinks);
But i should get like this ,
<script type="text/javascript">
$(function () {
$("[src='/pinterest/portals/0/Images/about-person3.jpg']").pinit();
$("[src='/pinterest/portals/0/Images/about-us-group.jpg']").pinit();
});
</script>
But i am getting this as
<script src="$(function () {$([src='/pinterest/portals/0/Images/about-us-group.jpg']).pinit();});" type="text/javascript">
How can i add $([src='/pinterest/portals/0/Images/about-us-group.jpg']).pinit();}); between tags .