I'm working on an asp.net c# empty web forms project. I have a SQL Server Compact database with a single table that I want to use to store information about an elements (x,y) coordinates.
The database should be updated with the new coordinates for a particular panel when the mouseup event is triggered on that panel (a div essentially). The solution doesn't need to be ajax, submitting the page will be ok.
The problem is that there is no mouseup type of event for an <asp:Panel> element and on the other side I'm not sure how I would trigger something server-side from jQuery. Getting the coordinates using jQuery is easy enough, but what would I do from there?
Are hidden inputs ok for this? Give me your best solution - I don't need to see code, just give me a better idea of what i should be doing.
Thanks!
First check what exactly asp:Panel is getting rendered in browser by firebug, suppose it renders as div then you can use jquery's .mouseup() function and bind this event to what ever element that panel is rendered. Suppose if that asp:panel is rendered as div then look this below code for sample.
<div id="asp_panel">
Click here
</div>
$('#asp_panel').mouseup(function() {
$.ajax({
url: "HelloWorld.asmx/Hello",
type: "POST",
contentType: "application/json; charset=utf-8",
data: "{}", // if your method takes any parameter pass it in here in json format.
dataType: "JSON"
success: function(msg) {
alert(msg);
}
});
});
Related
I have a custom user control that serves as a reusable ASP DropDownList that asynchronously retrieves data from an RESTful endpoint
<myControls:AjaxDropDown ID="ddlDropdown" runat="server" ServicePath="/MyWebService2.asmx/GetLetterTypes"/>
Inside the user control, I'm updating the drop down content via success in $.ajax
$.ajax({
type: "GET",
dataType: "json",
url: $('#<%=textBoxUrlPath.ClientID %>').val(),
contentType: "application/json; charset=utf-8",
async: true,
success: function(res) {
onGetLetterTypesSuccess(res);
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
}
});
How do I sync the data retrieved by $.ajax with the code behind for the user control?
The reason I'm using $.ajax rather than doing a partial update via the UpdatePanel control is due UpdatePanel's inability to have multiple asynchronous calls at a time on a single page.
I decided to not go this route of client side updating, since it's directly opposing the Web Form structure. Instead I'll settle for a synchronous solution of make this call from the code behind and populating the DropDownList before serving the Page.
I guess you can use asp.net hidden fields to store the selected values but yes it could become unnecessarily cumbersome through client side.
My project has a "HUD" on the front page that lists students that are in the process of switching course plans. It does this by doing an AJAX call to a seperate .ascx page that runs some SQL statements in C# and renders the HTML. It then delivers it back to the front page to be placed into a div named "dynamic". Here's the code on the front page that calls it:
function loadDynamic() {
var ControlName = "utilities/HUD.ascx";
$.ajax({
type: "POST",
url: "Default.aspx/Result",
data: "{controlName:'" + ControlName + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
$('#dynamic').html(response.d);
},
failure: function (msg) {
$('#dynamic').html(msg);
}
});
}
This is done in order to facilitate multiple people working on the system and being able to get live updates (there's another script that re-calls the loadDynamic() function every 10 seconds, but that's irrelevant to this problem).
However, there can be quite a few students that are trying to change course plans at one time, so in order to save space on the page, we've decided to try putting in a "...and # more records" link (an < a > tag with a javascript call in the href) that would activate another javascript function to show a seperate list with all the students and hide the list with only the few students on it (this javascript function is located on the HUD.ascx page).
<script type="text/javascript">
function loadMorePending() {
this.document.getElementById(<% =pnlMorePending.ClientID %>).style.visibility = 'visible';
this.document.getElementById(<% =pnlPending.ClientID %>).style.visibility = 'hidden';
}
</script>
Now that you have the background, here's the problem:
The second code block shown above contains references to two asp:Panels, which contain the lists, located on the HUD.ascx page. When someone clicks the "...and more" link, it should simply hide one asp:Panel and show the other. However, when it goes to call the function, it throws a "Microsoft JScript runtime error: 'ctl01_pnlMorePending' is undefined". Upon further investigation (when looking at the html source after it's been rendered in the browser), even when the 'dynamic' div is populated with the data from the HUD.ascx page, it remains empty!
<div id="dynamic"></div>
While this would explain why the pnlMorePending couldn't be found, it doesn't give me any leads on how to rectify this. How am I supposed to reference something that doesn't exist on the page? I've tried substituting the panels for divs, but it still doesn't work. The problem, I think, lies in the fact that the script transfers over to the front page fine, but it doesn't run on the HUD.ascx page where it needs to. Is there a way to do this without having 2 different HUD.ascx pages and 2 different "loadDynamic()" functions (the second being called and populated into the 'dynamic' div when the "...and more" button is pressed)?
Sorry if it's a little hard to follow. First time posting and the problem is pretty in-depth.
You are missing quotes:
this.document.getElementById('<% =pnlMorePending.ClientID %>').style.visibility = 'visible';
I have an asp:LinkButton which require following -
- call jQuery to open link url in another tab of current browser
- then call server side method to perform some logging stuff
Please guide me for a
safe (which can help avoid having 'popup blocked' messages as far as possible), I understand I shouldn't override any user personal setting for popup blocker but as it is a direct user click on asp:LinkButton, was wondering if there is a neat solution to avoid Popup blocker messages and
an efficient and user friendly way of calling server side method (where I can avoid postback)
Thank you!
Having Javascript make a call like:
window.open("http://www.google.com");
will always run the risk of being caught by a popup blocker. Is there a reason why you can't just set target="_blank" on the <a> tag?
As far as calling a server-side method without doing a postback, it's not possible. You could use JQuery's ajax function to make a call to a server side method where the page doesn't refresh, but a post-back must still occur, whether it is visible to the user or not.
Here is what that looks like:
$.ajax({
type: 'POST',
url: "http://www.yourdomain.com/pageToPostTo.aspx",
data: "your data here",
success: function(data) {
alert("It worked");
},
dataType: "json"
});
I want to Bind data to a Repeater on click of a particular Button.
I can do an ajax request via jQuery and call the method to bind the data, but on the page nothing is displayed.
This is the method I use to bind the data to the Repeater:
public void BindJobs()
{
if (RptClientDetails.Items.Count != 0) return;
RptClientDetails.DataSource = new JobBusiness().GetJobInfoClient(ClientId);
RptClientDetails.DataBind();
Response.Write("myresponse");
Response.End();
}
The above method is successfully called and the data retrieved by GetJobInfoClient. This is my ajax call:
function BindJobs() {
$.ajax({
type: "POST",
url: "Client/Default.aspx?action=bindJobs",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// Do something interesting here.
}
});
}
You do realize that RptClientDetails is a server side control? When you are binding to it in your call to BindJobs it is binding but you are not returning the generated HTML.
You need to return the Repeater's HTML after it has been bound in your AJAX. Then in your success handler, inject the HTML into the place where you want the Repeater to be displayed.
I would recommend checking out Rick Strahl's post regarding how to do this:
jQuery and ASP.NET Article Part 2
The easiest way would be to drop the AJAX all together and use an UpdatePanel. Just wrap your Repeater and your Button with an UpdatePanel and the call will be handled by the framework and the new HTML will be injected for you. It's a little heavier than doing it the jQuery/AJAX method but it takes almost 0 code.
EG:
<!-- Your other controls -->
<asp:UpdatePanel ID="yourPanel" runat="server">
<ContentTemplate>
<!-- Your Repeater HERE -->
<!-- Your Button HERE and server side make it call your bind -->
</ContentTemplate>
</asp:UpdatePanel>
<!-- rest of your controls -->
EDIT:
If you want to render the control so that you can send it back in your response you can do:
// This will get your Repeaters rendered HTML
StringBuilder sb = new StringBuilder();
StringWriter tw = new StringWriter(sb);
HtmlTextWriter hw = new HtmlTextWriter(tw);
RptClientDetails.RenderControl(hw);
string yourReatersRenderedHtml = sb.ToString();
You could then return this string in the AJAX call and then use the success method to inject it into a div or some other place holder. Honestly, the UpdatePanel is far easier and I would recommend it if your looking for the easiest way to do this and are not really worried about the performance impact of using an UpdatePanel.
You should use an UpdatePanel instead of jQuery ajax.
You might want to give jqGrid a try, if your repeater is currently creating a list/table of data. It is very easy to set up, and plays nicely with ajax calls which return JSON (and probably other formats as well, like XML). In my experience, it results in better-performing and more maintainable code overall.
I am creating Accordion menu using JQuery. I want to hide links according to the user status. How to pass values from code behind to jquery during pageload?
Eg:
UserA:
Menu header: headerA and HeaderB
UserB:
Menu header: headerB and HeaderC
I want to pass header names to jquery to hide it.
Geetha
I assume that by 'user status' you mean logged in/logged out. So, If you are using a server side templating languages, such as JSP/JSTL, you can easily do a <c:choose /> and add the links in your HTML page. Like,
<c:choose>
<c:when test='${user.loggedin == "yes"}'>
Hello, <c:out value='${user.name}' /> Log out
</c:when>
<c:otherwise>
Log in
</c:otherwise>
</c:choose>
It's best to print style="display:none;" in tags you want to hide on the server-side because otherwise they will be visible to the user while the page is loading and then disappear when the javascript is executed (especially in slow browsers). This way the link will be hidden while the page is loading as well.
E.g:
Hidden Link
I got solution by using the following code.
$.ajax({
type: "POST",
url: "NavigationMenu.aspx/UserStatus",
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
success: AjaxSucceeded,
error: AjaxFailed
});