net , c#. I am calling a javascript by using following code . `
<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>
My c# code is
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<br />
<img ID="ImageZoom" runat="server" src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> ' style="display: inline; height:auto; left: 0pt; top: 0pt; width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ImageId") %> ' />
</ItemTemplate>
</asp:Repeater>`
if i add more images i should call javascript for all images .
You're question is vague at best, but I think this is what you're looking for:
Assign a class to the images that you want to call pinit() on.
Use jQuery's class selector to retrieve the appropriate objects.
<img ID="ImageZoom" class='pinitPlease' runat="server" ... />
$(function () {
$(".pinitPlease").pinit();
});
assuming you want to zoom images that are located in /pinterest/portals/0/Images/
you can adapt your jquery selector to select those imgages that start with that path
$("[src^='/pinterest/portals/0/Images/']").pinit();
All your images will have the word "ImageZoom" in their ID, so you can make a selector by that and find all images together.
$("[id*='ImageZoom']").pinit();
Related
I have added a bootstrap datepicker to several textboxes in a Gridview. But on selecting a date, a dummy time format as '00:00:00' is being added to the date in the textbox on onrowupdating in the gridview.
I have tried to trim the date in the onrowbound, but to no avail.
Gridview code:
<asp:TemplateField HeaderText="AMR Plan">
<ItemTemplate>
<asp:Label Text='<%# Eval("amr_plan") %> Width="130px" runat="server"></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtAMRPlan" Text='<%# Eval("amr_plan") %>' Width="130px" runat="server"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
code for datepicker(javascript and html):
<script type="text/javascript" src='https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js'></script>
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js'></script>
<link rel="stylesheet" href='bootstrap.min.css'
media="screen" />
<%--'https:/ /cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css'--%>
<!-- Bootstrap -->
<!-- Bootstrap DatePicker -->
<link rel="stylesheet" href="bootstrap-datepicker.css"
type="text/css" />
<%--href="https:/ /cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css"--%>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"
type="text/javascript"></script>
<!-- Bootstrap DatePicker -->
<script type="text/javascript">
$(function () {
$('[id*=txtAMRPlan]').datepicker({
changeMonth: true,
changeYear: true,
format: "mm/dd/yyyy",
language: "tr"
});
});
It would be of great help if someone can shed some light on this? Thanks in advance!
I finally managed to get around a solution. Writing this answer just in case someone needs it later. So the problem was with the Eval function. Eval function is used to define only one way binding i.e. ReadOnly in the grid view. So Eval should be replaced with Bind function which is used for two way binding meaning read/write is possible. In my case grid view should have been be able to update the database field, which is possible with Bind. Observe this snippet..
<asp:TemplateField HeaderText="AMR Plan">
<ItemTemplate>
<asp:Label ID="lblAMR" Text='<%# Bind("amr_plan","{0:MM/dd/yyyy}") %> Width="130px" runat="server">
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtAMRPlan" Text='<%# Bind("amr_plan","{0:MM/dd/yyyy}") %>' Width="130px" runat="server"></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
Also dont forget to give id to Label.
Few articles which might help Here & Here
I am trying to capture in google analytics the data that is entered into a textbox. The code that I have so far is below, I am trying to capture the data by Javascript, but I can't seem to get it to work. The CMS Platform I am using is sitecore.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="SalesRepSearch.ascx.cs" Inherits="USEndoscopy.Website.layouts.USEndoscopy.Sublayouts.SalesRepSearch" %>
<%# Import Namespace="USEndoscopy.Library.Search" %>
<script type="text/javascript">
var textbox = document.getElementById('txtZipCode'),
submitButton = document.getElementById('btnSalesRepSearch');
submitButton.onClick = function () {
_trackEvent('data-store', textbox.name, textbox.value, 0);
// 'data-store' can be replaced with whatever category of data you want, for sortability's sake
// the 0 can be replaced with any other numerical data you want - but it must be numerical
}
</script>
<p></p>
<p>
<asp:Panel DefaultButton="btnSalesRepSearch" runat="server">
<asp:TextBox ID="txtZipCode" runat="server" Width="300px"></asp:TextBox>
<asp:Button ID="btnSalesRepSearch" runat="server" CssClass="buttonregular" Text="Search" OnClick="btnSalesRepSearch_Click" />
<asp:RequiredFieldValidator ID="reqTxtZipCode" runat="server" ValidationGroup="ZipCode" ControlToValidate="txtZipCode" Display="Dynamic" ErrorMessage="Please enter a valid US Zip code" CssClass="error"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regExTxtZipCode" runat="server" ValidationExpression="^\d {5}(-\d{4})?$" ValidationGroup="ZipCode" ControlToValidate="txtZipCode" Display="Dynamic" ErrorMessage="Please enter a valid US Zip code" CssClass="error"></asp:RegularExpressionValidator>
</asp:Panel>
</p>
<p>
<asp:Repeater ID="salesRepContainer" runat="server">
<ItemTemplate>
<%# ((SalesRep)Container.DataItem).RepName %><br />
<%# ((SalesRep)Container.DataItem).Phone %><br />
<%# ((SalesRep) Container.DataItem).Email %><br />
</ItemTemplate>
</asp:Repeater>
</p>
<p>
<sc:Text Field="InternationalMessage" runat="server" />
</p>
Did you check the source code of the rendered HTML? Has the ASP.Net WebControl ID's ended up as something completely different due being nested in the panel?
Maybe you should add a CSS class to these and use document.getElementsByClassName
If you are using jQuery then you could use the attributeEndsWith selector
$('input[id$="txtZipCode"]');
$('input[id$="btnSalesRepSearch"]')
It's because ASP.NET has changed the ID value of your textboxes at the time of rendering them.
If your running .net V4 or greater then add ClientIDMode="Static" to your textbox and
button. This tells .net to not change the ID of your control.
<asp:TextBox ID="txtZipCode" runat="server" ClientIDMode="Static" Width="300px"></asp:TextBox>
<asp:Button ID="btnSalesRepSearch" runat="server" ClientIDMode="Static" CssClass="buttonregular" Text="Search" OnClick="btnSalesRepSearch_Click" />
If your running less than .net 4 change your Javascript to: (.ClientID gets the ID that .net gave the control when it rendered it)
var textbox = document.getElementById('<%= txtZipCode.ClientID %>'),
submitButton = document.getElementById('<%= btnSalesRepSearch.ClientID %>');
UPDATE
You might be having an issue where your javascript function is trying to assign a click function to your button before your button is actually available on the DOM.
So try the following:
Javascript function
function btnSearchClick(){
var textbox = document.getElementById('txtZipCode');
// Change your google code to this:
_gaq.push(['_trackEvent', textbox.name, textbox.value, 0]);
return true;
}
And on your button add the property
onClientClick="return btnSearchClick()"
I need to make a HyperLink blink (customer requirement unfortunately) so I've decided to use this.
Could someone point me in the right direction on how to invoke this from the code behind (C#)?
So far I've tried:
private string script1 = "<script type=\"text/javascript\" charset=\"utf-8\" src=\"javascripts/jquery.blink.min.js\"></script>";
private string script2 = "$(\".selector\").blink();";
ScriptManager.RegisterClientScriptBlock(e.Item.FindControl("hlink"), e.Item.FindControl("hlink").GetType(),
"BlinkingScript", script1, false);
ScriptManager.RegisterStartupScript(e.Item.FindControl("hlink"),
e.Item.FindControl("hlink").GetType(),
"BlinkingScript", script2, false);
..to no avail
Trying to mess around with RegisterClientScriptBlock and RegisterStartupScript is painful, and is completely unnecessary except in some extremely off-radar edge cases. Not only is it extremely difficult to maintain, it's also difficult to understand. And in this case the simple, direct approach will work much better for you.
In the <head> block of your page, add the following:
<!-- Assuming that you've already got jQuery registered... -->
<script language="javascript" type="text/javascript" src="Scripts/jquery.blink.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
// Couple of notes here:
// ".blinky" means that it will match anything with a CSS class of "blinky". This can be anything, not just hyperlinks.
// Also, I'm adding an optional object parameter to the blink() method that allows me to specify parameters that alter its behavior.
// In this case, if I just called blink() it would only blink 3 times, but I'm overriding that to blink 5 times.
$(".blinky").blink({blinks: 5});
});
</script>
Then, in the body of your page, add the CssClass="blinky" on the hyperlinks that you want to blink.
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="#" Text="Not Blinky Link" /><br />
<asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="#" Text="Not Blinky Link" /><br />
<asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="#" Text="Blinky Link" CssClass="blinky" /><br />
<asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="#" Text="Not Blinky Link" /><br />
<asp:HyperLink ID="HyperLink5" runat="server" NavigateUrl="#" Text="Blinky Link" CssClass="blinky" /><br />
<asp:HyperLink ID="HyperLink6" runat="server" NavigateUrl="#" Text="Blinky Link" CssClass="blinky" /><br />
You can also use an asp:Repeater, code-behind, etc. to construct your Hyperlink items, just as long as you set the CssClass on the ones you want to blink.
I've got a form that is displayed inside a jQuery colorbox. When the form is submitted, the fields within that form are not being posted back to the page. I modified the javascript to store the form fields into hidden fields on a submit and those DO post back. The problem is, since this is a login box, I really don't want to move the password around like that. The main form content is inside an update panel. Here is the code for my master page:
<form id="myform" runat="server" clientidmode="Static" method="post">
<asp:ScriptManager ID="ecommerceManager" runat="server" ClientIDMode="Static" EnableViewState="False" EnablePageMethods="True">
<Scripts>
<asp:ScriptReference Path="~/js/jquery-1.6.1.min.js" />
<asp:ScriptReference Path="~/js/jquery.colorbox.min.js" />
<asp:ScriptReference Path="~/js/eCommerce.js" />
</Scripts>
</asp:ScriptManager>
<div style="width: 940px; margin-left: auto; margin-right: auto;">
<div align="left">
TOP OF THE PAGE
<asp:ContentPlaceHolder ID="bodyContent" runat="server" ClientIDMode="Static">
</asp:ContentPlaceHolder>
BOTTOM OF THE PAGE
</div>
</div>
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(closeLoading);
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(loadData);
</script>
</form>
Here is some of the code from my main default page that uses the master page:
<asp:Content ID="mainContent" ContentPlaceHolderID="bodyContent" runat="server">
<asp:UpdatePanel ID="ecommerceUpdate" runat="server" ClientIDMode="Static">
<ContentTemplate>
<asp:Panel ID="pnlEcomMain" runat="server" CssClass="ecom_main" ClientIDMode="Static">
<asp:HiddenField ID="statusField" runat="server" ClientIDMode="Static" ViewStateMode="Disabled" EnableViewState="False" />
<asp:HiddenField ID="hdnUsername" runat="server" ClientIDMode="Static" ViewStateMode="Disabled" EnableViewState="False" />
<div class="add_product">
<div class="add_product_menu text_12_bold">
<asp:Image ID="imgAddProducts" ImageUrl="~/images/ecom_icon_add_2.gif" CssClass="std_btn" AlternateText="Add Products" runat="server" ClientIDMode="Static" />Add Additional Products:<br /><br />
<asp:DropDownList ID="newproduct" runat="server" ClientIDMode="Static"
onchange="addProduct()">
</asp:DropDownList>
</div>
</div>
</asp:Panel>
<div class="clear"></div>
<!--- HERE IS THE COLORBOX POPUP CONTENT --->
<div style="display: none; visibility: hidden;">
<div id="inline_login">
<p><strong>User Login Details Go Here</strong></p>
User Name: <asp:TextBox ID="loginName" runat="server" ClientIDMode="Static" EnableViewState="False" ViewStateMode="Disabled" /><br />
Password: <asp:TextBox ID="loginPassword" runat="server" TextMode="Password" ClientIDMode="Static" /><br />
<input type="button" name="loginBtn" id="loginbtn" value="Login" onclick="javascript:validateLogin()" />
</div>
</div>
</asp:Panel>
<asp:Label ID="xmlContent" runat="server" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
The new product field properly posts, but the username and password doesn't UNLESS I copy it to the hidden fields before a post. I'm guessing maybe it's a conflict with the update panel? I was originally trying to get a Login Control working in the Update Panel but read in the forums that there is a known problem with this.
Any insight on this would very tremendously be appreciated. I'm using firebug and can confirm that the fields simply aren't in the post which is why ASP isn't finding them.
Apparently, despite being inside the form, the colorbox actually moves the content outside the form. I was able to resolve this by adding this line of code to my JavaScript submit function:
jQuery('#inline_login').appendTo('form');
Hope it helps someone else!
I have never used jQuery colorbox, but i had a similar problem with jQuery UI modal popup. What it was doing was, when i attached the popup it moved the content div outside of the asp.net form so the controls were not getting posted back.
Another option that worked for me in a particular .NET CMS (DNN) was to take Jack's fix and attach to the cbox_complete event. Posting in case someone else might find this useful.
$(document).bind('cbox_complete', function () {
$("#colorbox, #cboxOverlay").appendTo('form:first');
});
Just had a similar problem with colorbox & form, solved it this way. My problem was that the submit wasn't working since the fieldsets were stripped of the form tag; So if your form isn't posting in colorbox, try this, sending in the form id as the href for the colorbox content
$(document).ready(function () {
$('#login-trigger').click(function () {
$.colorbox({
inline: true,
href: "#login-form",
close: "×",
onOpen: function () { $('#login-content').css({ display: 'block' }); },
onClosed: function () { $('#login-content').css({ display: 'none' }); }
});
return false;
});
I am a new coder trying to experiment with jquery for my first time. I'm trying to setup a simple datalist that might be used to display comments for an item. I want a clickable link (per datalist row) to drop down a panel (per datalist row) that has comment text. so the user looks at row 1, clicks it's link to read comments, and the comments panel drops down. they scroll down and do the same for the next item.
so far i have the below code as a small test page, but it's not working. nothing happens basically. I'm hoping someone can help me out because i'm very new and just teaching myself this stuff from what I see in tutorial videos and such. I tried the clientID thing because it seems i need that to deal with the auto-generated ID's .NET will assign panels as it's rendered, but i'm not sure if i'm doing it right.
greatly appreciate your time and effort.
head section
<script src="jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('Panel1text').hide();
});
$("#<%=HyperLink1.ClientID%>").click(function() {
$("<%=Panel1text.ClientID%>").show();
});
</script>
body section
<asp:DataList ID="DataList1" runat="server" DataKeyField="cid"
DataSourceID="SqlDataSource1" Width="645px">
<ItemTemplate>
cid:
<asp:Label ID="cidLabel" runat="server" Text='<%# Eval("cid") %>' />
<br />
cuser:
<asp:Label ID="cuserLabel" runat="server" Text='<%# Eval("cuser") %>' />
<br />
blogid:
<asp:Label ID="blogidLabel" runat="server" Text='<%# Eval("blogid") %>' />
<br />
<br />
<asp:HyperLink ID="HyperLink1" runat="server">show text</asp:HyperLink>
<br />
<asp:Panel ID="Panel1text" runat="server">
<asp:Label ID="textLabel" runat="server" Text='<%# Eval("text") %>' />
</asp:Panel>
<br />
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
SelectCommand="SELECT * FROM [ocomments]"></asp:SqlDataSource>
It looks to me like you are going to have multiple elements with the id of 'HyperLink1' and 'Panel1text'. I would recommend using classes instead. Add a "class='link'" to the link element and a "class='panel'" to the panel element. Use the following CSS to initially hide the panels:
.panel { display: none; }
Then use the following jQuery to show the element:
$(document).ready(function(){
$(".link").click(function(evt){
evt.preventDefault(); // prevents the click from leaving the page
$(this).next().show(); // show the panel
});
});
You may need to fiddle with the '.next().show()' selector a bit. Not certain how ASP.NET is going to render out the elements.
Bob