i have a dragable "li" and i use ajax with asp.net. When I start the page drop-drag is working, but when I click the button it doesn't. How can I solve it? All help will be appreciated.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" >
$(document).ready(function(){
$(function() {
$("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
}
});
});
});
<div id="contentLeft" runat="server">
<ul id="mainOptions" runat="server">
<li id="recordsArray_2" runat="server">2. I am coming.</li>
<li id="recordsArray_1" runat="server">1. How areyou?</li>
<li id="recordsArray_4" runat="server">4. Which is yours?</li>
<li id="recordsArray_3" runat="server">3. This is a book.</li>
</ul>
</div>
<asp:Button ID="btnHelloWorld" runat="server" Text="Update label "
onclick="btnHelloWorld_Click" />
If you have your list inside update panel and script outside of it then $(document).ready will be fired only once when page is loaded. On this first load you set up drag and drop thing on your list.
Later you click a button and content of the update update is updated removing objects that have drag and drop plugins on them and passing fresh new ones from server. If you need to resetup drag and drop you can use page load event from asp.net ajax.
Related
I am hating asp.net...
I have a really simple web site. In my master page I have a form runat="server".. I need it because in some page I have server side controls (login control for example, or my custom control)..
Now I have a simple page, with a really simple form. And in this page, I would like to use angularjs..
What I want is that (simply) when I submit this angularjs form, I arrive on the server just when the form is valid.
In this page I have tried different solution but no solution works!
The problem I think is that I have a (angularjs) form (in the page, this is not runat="server") that is nested in asp.netform (in the master page, runat="server")..
Here what I tried:
1) remove the asp.net form from the master page and add different asp.net form just where i need, but in some page i had more than one form with `runat="server" and this is not possible:
two form runat=server
2)remove the angularjs form, don't do a submit, but manage a simple ng-click event, but in this way I go on server always, even if form is not valid...
3)leave the angularjs form a do a submit, but in this way I obtain an "invalid postback error"... I have tired this solution but it does not work:
Invalid postback error
What I simply want is to use angularjs and go on server just when form is valid... How can I do? Thank you..
UPDATE:
My MasterPage is:
<body>
<form runat="server">
...
<asp:ContentPlaceHolder ID="content" runat="server"></asp:ContentPlaceHolder>
...
</form>
</body>
My Page is:
<asp:Content ID="Content3" ContentPlaceHolderID="content" runat="server">
<script type="text/javascript" src="/Scripts/angular.min.js"></script>
<script type="text/javascript" src="/Scripts/angular-resource.min.js"></script>
<script type="text/javascript">
(function (angular) {
var public_area = angular.module("public-area", ['ngResource']);
public_area.factory("PresentaUnAmicoService", function ($resource) {
return {
piani_tariffari: $resource("/api/PresentaUnAmico/")
};
});
public_area.controller("PresentaUnAmicoController", function ($scope, PresentaUnAmicoService) {
$scope.sendInvitation = function ()
{
var invitation =
new PresentaUnAmicoService
.piani_tariffari($scope)
.$save();
}
});
})(angular);
</script>
<div data-ng-app="public-area" data-ng-controller="PresentaUnAmicoController">
<form name="presenta_amico-form" novalidate>
<table class="three_column" data-ng-class="{ 'ng-submitted' : submitted }">
... //Here there is my form
<button type="button" class="button link" id="btnSendInvitation" runat="server" data-ng-click="submitted=true" ng-submit="sendInvitation()">
<span><b>INVIA EMAIL</b></span> <img class="middle" src="/Styles/img/continue_24x24.png" />
</button>
...
</table>
</form>
</div>
</asp:Content>
I Know, It's not correct have a form inside another form.. but I am looking for a solution...
What you need in order to nest form is to use
eg:
<form runat="server">
<ng-form name="myFormName" ...>
//Your Code
</ng-form>
</form>
have a look here
I have done a lot of research before posting it in here. So, here I got few imperfections.my link
Question 1: How do I make CV button to automatically pop-up the pdf resume or cv. So after I get this done, I won't need div saying lorem as a hyperlink.
Under the navigation class:
<li>CV</li>
When I replace #cv from href with a pdf link, the whole website goes wrong.
Thats it for now. Thanks in advance!
Javascript:
<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
}
// -->
</script>
HTML :
<li><a href="" onclick="return popitup('cv.pdf')" >CV</a></li>
I have a grid with edit option ,and on edit button click i need to redirect to an edit page .
the requirement is to get this edit page as a popup with background (prev page) greyed out.
i tried modal popup, but the controls are on a separate page .
i tried modal popup with panel and a Iframe : this works..but thean another problem arises.i need to close the page on 'SAVE' or 'Cancel' butotn click .these controls would be on the edit page and not on the prev page .any help is appreciated .
Thanks
Rajat
i'll strongly suggest to use user control as it'll be more handy for you to manage and there is no point creating a whole page for it bcz modal popup uses ajax request and if you try to load the page in it then you have to do form post ... which doesn't go along either use ajax request or form post back ...
plus i was looking for the answer of ur question and i came across this article where it says:
You May use Modal Popup Extender to open some part of the page as
Popup. But there we don't have any property to open other html or aspx
page in Popup window.
http://wiki.asp.net/page.aspx/1378/open-different-page-using-ajax-modal-popup-extender-control/
and also found people asking same question as you did and the response they got is here
use Iframe or user control
Is there a way to open another page using ModalPopup Extender?
and i'll suggest to modify your design as it doesn't do any harm, instead it'll be much more helpful ...
hope this help ...
I've used the Modal Popup Control from the AJAX Control Toolkit several times with good success:
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ModalPopup/ModalPopup.aspx
If you are using bootstrap Modal then you can add an iframe into the modal body and load the url of your page inside it.
<div class="modal fade" id="modalC" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
</div>
<div class="modal-body" id="content">
<iframe src="your new page url">
</div>
</div>
</div>
</div>
Just an idea but what about using the jquery "contents()" function?
You could set an interval to look for an element within the iframe from the parent page.
(You're using .net so you could make it appear upon postback on the iframe's page).
<%# Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="admin_test" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function () {
var watchForClose = setInterval(function () {
if ($('#testIframe').contents().find('#closeModal').length > 0) {
clearInterval(watchForClose);
/* call function to close modal here..*/
alert('Close modal');
};
}, 100);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe id="testIframe" src="Default.aspx" width="300" height="300"></iframe>
</div>
</form>
</body>
</html>
The above is looking for an element within the iframe-page with an id of "closeModal". When that element appears you can make a call to the modal's close function, (just replace the alert with the call).
We can open an aspx as popup using IFrame as follows,
First take a button and provide onclick event as follows
<input id="btnSymbol" type="button" value="..." onclick="OpenMyPopUp()" runat="server"/>
Next In the page provide a "Div" tag with id as follows
<div id="MyDialog">
</div>
Then find below the two methods which take the present URL and opens a aspx page in a popup using IFRAME
function OpenMyPopUp(){openPopup('OpenPage.aspx', 530, 800, 'Page Title');}
The Four parameters are sent as follows URL,height,width,title
function openPopup(url, h, w, t) {
if (url != null && h != null && w != null && t != null) {
urlBase = location.href.substring(0, location.href.lastIndexOf("/") + 1);
url = urlBase + url;
$('#MyDialog').html('<iframe border=0 width="100%" height ="100%" src="' + url + '"> </iframe>');
$("#MyDialog").dialog({
title: t,
modal: true,
autoOpen: true,
height: h,
width: w,
resizable: false,
position: ['right-10', 'top+30'],
closeOnEscape: false,
dialogClass: "alert"
});
}}
I have 4 JQuery Tabs in an ASP.Net MVC 3 appication. All tabs display correct content when tabs are clicked. However, I want to display Login/Registration content when a user clicks the Login/Registration link at the top of the UI page. The login/reg should display underneath the 4 tabs with none of the tab content. So the tabs need to remain visible. Although, none of them would be selected.
The problem is, both the tab content and the login/registration content shows at the same time. I need only the login/reg content that is unrelated to the tabs to display. I also need all tabs to be unselected. Any help is appreciated!
<script type="text/javascript">
$(function () {
$('#tabs').tabs();
});
</script>
<div id="menu" style=" background-color:White; width:1024px; height:auto; float:left;">
<!-- Must have class= info to prevent flash of just content on refresh -->
<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all" style=" position:relative; border:0px;" >
<ul class="ui-tabs-nav">
<li><a href="#tabs-1" >Home</a></li>
<li><a href="#tabs-2" >Statistics</a></li>
<li><a href="#tabs-3" >Topo Maps</a></li>
<li><a href="#tabs-4" >FAQs</a></li>
</ul>
<div id="tabs-1" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Home/Home") </div>
<div id="tabs-2" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Statistics/Statistics")</div>
<div id="tabs-3" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Maps/Maps")</div>
<div id="tabs-4" class="ui-tabs-hide ui-tabs-panel ">#Html.Partial("../Home/FAQs")</div>
</div>
</div>
Here you have an example http://jsfiddle.net/YnZRa/1/
Steps
Add a new tab with <li
style="display:none;">Tab 4</li>
Add the content in a new div
Edit the script with this
//Edit the script this way to show the content with a click in a link
$(document).ready(function(){
var $tabs = $( "#tabs" ).tabs();
$('.goto').click(function() { // bind click event to link
$tabs.tabs('select', 3); // switch to fourth tab
return false;
});
});
Hope it works!! :)
If I understand your question correctly, you'd like to collapse your tab content when a user is trying to login/register.
First things first, you must set the tabs options to be collapsable. So, edit your tabs calls to reflect this
$('#tabs').tabs({ collapsible: true });
From here, you can attach an event handler to your login/registration click event. You'll want to do two things, 1) get the currently selected tab index and 2) fire the tab select event to collapse your tabs. It might look something like this:
$('.login').click(function () {
var tabIdx = $( "#tabs" ).tabs( "option", "selected" );
$("#tabs").tabs( "select" , tabIdx); //collapse the currently selected tab
// continue with your login/registration click event
});
i have an aspx page containing following code
<body>
<script language="javascript" type="text/javascript">
function Hidee()
{
alert(window.frames["frame1"].document.getElementById("Label1").text);
}
</script>
<form id="form1" runat="server">
<div>
<iframe id="frame1" name="frame1" class="frame" frameborder="0" src="Default4.aspx"></iframe>
<a onclick="javascript:Hidee()" style="cursor: pointer">close</a>
</div>
</form>
</body>
in Default4 page i have a label with id Label1
when i click on close button i get undefined alert message
getElementById("Label1").text
An HTMLLabelElement doesn't have a text property.
If it's a simple label that contains only a single Text node, you can say:
getElementById('Label1').firstChild.data
If it might contain more complicated text and element nodes, you'd have to iterate over them to pick up the text, or use the DOM Level 3 Core textContent property, with backup for IE which doesn't support it:
var label= frames['frame1'].document.getElementById('Label1');
var text= ('textContent' in label)? label.textContent : label.innerText;
try with:
function Hidee() {
var ifr=document.getElementById("frame1"),
cd=ifr.contentDocument || ifr.contentWindow.document;
alert(cd.getElementById("Label1").innerHTML);
}