Develop Reference

asp.net with jquery error

i try to get an image inside dropdownlist using jquery and it's work fine with me. my code
<script type="text/javascript" src="msdropdown/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="msdropdown/js/jquery.dd.js"></script>
<link rel="stylesheet" type="text/css" href="msdropdown/dd.css" />
<!-- Script is used to call the JQuery for dropdown -->
<script type="text/javascript" language=”javascript” >
$(document).ready(function (e) {
try {
$("#ddlanguage").msDropDown();
}
catch (e) {
alert(e.message);
}
});
</script>
dropdownlist:
<asp:DropDownList ID="ddlanguage" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ddSelLang_SelectedIndexChanged">
<asp:ListItem Value="en-US" Text="English"></asp:ListItem>
<asp:ListItem Value="ar-OM" Text="عربي"></asp:ListItem>
</asp:DropDownList>
and in C#
protected void BindFlag()
{
if (ddlanguage != null)
{
foreach (ListItem li in ddlanguage.Items)
{
li.Attributes["title"] = "Images/Flag/" + li.Value+".gif"; // setting text value of item as tooltip
}
}
}
so everything work fine and i get image inside the list, but the problem when i try to lode some webpage use specific javascript or jquery it will give me an error message:
one page have jquery with javascript display this error :Object doesn't support property or methode 'msDropDown'
another page i only use javascript in it, it will close and display this message 0x800a1391 - JavaScript runtime error: '$' is undefined.
and there other problems: if there some action in some page, image will hided
could any one help me in that?
thanks

MaintainScrollPositionOnPostback is not working?

I have a page with two drop down lists (ddlA and ddlB)
Once the user selects an item from ddlA, it will populate items in ddlB
I have auto post-back turned on for ddlA.
and since I wanted to maintain the scroll position, i turned on the MaintainScrollPositionOnPostBack to true like this in the page load method. :
this.MaintainScrollPositionOnPostBack = true;
But this doesn't seem to fix the issue.
Is there a workaround to fix the problem.?
-- UPDATE --
I added this js code to the page and now the problem is that the autopost back is never happening..
<script type="text/javascript">
var xPos, yPos;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
xPos = $get('scrollDiv').scrollLeft;
yPos = $get('scrollDiv').scrollTop;
}
function EndRequestHandler(sender, args) {
$get('scrollDiv').scrollLeft = xPos;
$get('scrollDiv').scrollTop = yPos;
}
</script>
Am i adding the js code incorrectly? I found it here

Try to add this to the Page directive in your ASPX file and test it that route.
<%# Page Title="" Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" MaintainScrollPositionOnPostback="true" Inherits="_Default" %>

I couldn't get MaintainScrollPositionOnPostback to work for me no matter what I tried. Based on this answer (https://stackoverflow.com/a/27505983) and a comment underneath it, I tried the following code which worked for me. This will only work if you have an ASP.NET ScriptManager (i.e. MicrosoftAjax.js) on your page. You also need JQuery added to your page. Add the below code to your .aspx file somewhere underneath asp:ScriptManager tag.
<asp:HiddenField runat="server" ID="hfPosition" Value="" />
<script type="text/javascript">
$(function () {
var positionField = $("#<%=hfPosition.ClientID%>");
window.onscroll = function () {
var position = $(window).scrollTop();
positionField.val(position);
};
});
function pageLoad() {
var positionField = $("#<%=hfPosition.ClientID%>");
var position = parseInt(positionField.val());
if (!isNaN(position)) {
$(window).scrollTop(position);
}
};
</script>
Basically we are holding the scroll position inside the value of a hidden field called hfPosition. Whenever the page is scrolled, the value will be updated. Then when a postback happens pageLoad() will automatically be called and will get the value of hfPosition and scroll to that value.
Including the ScriptManager and JQuery, my final code snippet looked something like this:
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<script src="../Scripts/jquery-3.3.1.min.js" type="text/javascript"></script>
<asp:HiddenField runat="server" ID="hfPosition" Value="" />
<script type="text/javascript">
$(function () {
var positionField = $("#<%=hfPosition.ClientID%>");
window.onscroll = function () {
var position = $(window).scrollTop();
positionField.val(position);
};
});
function pageLoad() {
var positionField = $("#<%=hfPosition.ClientID%>");
var position = parseInt(positionField.val());
if (!isNaN(position)) {
$(window).scrollTop(position);
}
};
</script>/>

How to get values in hidden fields without clicking the submit button

I am using jQuery to set some values in hidden fields, which are being set perfectly.
But the problem is hidden fields don't show me the values until I submit the form.
Is there away to get at the values before the form is submitted.
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#hdnCountryCode").val(geoip_country_code());
$("#hdnCountyName").val(geoip_country_name());
$("#hdnCity").val(geoip_city());
$("#hdnRegionCode").val(geoip_region());
$("#hdnRegion").val(geoip_region_name());
$("#hdnLatitude").val(geoip_latitude());
$("#hdnLongitude").val(geoip_longitude());
});
</script>
<body>
<form id="form1" runat="server">
<asp:HiddenField runat="server" ID="hdnCountryCode" />
<asp:HiddenField runat="server" ID="hdnCountyName" />
<asp:HiddenField runat="server" ID="hdnCity" />
<asp:HiddenField runat="server" ID="hdnRegionCode" />
<asp:HiddenField runat="server" ID="hdnRegion" />
<asp:HiddenField runat="server" ID="hdnLatitude" />
<asp:HiddenField runat="server" ID="hdnLongitude" />
<asp:Button runat="server" ID="btnV" Text="s" onclick="btnV_Click" />
<%
Google.Values Send = new Google.Values();
Send.CountryName = hdnCountyName.Value;
Send.CountryCode = hdnCountryCode.Value;
Send.RegionName = hdnRegion.Value;
Send.RegionCode = hdnRegionCode.Value;
Send.City = hdnCity.Value;
Send.Latitude = hdnLatitude.Value;
Send.Longitude = hdnLongitude.Value;
%>
</form>
</body>
With the code above the values of the hidden fields when passing to the properties of my class is giving me "". But when I use button click event same code returns me all the values which i need

