I have a javascript function showAlert(). There is a draggable image. After the drag is stopped, we need to show the alert. Its not working How do we correct it?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="Scripts/ui.core.js" type="text/javascript"></script>
<script src="Scripts/ui.draggable.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function ()
{
$("#d1").draggable(
{
drag: function (event, ui)
{
},
stop: function (event, ui)
{
showAlert();
},
cursor: "move"
});
});
function showAlert()
{
alert("hai");
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="border:2px solid orange; width:500px; height:300px;" >
<br />
<img src="MyIMages/RedSquare.jpg" alt="" id="d1" runat="server" />
<br />
</div>
</form>
</body>
</html>
I tried with the jquery UI libraries and it worked http://jsfiddle.net/5HyyP/
The image is run on server, so the render ID is different, and the script not found it to use it: Change the javascript
$("#<%=d1.ClientID%>").draggable(
{
OR change the image, remove the run=server
<img src="MyIMages/RedSquare.jpg" alt="" id="d1" />
Related
I have an UL that I control using hide and show. The problem is that when I click on level1 it shows level2 for only a moment before it disappears, I believe this is because of a postback or something. The functionality works but it just doesnt stay like it. I need to be able to toggle the items in the list to show and hide them.
<script>
$(function(){
$('.level2').hide();
$('.level3').hide();
$('.level1').click(function () {
$('.level2').show();
return false;
$('level2').click(function () {
$('.level3').show();
return false;
$(this).find('ul').slideToggle();
});
})
}
)
</script>
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<title></title>
<link href="styles/Menu.css" rel="stylesheet" />
<script type="text/javascript">
function openNewWin(url) {
var x = window.open(url, 'mynewwin', 'toolbar=no,directories=no,location=no,menubar=no,left=0,top=0,resizable=no,status=no');
x.focus();
}
</script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css"/>
<script>
$(function(){
$('.level2').hide();
$('.level3').hide();
$('.level1').click(function () {
$('.level2').show();
return false;
$('level2').click(function () {
$('.level3').show();
return false;
$(this).find('ul').slideToggle();
});
})
}
)
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="menu" class="MenuBar">
<asp:Menu ID="Menu1" runat="server" CssClass="mainmenu" StaticDisplayLevels="3" Target="_blank" StaticEnableDefaultPopOutImage="False" StaticSubMenuIndent="0px" >
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="level1"/>
<asp:MenuItemStyle CssClass="level2"/>
<asp:MenuItemStyle CssClass="level3" />
<asp:MenuItemStyle CssClass="level4" />
</LevelMenuItemStyles>
<StaticMenuItemStyle CssClass="staticItem" />
</asp:Menu>
</div>
</form>
</body>
</html>
When a user wants to upload a file (currently there are 4 places in the form that allow for this), they first have to “Choose File” and then they have to click on “Upload”. If they miss the 2nd "Upload" step, there is no indication to them or us.
Is there a way to combine the “two-step” process to a single step (select and upload).
Use this link to know more about it
http://www.c-sharpcorner.com/UploadFile/2b481f/uploading-a-file-in-Asp-Net-web-api/
And you can also use this code
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="fileupload1" runat="server" />
<asp:Button ID="btn" runat="server" OnClick="btn_Click" Text="upload" style="display:none" />
</div>
<script type="text/javascript">
var isfirst = true;
$(function () {
$('#<%= fileupload1.ClientID %>').on('change', function (e) {
console.log('change triggered');
$('#<%= btn.ClientID%>').trigger('click'); // trigger the btn button click which i have hidden using style='display:none'
});
});
</script>
</form>
</body>
Code behind
protected void btn_Click(object sender, EventArgs e)
{
//TODO
}
I have one dropdownlist in my asp.net web application. I want to set visibility for that dropdownlist in the Client side javascript such as visible=true or false. Can any one know solution for that means it will really appreciated.
Thank you..
Use jquery .show() and .hide() methods. You will need to find the dropdownlist using the clientid value like so:
$('#<%= myDropDown.ClientID %>').show() // shows dropdown
$('#<%= myDropDown.ClientID %>').hide() // hides dropdown
This is a sample with Javascript alone:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" language="javascript">
function doToggle() {
var ddl = document.getElementById("<%Response.Write(DropDownList1.ClientID.ToString()); %>");
if (ddl.style.display == "none") {
ddl.style.display = "block";
}
else {
ddl.style.display = "none";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
</asp:DropDownList>
<input id="Button1" onclick="doToggle();" type="button" value="Toggle" />
</div>
</form>
</body>
</html>
Good luck!
I have an asp.net panel with a style which hides it and I'm using JQuery to slideToggle the panel using a hyperlink. This works fine. However, if I add a button on the page that causes a postback the panel will default back to hidden. I understand why this is happening but what is the best way to keep the panels visibility state when a postback occurs?
<head runat="server">
<title></title>
<script type='text/javascript' src="jquery-1.4.1.min.js">
</script>
<style type="text/css">
.panel
{
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$("#Link1").click(function(evt) {
evt.preventDefault();
$('#panelText').slideToggle('slow');
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HyperLink ID="Link1" runat="server" NavigateUrl="#">SlideToggle
</asp:HyperLink><br />
<asp:Panel ID="panelText" runat="server" CssClass="panel">
Some text</asp:Panel>
<asp:Button ID="button1" runat="server" Text="Postback" />
</form>
</body>
</html>
Here's how I solved my problem...
<head runat="server">
<title></title>
<script type='text/javascript' src="jquery-1.4.1.min.js">
</script>
<style type="text/css">
.panel
{
display: none;
}
</style>
<script type="text/javascript">
$(function() {
$("#Link1").click(function(evt) {
evt.preventDefault();
$('#panelText').slideToggle('slow');
if ($('#panelText').hasClass('panel')) {
$('#PanelState').attr('value', 'true');
} else {
$('#PanelState').attr('value', 'false');
}
});
});
$(document).ready(function() {
if ($('#PanelState').attr('value') == 'false') {
$('#panelText').addClass('panel');
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:HiddenField ID="PanelState" runat="server" Value="false" />
<asp:HyperLink ID="Link1" runat="server" NavigateUrl="#">SlideToggle
</asp:HyperLink><br />
<asp:Panel ID="panelText" runat="server">
Some text</asp:Panel>
<asp:Button ID="button1" runat="server" Text="Postback" />
</form>
</body>
</html>
Add a hidden field in form:
<asp:HiddenField id="hdnPanelState" runat="Server" value="false" />
and modify the JS function:
<script type="text/javascript">
$(function() {
$("#Link1").click(function(evt) {
evt.preventDefault();
$('#panelText').slideToggle('slow');
//YOU WILL ALSO NEED TO CALCULATE IF SHOWING PANEL OR HIDING
$("#hdnPanelState").attr("value","true");//Store Value
});
});
</script>
I have the following test ASPX page:
<head runat="server">
<title></title>
<script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.6.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
var dlg = $("#dialog").dialog({
bgiframe: true,
autoOpen: false,
height: 300,
modal: true,
buttons: {
'Ok': function() {
__doPostBack('TreeNew', '');
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
},
close: function() {
dlg.parent().appendTo(jQuery('form:first'));
}
});
});
function ShowDialog() {
$('#dialog').dialog('open');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="TreeNew" runat="server" Text="New"
OnClientClick="ShowDialog();return false;" onclick="TreeNew_Click"/>
<asp:Label ID="Message" runat="server"></asp:Label>
<div id="dialog" title="Select content type">
<p id="validateTips">All form fields are required.</p>
<asp:RadioButtonList ID="ContentTypeList" runat="server">
<asp:ListItem Value="1">Texte</asp:ListItem>
<asp:ListItem Value="2">Image</asp:ListItem>
<asp:ListItem Value="3">Audio</asp:ListItem>
<asp:ListItem Value="4">Video</asp:ListItem>
</asp:RadioButtonList>
</div>
</div>
</form>
</body>
</html>
I use dlg.parent().appendTo(jQuery('form:first')); on close function to retreive the values from RadioButtonList.
It works well but before the page do the PostBack the div "Dialog" moves below the New button. Why?
I think that this is caused because you are calling:
dlg.parent().appendTo(jQuery('form:first'));
at the close callback. This will move the dialog. Why don't you call this immediately after creating the dialog?
try chaning
$(function() {
to
$(document).ready(function() {
also check where it fails with some sort of javascript debugger opera got builtin and FireFox got FireBug..