I have the following code:
<asp:GridView ID="GridViewProducts" runat="server" AutoGenerateColumns="false" OnSelectedIndexChanged="GridViewProducts_SelectedIndexChanged" OnRowDataBound="GridViewProducts_Bound" CssClass="gridviewproducts"
DataKeyNames="ID">
<asp:BoundField DataField="id" />
<asp:BoundField DataField="nAME" />
<asp:TemplateField>
<ItemTemplate>
<input type="button" id="btnPrint" value="Print" runat="server" onserverclick="Button_ShowDetails_Click" />
</ItemTemplate>
</asp:TemplateField>
and my javascript :
$(function () {
$("#btnPrint").click(function () {
var contents = $("#dvContents").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>Bestilling</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="Content/Site2.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
});
});
And the html:
<div> ... some info to be printed ... </div>
This works if the button is outside the gridview, but now since it's performing some server side action, it's not working. I'm not getting any error messages either, it's simply just doing nothing.
Take a look at the generated HTML. You will see that the ID of button btnPrint has been renamed to something like GridViewProducts_btnPrint_0 because there are more that one in a GridView (or Repeater etc).
Better bind on a class name in the GridView, so give your buttons a class name.
<input type="button" id="btnPrint" class="PrintButton" value="Print" runat="server" />
And then bind the click to all the buttons with that class inside the GridView.
<script type="text/javascript">
$("#<%= GridViewProducts.ClientID %> .PrintButton").click(function () {
//do your stuff
});
</script>
Related
I have an aspx page that contains an ASPxComboBox. When this combo is changed after the page loads the div hides/unhides fine. In my case I load existing values from the database. I need to hide/show div based on these loaded values. If I populate the dropdown with "None" I want to hide the divs. Thanks.
< script type = "text/javascript" >
function OnSizeChanged(cbSide) {
const str = cbSide.GetText().toString();
if (str.includes('None')) {
bottomtext.style.display = "block";
lblbottomtext.style.display = "block";
} else {
lblbottomtext.style.display = "none";
bottomtext.style.display = "none";
}
}
</script>
<dx:ASPxComboBox ID="cbSide" runat="server" Width="280" ValueType="System.String">
<Items>
<dx:ListEditItem Text="DXF" Value="DXF" />
<dx:ListEditItem Text="None" Value="None" />
</Items>
<ClientSideEvents SelectedIndexChanged="function(s, e) { OnSizeChanged(s); }" />
<ValidationSettings RequiredField-IsRequired="true" Display="Dynamic">
<RequiredField IsRequired="True"></RequiredField>
</ValidationSettings>
</dx:ASPxComboBox>
<div id="lblbottomtext" runat="server">
<dx:ASPxLabel ID="lblBST" runat="server" Text="Bottom Side Text:"></dx:ASPxLabel>
</div>
<div id="bottomtext" runat="server">
<dx:ASPxMemo ID="txtBottom" runat="server" Height="71px" Width="280px"></dx:ASPxMemo>
</div>
I need to show a delete conformation box on Gridview delete. with OnClientClick confirmation box, I am showing a simple Internet explore box for delete confirmation. Is it possible to show a fancy box for this. below is my JavaScript code that exists inside the gridview code:
OnClientClick="return DeleteItem();"
Below is my Gridview
<asp:GridView ID="grdShoppingCart" runat="server" AutoGenerateColumns="false" class="ui-responsive table-stroke ss-table ui-search-result-table" DataKeyNames="CartID" AllowPaging="false" PageSize="5" GridLines="None" OnRowDataBound="grdShoppingCart_RowDataBound" OnRowDeleting="grdShoppingCart_RowDeleting">
<Columns>
<asp:BoundField DataField="CartID" Visible="false" HeaderText="CartID" />
<asp:BoundField DataField="item" HeaderText="Item" HeaderStyle-Font-Bold="true" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" ItemStyle-Width="250px" ControlStyle-CssClass="ss-row" />
<ItemTemplate>
<asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png" title='Remove' CommandName="delete" OnClientClick="return DeleteItem();" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
This is my Javascript function:
<script type="text/javascript">
function DeleteItem() {
if (confirm("Delete this Location?")) {
return true;
} else {
return false;
}
}
</script>
above code is showing this confirmation window:
I want to show something like this:
any help will be apprecaited.
It's not possible to add css to a confirm box. You can implement your own JavaScript popup.
Alternatively there are many plugins that can do this. One of the most popular JQuery plugins is JQuery UI dialog https://jqueryui.com/dialog/#modal-confirmation
As an as illustration for integrating JQuery UI Dialog with an ASP.NET Gridview, try something like:
<asp:ImageButton ID="imgbtnDelete" runat="server" ImageUrl="~/Images/delete1.png" title='Remove' CommandName="delete" class="button-delete" />
You don't need OnClientClick="return DeleteItem();"
The css class can be used as a reference for an onclick event.
JavaScript:
$(function() {
// Create click handler
$('.ui-search-result-table').on('click', 'button-delete', function(e) {
e.preventDefault($(this)); // $(this) should be a reference to imgbtnDelete
showDialog();
});
// Create the dialog popup
function showDialog(button) {
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Remove": function() {
$(button).click(); // This should click imgbtnDelete
},
Cancel: function() {
$(this).dialog("close");
}
}
});
}
});
HTML for popup
<div style="display: none;">
<div id="dialog-confirm" title="Remove Item?">
<p>Are you sure you want to remove this item?</p>
</div>
</div>
Note: This example is for illustration purposes. You will need to have a play around with your solution to get it working.
In content page I have one textbox and one button. On button click event I want to display one gridview and this gridview has some javaScript for responsive behaviour. from Gridview I have also use ModelPopupExtender (Ajax) in content page.
Page directives :
<%# Page Title="" Language="C#" MasterPageFile="~/Admin.Master" AutoEventWireup="true"
CodeBehind="UpdateUser.aspx.cs" Inherits="WirelessLCDdisplay.AdminPages.UpdateUser" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
JavaScript :
<script src="../JavaScript/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!-- // building select nav for mobile width only -->
$(function () {
// building select menu
$('<select />').appendTo('nav');
// building an option for select menu
$('<option />', {
'selected': 'selected',
'value': '',
'text': 'Choise Page...'
}).appendTo('nav select');
$('nav ul li a').each(function () {
var target = $(this);
$('<option />', {
'value': target.attr('href'),
'text': target.text()
}).appendTo('nav select');
});
// on clicking on link
$('nav select').on('change', function () {
window.location = $(this).find('option:selected').val();
});
});
// show and hide sub menu
$(function () {
$('nav ul li').hover(
function () {
//show its submenu
$('ul', this).slideDown(150);
},
function () {
//hide its submenu
$('ul', this).slideUp(150);
}
);
});
//end
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable = no">
<link href="../css/basic.css" rel="stylesheet" type="text/css" />
<script src="../JavaScript/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="../JavaScript/jquery.responsivetable.js" type="text/javascript"></script>
<script src="../JavaScript/jquery.responsivetable.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
setupResponsiveTables();
});
function setupResponsiveTables() {
$('.responsiveTable1').responsiveTable({
staticColumns: 2,
scrollRight: false,
scrollHintEnabled: true,
scrollHintDuration: 3000
});
}
</script>
TextBox and Button :
<p class="contact">
<label for="username">
Username</label></p>
<asp:TextBox ID="txtUname" runat="server">
</asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidatorusername" runat="server" ErrorMessage="User Name required"
Text="*" ControlToValidate="txtUname" ForeColor="Red">
</asp:RequiredFieldValidator>
<br />
<br />
<asp:Button ID="btnUserDetails" runat="server" Text="Button"
onclick="btnUserDetails_Click1" />
<asp:Button ID="btnReset" runat="server" Text="Reset" class="buttom" CausesValidation="False"
OnClick="btnReset_Click" />
Code Behind onClick Event :
protected void btnUserDetails_Click1(object sender, EventArgs e)
{
BindGridData();
}
private void BindGridData()
{
con.Open();
SqlCommand cmd = new SqlCommand("Select Username,FirstName,LastName,Email,PhNo,Designation,Department,RollId from tblEmployees where Username=#Username", con);
cmd.Parameters.AddWithValue("#Username", txtUname.Text);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
for (int intCount = 0; intCount < ds.Tables[0].Rows.Count; intCount++)
{
if ((Convert.ToString(ds.Tables[0].Rows[intCount].ItemArray[7])) == "0")
{
ds.Tables[0].Rows[intCount].ItemArray[7] = "User";
}
else
{
ds.Tables[0].Rows[intCount].ItemArray[7] = "Admin";
}
}
da.Fill(ds);
gvUserDetails.DataSource = ds;
gvUserDetails.DataBind();
}
**
My onClick="btnUserDetails_Click1" event is not fire
what is reason behind it??
Try changing onclick to OnClick
<asp:Button ID="btnUserDetails" runat="server" Text="Button"
OnClick="btnUserDetails_Click1" />
In asp.net there is a two type of button event 'onclick' and 'OnClick'.
onclick: This once fire javascript function.
OnClick: This one fire your code behind .CS sit server event if we add runat="server" tag on button.
NOTE: 1.On Click Event sends the request to the server and in response performs the action.
2. On Client Click is very similar to onclick function which we use to write in Javascript... that is it executes the statements in the
client side with out sending it to the server
SCRIPT
<script type="text/javascript">
$(function () {
$(".ttip").hide();
$(".txttwo").keyup(
function () {
var one = $(this).val();
$(".ttip").fadeIn().text(one);
});
$(".txttwo").blur(
function () {
var one = $(this).val();
$(".ttip").hide();
});
});
</script>
CODE:
<asp:GridView ID="GridView1" runat="server" EnableModelValidation="True">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<p class="ttip bubble" class="bubble"></p>
<asp:TextBox ID="abc" class="txttwo tipin" runat="server" ></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
FIDDLE
http://jsfiddle.net/w96LX/7/
Also it would be just great if someone can tell me how can I set the width of bubble such that it expands according to the length of text.
I get tooltip for all the textboxes because I have used class. I need to show tooltip just for the one at a time.
Just use $(this).attr("id") to get the ID of an element. Also, apped display:inline-block; width: auto; to make the bubble as big as the content: http://jsfiddle.net/w96LX/26/
Update:
I did not see an ID in your HTML, just the server side code. You will need to append the ID to a HTML element to receive it. Or you generate inline javascript, that is calling a method to set the ID.
There is a bug in my website.
Please go to the third menu from the right :
There are images which onlclick would be shown with jquery photoviewer . This works fine .
Now problems comes when , I click on the Ajaxical update button on the bottom of the page below :
After the response comes jquery photoviewer doesn't work correctly .
It opens images as separate link instead of opening inside photoviewer
.
Here is the code for the tab:
<div class="tab-pane" id="aakhir_alshur">
<asp:UpdatePanel ID="Up_GQ_Cont" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:ObjectDataSource ID="obj_Photos" runat="server"
SelectMethod="Articles_GetBy_Status_and_Type_oreder_by_Insert_Date_DESC"
TypeName="CntrlDBFunctions">
<SelectParameters>
<asp:Parameter DefaultValue="published" Name="Status" Type="String" />
<asp:Parameter DefaultValue="PHOTOS" Name="Type" Type="String" />
</SelectParameters>
</asp:ObjectDataSource>
<asp:GridView ID="ds_Photos" runat="server" AutoGenerateColumns="False"
DataSourceID="obj_Photos" AllowPaging="True" CellPadding="0"
GridLines="None" PageSize="7" ShowHeader="False">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# content( eval("Article_ID"), eval("Article_Title"), eval("Article_Subtitle"), eval("Wrote_by"), eval("Main_Photo"), eval("Main_Photo_Caption"), eval("Article_Content"), eval("Attachment"), eval("photo"),eval("video"), eval("Audio"), eval("Article_Type"), eval("Article_Date"), eval("Insert_Date"), eval("Lang"), 3) %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerSettings Visible="False" />
</asp:GridView>
<div class="last">
<asp:Button ID="btn_More_Photos" type="button" runat="server" CssClass="last" Text="المزيد" CausesValidation="False" />
<asp:Label ID="lbl_More_Photos" Visible="false" runat="server" Text="<br>لا توجد مواضيع أخرى"></asp:Label></div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="Up_GQ_Cont">
And here is what ajaxical button does :
Protected Sub btn_More_Feeds_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btn_More_Feeds.Click
DS_post.PageSize = DS_post.PageSize + 15
DS_post.DataBind()
If DS_post.Rows.Count < DS_post.PageSize Then
btn_More_Feeds.Visible = False
lbl_More_Feeds.Visible = True
End If
End Sub
Any help would be highly appreciated .
*The solution given below is working correctly . Now after ajaxical update when I click on first tab(Last Video) , the videos aren't coming there .
Your issue is that you do not update the JavaScript code after the UpdatePanel has finished. Taking the JavaScript code from your page, I changed it to:
$(document).ready(function ()
{
// set the handlers
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
// init on page load
PrettyPhotoInit();
});
function InitializeRequest(sender, args) {
}
function EndRequest(sender, args) {
// init again after the UpdatePanel
PrettyPhotoInit();
}
function PrettyPhotoInit()
{
$("a[rel^='prettyPhoto']").prettyPhoto();
/*$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true});
$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});
$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
changepicturecallback: function(){ initialize(); }
});
$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
changepicturecallback: function(){ _bsap.exec(); }
});*/
}
Your question is similar to these:
Asp.Net UpdatePanel in Gridview Jquery DatePicker
jquery accordion not re-initiating after an asp.Net postback
You might need some more changes; I do not know what other libraries you call or other JavaScript files, but this is the general idea.
Also your view state is huge. Reduce it by closing the viewstate on the controls that you do not need, and compress it.
Video initialize:
The pages use the "flowplayer" to show and play video. To make it work correctly you need to make the initialization of the flowplayer after the load of each new content through UpdatePanel.
What you do now is to call the script as you go. Here is a line from your page:
Now:
<a href='/2011108218271.flv' style='display:block;width:100%; height:201px' id='player_1184'></a>
<script> flowplayer('player_1184', '/flash/flowplayer-3.2.7.swf', {clip: {autoPlay: false,autoBuffering: true}});</script>
Each video, is following by the script that initializes it. This can not work with Ajax, neither with UpdatePanel because as you load new content the full line is like text and is not compiled by the browser when you render it on the page (the JavaScript will not run).
The correct way is to write the video tag, and when the page is fully loaded, to initialize the video. From the "initialize" documents of the Flowplayer, you need to define the video place holder as:
Must be as:
<div class="player" data-engine="flash">
<video preload="none">
<source type="video/x-flv" src="/2011108218271.flv"/>
</video>
</div>
and each video will have a line as above, and then initialize all lines as:
// install flowplayer to an element with CSS class "player"
$(".player").flowplayer({ swf: "/swf/flowplayer-.swf" });
The final code will be:
$(document).ready(function ()
{
// set the handlers
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
// init on page load
PrettyPhotoInit();
InitFlowPlayer();
});
function InitializeRequest(sender, args) {
}
function EndRequest(sender, args) {
// init again after the UpdatePanel
PrettyPhotoInit();
// init again the videos
InitFlowPlayer();
}
function InitFlowPlayer()
{
// install flowplayer to an element with CSS class "player"
$(".player").flowplayer({ swf: "/swf/flowplayer-.swf" });
}
function PrettyPhotoInit()
{
$("a[rel^='prettyPhoto']").prettyPhoto();
/*$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'light_square',slideshow:3000, autoplay_slideshow: true});
$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:10000, hideflash: true});
$("#custom_content a[rel^='prettyPhoto']:first").prettyPhoto({
custom_markup: '<div id="map_canvas" style="width:260px; height:265px"></div>',
changepicturecallback: function(){ initialize(); }
});
$("#custom_content a[rel^='prettyPhoto']:last").prettyPhoto({
custom_markup: '<div id="bsap_1259344" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div><div id="bsap_1237859" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6" style="height:260px"></div><div id="bsap_1251710" class="bsarocks bsap_d49a0984d0f377271ccbf01a33f2b6d6"></div>',
changepicturecallback: function(){ _bsap.exec(); }
});*/
}