To get the values you need to get the rendered id, and this is done like:
$("#<%=hdnCountryCode.ClientID%>").val(geoip_country_code());

You can see this code:
<head>
<title>Test</title>
<script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script>
<script language="JavaScript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var countryCode = geoip_country_code();
var countryName = geoip_country_name();
$('#countryCode').html(countryCode);
$('#countryName').html(countryName);
});
</script>
</head>
<body>
<p>
CountryCode: <span id="countryCode">countryCode</span>
<p>
<p>
CountyName: <span id="countryName">CountyName</span>
<p>
</form>
</body>
</html>

Call jQuery function from server (In Updatepanel)

I want to call jQuery function from server.
The server side button that calls function is inside an UpdatePanel.
this is server side function :
//Button Click handler (It is inside Updatepanel)
string ScriptName = null;
ScriptName = "function pageLoad(sender, args) { if (args.get_isPartialLoad()) {DisplayMessage(); }}";
ScriptManager.RegisterStartupScript(this, GetType(), "DisplayMessage", ScriptName, true);
and this is client side function :
<script type="text/javascript">
function DisplayMessage() {
//Alert("Called");
}
</script>
It doesn't work.
What's wrong ? (Is my question and problem clear?)

That's weird, as the following works perfectly fine for me:
<%# Page Language="C#" %>
<script type="text/c#" runat="server">
protected void BtnTrigger_Click(object sender, EventArgs e)
{
string script = "function pageLoad(sender, args) { if (args.get_isPartialLoad()) {DisplayMessage(); }}";
ScriptManager.RegisterStartupScript(
this,
GetType(),
"DisplayMEssage",
script,
true
);
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function DisplayMessage() {
alert('called');
}
</script>
</head>
<body>
<form id="Form1" runat="server">
<asp:ScriptManager ID="scm" runat="server" />
<asp:LinkButton
ID="BtnTrigger"
runat="server"
Text="Trigger"
OnClick="BtnTrigger_Click"
/>
<asp:UpdatePanel ID="up" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger
ControlID="BtnTrigger"
EventName="Click"
/>
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>
Also do you really need all the complex script, why not simply use string script = "DisplayMessage();";?

create a display:none div in the page. Put it in update panel. This will not disturb your design. to execute every sclient side script in page
<div id="scriptContainer" runat="server" style="display:none;"></div>
then paste your js in it on an event.
scriptContainer.innerHTML = "<script type=text/javascript>DisplayMessage();</script>";
hope it helps.

Is there a way to send text to an aspcontrol via jquery

Is there a way to send data to an aspcontrol say a label called label1? Via jquery?
I know jquery only likes html but is there a way to just send the raw text to an asp control using a similar method below:
<script type="text/javascript">
$(function () {
$('button').click(function () {
$(document).ready(function () {
var x = $('textarea').val();
$('textarea').val('');
var label = $("#<%= Label1.ClientID %>");
var newdiv = $("<div></div>").html(x).attr('id', 'test');
$('#test1').append(newdiv);
var serializer = new XMLSerializer();
label.text(serializer.serializeToString(newdiv));
return false;
});
});
});
</script>

I think the bigger issue is asp.net changes the id and trying to get that in the code isn't that easy.
Can you use the name attribute? If so you can just look for the name attribute containing your name using the jquery selector '[ name *="YourName"]'
EDIT: I meant to add firebug is a great help for examining page elements and figuring exactly what you can use (Ex: asp.net adds a name attribute to a button by default) and whats going on (like your return false failing) then tweaking your jquery from the watch window.
Sample asp.net form content:
<p>
<asp:TextBox ID="TextBox1" name="TextBox1" runat="server" Rows="3"></asp:TextBox>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Button" /></p>
<p>
<asp:Label ID="Label1" name="Label1" runat="server" Text="Label"></asp:Label>
</p>
<div id="test1"></div>
jquery:
$(function () {
$('[name*= "Button1"]').click(function () {
var x = $('[name*= "TextBox1"]').val();
var newdiv = $("<div></div>").html(x).attr('id', 'test');
$('#test1').append(newdiv);
$('[name*= "Label1"]').text($('#test1').html());
$('[name*= "TextBox1"]').val('');
return false;
});
});

Here's how to do it without jQuery:
<%# Page Inherits="System.Web.UI.Page" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
<script type="text/javascript" src="App_Resources/JavaScript/jquery-1.4.4.min.js"></script>
</head>
<body>
<form runat="server">
<asp:Label ID="testLabel" runat="server" Text="test" />
<script type="text/javascript">
$(document).ready(function ()
{
var label = document.getElementById("<%= testLabel.ClientID %>");
var div = document.createElement("div");
div.innerText = "content";
label.innerText = div.outerHTML;
});
</script>
</form>
</body>
</html>