jQuery Autocomplete and gridview footer textbox ASP.NET - asp.net

<script src="JQuery/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="JQuery/jquery.autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#<%=(GVOperatos.Footer.FindControl('txtEPFNo')).ClientID%>").
autocomplete('Search_EPFNo.ashx');});
</script>
I cant get gridview footer textbox client id in javascript.how to get that one.
thanx.'

You can use a custom selector to select asp.net controls. Here is a blog post explaining the method. It comes in handy when needing to select asp.net controls.
http://lanitdev.wordpress.com/2009/06/08/extending-jquery-to-select-asp-controls/

Related

JQuery on masterpage doesn't work in ASP.NET

i use this code in web forms and worked correctly but in master-page doesn't work
in head of master
<link rel="stylesheet" href="css/FirstPage.css" />
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.10.3.custom.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
<script>
$(document).ready(function () {
$("div[id$='slide']").show('bounce');
$("div[id$='content']").accordion({ fillSpace: true, collapsible: true, active: false });
});
</script>
in body of master
enter code here
but it doesn't work, this code exactly work in web forms but not work in master page why?
Your code is not working because by default web forms page (be it regular page or master page) will add extra prefixes to the controls if they are placed inside other controls which are implementing INamingContainer interface.
If you are sure that you need runat="server" attribute on your divs then you can use inline code and use a ClientID property to get generated identificator:
$(document).ready(function () {
$("#<%=slide.ClientID%>").show('bounce');
$('#<%=content.ClientID%>').accordion({ fillSpace: true, collapsible: true, active: false });
});
Alternatively you can use ClientIDMode enumeration to control how client identificators are selected. In your case use ClientIDMode.Static:
<div runat="server" class="slide" id="slide" ClientIDMode="Static"></div>
I suspect this is because your control ids will be prepended by the ids of the content place holders.
Use the below CSS Selectors to access the controls that ends with id 'slide' and 'content'. Hope that helps..
$("div[id$='slide']")
$("div[id$='content']")

bootstrap not showing tooltip

I followed bootstrap main page examples to setup some tooltips in my page but they doesn't works.
i tryed just this:
<script type="text/javascript" src="vendor/js/jquery.js"></script>
<script type="text/javascript" src="vendor/js/bootstrap.js"></script>
<script type="text/javascript">
var options ;
$('.tip').tooltip();
</script>
<a href="#" rel="tooltip" class="tip" title="first tooltip" data-original-title="Logout">
why does it doesn't works and doesn't show me any console error? i'm using latest boostrap version
you should either move the script below the HTML it references or wrap it in:
$(document).ready(function() {
$('.tip').tooltip();
});
To ensure that the DOM has been loaded before you call the tooltip() method.

JQuery Session problem

I am using jQuery session in my master page. Anything I'm missing?
Code:
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.session("lnkID","A1")
});
</script>
Error:
Microsoft JScript runtime error: Object doesn't support this property or method
By your example alone, you're missing a reference to the required files, and you're not wrapping your jQuery code in script tags. You need to reference not only jquery-source, but jquery-json, and jquery-session as well.
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.json.js"></script>
<script type="text/javascript" src="scripts/jquery.session.js"></script>
Once you've got those in place, you need to place your logic within script tags:
<script type="text/javascript">
$(function(){
$.session("foo", "bar");
});
</script>
See the following demo for an example: http://www.jaysalvat.com/session/test1.html
Lastly, the language attribute of the script tag is deprecated. You can do away with it, but keep the type attribute.

Jquery: basic function of datetimepicker .......Problem

I want make datetimepicker in my project. Using jquery how it is possible?
I have one text box, div and calendar. Once i focus on textbox, the calendar div gets fadein. Some way what i want to do is this: Once i click on calender the selected value should show in textbox and calender should hide. How?
Here is the code so far.
$(document).ready(function() {
$(".txtDateTime").focus(function () {
$(".CalenderDiv").fadeIn("slow");
});
$(".UserCalender").click(function () {
$(".CalenderDiv").fadeout("slow");
$(".txtDateTime").val("fdgfg");
// ================??????
});
});
This code once i click textbox calender will show. But in the case of Calendar click it is not working? Why....Please Help me....
Seems like you are re-inventing the datepicker widget from jQuery UI. Is that correct? Why not just use what works?
full code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Simple DatePicker example</title>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/smoothness/jquery-ui.css"></link>
<script type="text/javascript"
src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type="text/javascript"
src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js'></script>
<script type="text/javascript" language='javascript'>
$(document).ready( function (){
$('.pick-date').datepicker({clickInput:true});
});
</script>
</head>
<body>
<h1>jQuery UI datepicker example</h1>
<div class="inputDiv">
<p>Click in the box to select a date:</p>
<input id='b1' class='pick-date' value=''/>
</div>
</body>
</html>
demo: http://jsbin.com/ewime
You should checkout jQUeryUI's Datepicker widget: http://jqueryui.com/demos/datepicker/
The widget has got the functionality you are looking for.. and you do not have to create your own calendar.

Why is the script include for ScriptResource.axd not being rendered on some pages?

I've got a page using a Microsoft Reporting ReportViewer. The report appears to be working but the page is giving me two javascript errors, both of them "'Sys' is undefined".
Examining the html output, I can see that this page is not loading the ScriptResource.axd file. Here is the generated output from the <form runat="server">:
Normal pages:
<script src="/ScriptResource.axd?d=A7zLSiYT-QHoLdLnJ4qcSxAMYrwOyrYaDQLr4063d4z_oKYldDliKqXbyFe5lSU_BLW1XY7gevJ3qbD0cmlGqFb4n7TXEUowGbFVlAH6qW01&t=ffffffff81a772fc" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
<script src="/ScriptResource.axd?d=A7zLSiYTQHoLdLnJ4qcSxAMYrwOyrYaDQLr4063d4z_oKYldDliKqXbyFe5lSU_pP3jafRTfoGWk6oNhALZysXq7AipBxlz6Hg1wbpmi5swSCq2gf8Ifthok9c1Qyjf0&t=ffffffff81a772fc" type="text/javascript"></script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
value="/wEWBwLqzd6VBwLe87a+BQLe87a+BQKMhJXjCwLDhbnwDQLDhc2YCALFibnGClZTK/SWwK6x3zLDgngtDRWbwIkm" />
</div>
And here the page with a reportviewer control:
<script src="/Reserved.ReportViewerWebControl.axd?OpType=Resource&Version=9.0.30729.1&Name=Microsoft.Reporting.WebForms.Scripts.ReportViewer.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function RVClientImageToggle(shouldEnable, image1Id, image2Id)
{
var enableHover = document.getElementById(image1Id);
var disableHover = document.getElementById(image2Id);
if (enableHover == null || disableHover == null)
return;
if (shouldEnable)
{
enableHover.style.display = "";
disableHover.style.display = "none";
}
else
{
disableHover.style.display = "";
enableHover.style.display = "none";
}
}//]]>
</script>
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWGQLrm7KJCwLe87a+BQLe87a+BQKMhJXjCwLDhbnwDQLDhc2YCALFibnGCgL4rMvOCQL4rK/NCQKp9KnKBgKp9I3JBgKQitCjCALzoZ6fCQLzoYKeCQLC2pe+DgLC2vu8DgKsmc6MBgLYo/6MDgKsz4boDQLCqZGDBgL97pJQAv3u/vQHAv3u6pkPAv3u1r4GAv3ugpYJAOTw7r3aR/RClkJpkBgvgn/NGjI=" />
</div>
There you can see -- no references to the axd files
The <ScriptManager> tag produces this in either case:
<script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl00$smManager', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);
//]]>
</script>
And that's where the javascript error comes in -- referencing the Sys object
So what is it that triggers the different output from <form runat="server">?
I still have no answer, but did find a workaround on the internet here: http://forums.asp.net/p/1318006/2617880.aspx#2617880
If I jam the report viewer into a user control, and then just have the user control on the page, the form tag will render correctly.
Note, I am using master pages as well so maybe that had something to do with this. The form tag is in the master page, then I have a content page with a user control in the content section, and then the ReportViewer in the user control. That works.
What didn't work was a master page with a form tag (runat=server), and a content page with a ReportViewer in the content section. That's the case in which none of the ASP.NET AJAX scripts were included, leading to 'Sys is undefined' errors.

Resources