I'm a developer of 5 years, so I am no stranger to asp.net, but I am new to JQuery and JSON, so maybe that's why I'm not getting it. I followed the tutorial here about how to successfully login with facebook, and it works!
http://www.codeproject.com/Articles/450535/Using-Facebook-login-in-ASP-NET-application-withou
but my problem is that I am making a "comments" system on my site, and I want to user to type in their comment, then right below it click the "login with facebook" button, then when it successfully logs in, have it append the comment to the list of comments.
My only problem is I don't know how to get the Login to trigger C# code on the server side. Am I missing something here in order to hook into the "login successful" event of facebook?
I suspect it has something to do with these lines of code here:
enter codedd here
// This method will be called after the user login into facebook.
function OnLogin(response) {
if (response.authResponse) {
FB.api('/me?fields=id,name,gender,email,birthday', LoadValues);
}
}
//This method will load the values to the labels
function LoadValues (me) {
if (me.name) {
document.getElementById('displayname').innerHTML = me.name;
document.getElementById('FBId').innerHTML = me.id;
document.getElementById('DisplayEmail').innerHTML = me.email;
document.getElementById('Gender').innerHTML = me.gender;
document.getElementById('DOB').innerHTML = me.birthday;
document.getElementById('auth-loggedin').style.display = 'block';
}
}
or here:
<div id="fb-root"></div> <!-- This initializes the FB controls-->
<div class="fb-login-button" autologoutlink="true" scope="user_birthday,email" >
Login with Facebook
</div> <!-- FB Login Button -->
<!-- Details -->
<div id="auth-status">
<div id="auth-loggedin" style="display: none">
Hi, <span id="displayname"></span><br/>
Your Facebook ID : <span id="FBId"></span><br/>
Your Email : <span id="DisplayEmail"></span><br/>
Your Sex:, <span id="Gender"></span><br/>
Your Date of Birth :, <span id="DOB"></span><br/>
</div>
</div>
any clues or help would be greatly appreciated. I'm a very long time lurker (maybe 10 years?) , first time poster.
This is the first thing that comes to my mind it is not a perfect solution but it might work in this scenario. In short trigger a PostBack with a dummy button clicking it with Javascript at the correct place(not by user's click).
1) Put an asp.net button (runat=server) somewhere on your page. It will be a dummy button just to trigger a postback so make its width = 0 or something like that. Lets call it btnDummmy. Make ClientIDMode=static.
2) Attach a server side event to btnDummy. Put your server-side comment save logic there. The comment should be in a asp.net textbox (runat=server).
3) Put btnDummy also in an updatePanel. (So that you do not lose the span values, displayname, FBId, blabla)
4) When you login with Facebook at the end of LoadValues(me) before returning call btnDummy.click();
This should do the trick...
Related
Here's the page I'm working on:
http://mcstevenswholesale.com/catalog.aspx
The textbox below the catalog allows you to skip to a specific page in the catalog. However, if you hit enter in that textbox rather than clicking the "Go" button, it submits the search function in the upper left column. I thought this would be because the entire page is located within an ASP form, but I don't have the same problem with the email signup box on the right side.
I have tried putting the page number textbox into its own HTML form, and have tried changing the button to an image, a button, and a submit input. None of these have worked. I don't want the page to reload, just the page to flip. I'm fairly new to ASP, so I'm sorry if I'm making a very obvious mistake.
Here's the code for the page number textbox (goToPage is a JS function that flips the catalog page):
<div id="goToPage">
Go to Page:
<input id="pageTextbox" type="text" onkeydown="if (event.keyCode == 13) goToPage();"></input>
<a onclick="goToPage()" href="#"></a>
</div>
The onkeydown makes the page change work, but it still fires the search function. How do I prevent it from doing that?
The default behavior of the enter key is to submit the current form in most (if not all) browsers.
You need to suppress the enter key's default behavior. The proper way to suppress the default behavior is to have the event handler return false.
If goToPage() returns false the simplest solution is the following:
onkeydown="if (event.keyCode == 13) return goToPage();"
If not you can add return false after the call to goToPage();
onkeydown="if (event.keyCode == 13) { goToPage(); return false} "
That will cause the enter key to not submit the form when pressed within the page number text box. If you want to disable it for the entire page see the following:
http://webcheatsheet.com/javascript/disable_enter_key.php
https://stackoverflow.com/questions/6017350/i-need-javascript-function-to-disable-enter-key
Try this:
onkeydown="if (event.keyCode == 13) { goToPage(); return false; }"
This topic may have lots of code out there, BUT I seem to be looking for a variation that isn't based on history, is it possible...
So I have this code...
<script type="text/javascript">
var pages=new Array();
pages[0]="listItem1.html";
pages[1]="listItem2.html";
pages[2]="listItem3.html";
pages[3]="listItem4.html";
pages[4]="listItem5.html";
var i=0;
var end=pages.length;
end--;
function changeSrc(operation) {
if (operation=="next") {
if (i==end) {
document.getElementById('the_iframe').src=pages[end];
i=0;}
else {
document.getElementById('the_iframe').src=pages[i];
i++;}}
if (operation=="back") {
if (i==0) {
document.getElementById('the_iframe').src=pages[0];
i=end;}
else {
document.getElementById('the_iframe').src=pages[i];
i--;}}}
</script>
</head>
<body>
<ul id="menu" role="group">
<li>Welcome
<ul>
<li>Ease of Access Center</li>
</ul>
</li>
<li>Getting Started
<ul>
<li>Considerations</li>
<li>Changing Perspective</li>
</ul>
</li>
</ul>
<iframe id="the_iframe" scrolling="no" src="listItem1.htm" name="ifrm" style="width:540px;></iframe>
<input type="button" onClick="changeSrc('back');" value="Back" />
<input type="button" onClick="changeSrc('next');" value="Next" />
and if I click on the next or prev button, it does move somewhere,but...
let's say my iframe is showing listItem2, then I click on listItem4 in the menu (there is a tree menu involved), then I want to go to listItem3 and I hit the back button...instead of going to listItem3, it goes to listItem2 (or someplace that is not back a page from 4 to 3).
It appears that the buttons are navigating based on history?...but I just want a straight forward or backward movement...I don't want my buttons to have this browser-type functionality...If I'm on listItem4 and hit the next button, I want it to go to listItem5.
Many Thanks For Any Help!
Okay, I'll try the code, but don't down-rate it if its off.
This is the function that you could put before the changeSrc function:
function UpdateI(value) {i = value}
This the one click event that you would add to your links in the a tag. Off course, the 4 that is sent the function in this case, would be changed to whatever is appropriate for whatever ListItem is being referenced:
onClick ="UpdateI(4)"
Does this help you?
I don't understand your code here:
document.getElementById('the_iframe').src=pages[i];
i++;
If that is going to advance to the next element AND display it, you need to increase i first. Perhaps I'm just missing something, though.
I think your problem is that if the user clicks one of your direct links, rather than "next" and "previous" i in your code is not getting updated. So if your on page 2 and click the link for 4 and then click back, i is currently 2 and not 4. Hope that helps you. Be sure mark it as the answer if it does.
add an on click event to each of the link tags that would call a single function just like you have in the input tags. Have the function take an input of some number and assign that number to i. That should do it. Sorry I cant show any source code, JAVASCRIPT is not my language. I can read it but I wouldn't dare to write code from scratch. Hope this helps you.
I inherited some web shop project (ASP.NET 3.5, Webforms, Visual Studio 2008 PRO).
On one page I have MaintainScrollPositionOnPostback set to true.
When shopping cart (user control loaded in master page) is empty, then asp.net is not generating Javascript code required for scroll position. When I add some items to the cart, then everything works fine.
Can you give me any advice how to find part of the code which is responsible for this issue?
I don't have an access to the 3rd party profilers.
Are you utilizing UpdatePanels in that specific page?
If Yes, following article may give you some direction:
http://basgun.wordpress.com/2008/06/09/maintain-scroll-position-updatepanel-postback/
If No, this one may assist:
Javascript: Maintaining Page Scroll Position
Here is the code from that article:
// function saves scroll position
function fScroll(val)
{
var hidScroll = document.getElementById('hidScroll');
hidScroll.value = val.scrollTop;
}
// function moves scroll position to saved value
function fScrollMove(what)
{
var hidScroll = document.getElementById('hidScroll');
document.getElementById(what).scrollTop = hidScroll.value;
}
</script>
</head>
<body onload="fScrollMove('div_scroll');" onunload="document.forms(0).submit()";>
<form>
<input type="text" id="hidScroll" name="a">< /br>
<div id="div_scroll" onscroll="fScroll(this);"
style="overflow:auto;height:100px;width:100px;">
.. VERY LONG TEXT GOES HERE
</div>
</form>
</body>
</html>
Hope one of these links help!
I been waiting for sometime now to bring my Asp.net Preview 4 project up to snuff, totally skipping Preview 5 just because I knew I would have some issues.
Anyhow, here is the question and dilemma.
I have a few areas on the site which I have an ajax update type panel that renders content from a view using this technique found here. AJAX Panels with ASP.NET MVC
This worked fine in preview 4 but now in the beta I keep getting this ..
Sys.ArgumentNullException: Value cannot be null Parameter name eventObject
It has been driving me nuts...
My code looks like this
<% using (this.Ajax.BeginForm("ReportOne", "Reports", null, new AjaxOptions { UpdateTargetId = "panel1" }, new { id = "panelOneForm" })) { } %>
<div class="panel" id="panel1"><img src="/Content/ajax-loader.gif" /></div>
<script type="text/javascript">
$get("panelOneForm").onsubmit();
</script>
so basically what its doing is forcing the submit on the form, which updates panel1 with the contents from the view ReportOne.
What am I missing? Why am I getting this error? Why did they go and change things? I love MVC but this is making me crazy.
Unfortunately, just calling submit() won't fire the onsubmit event so the MVC Ajax script won't run. When the browser calls onsubmit() for you (because the user clicked the submit button), it actually provides a parameter called event (which you can see if you look at the Html outputted by the Ajax helper).
So, when you call onsubmit() manually, you need to provide this parameter (because the MVC Ajax code requires it). So, what you can do is create a "fake" event parameter, and pass it in to onsubmit:
<% using (this.Ajax.BeginForm("ReportOne", "Reports", null, new AjaxOptions { UpdateTargetId = "panel1" }, new { id = "panelOneForm" })) { } %>
<div class="panel" id="panel1"><img src="/Content/ajax-loader.gif" /></div>
<script type="text/javascript">
$get("panelOneForm").onsubmit({ preventDefault: function() {} });
</script>
The important part is the { preventDefault: function() {} } section, which creates a JSON object that has a method called "preventDefault" that does nothing. This is the only thing the MVC Ajax script does with the event object, so this should work just fine.
Perhaps a longer term fix would be if the MVC Ajax code had a check that simply ignored a null event parameter (wink #Eilon :P)
Having some irritating problems relating to this issue. Hope someone here can help me out.
var event = new Object();
function refreshInformation(){
document.forms['MyForm'].onsubmit({preventDefault: function(){} });
}
This is my current code, it works fine for updating the the form. Problem is the "var event" disrupts all other javascript events, if I have for example this:
<img src="myimg.gif" onmouseover="showmousepos(event)" />
its not the mouse event that's sent to the function, instead it's my "var event" that I must declare to get the onsubmit to function properly.
When using only onsubmit({preventDefault: function(){} } without the "var event" I get the Sys.ArgumentNullException: Value cannot be null Parameter name eventObject
I've also tried using submit() this does a full postback and totally ignores the ajaxform stuff...at least in my solution.
Hmm...I realize this might be a little confusing, but if someone understands the problem, it would be great if you had a solution as well. =)
If you need more info regarding the problem please just ask and I'll try to elaborate som more.
I believe that calling someFormElement.onsubmit() simply invokes the event handlers registered for that event. To properly submit the form you should call someFormElement.submit() (without the "on" prefix).
I don't think we changed anything in the AJAX helpers' behavior between ASP.NET MVC Preview 4 and ASP.NET MVC Beta.
Thanks,
Eilon
Details:
Only disable after user clicks the submit button, but before the posting back to the server
ASP.NET Webforms (.NET 1.1)
Prefer jQuery (if any library at all)
Must be enabled if form reloads (i.e. credit card failed)
This isn't a necessity that I do this, but if there is a simple way to do it without having to change too much, I'll do it. (i.e. if there isn't a simple solution, I probably won't do it, so don't worry about digging too deep)
For all submit buttons, via JQuery, it'd be:
$('input[type=submit]').click(function() { this.disabled = true; });
Or it might be more useful to do so on form submission:
$('form').submit(function() {
$('input[type=submit]', this).attr("disabled","disabled");
});
But I think we could give a better answer to your question if we knew a bit more about the context.
If this is an ajax request, then you'll need to make sure you enable submit buttons again on either success or failure.
If this is a standard HTTP form submission (aside from disabling the button with javascript) and you're doing this to safe guard from multiple submissions of the same form, then you ought to have some sort of control in the code that deals with the submitted data, because disabling a button with javascript might not prevent multiple submissions.
You could do something like this:
$('form').submit(function() {
$(this)
.find(":submit,:image") // get all the submit buttons
.attr({ disabled : 'disabled' }) // disable them
.end() // go back to this form
.submit(function() { // change the onsubmit to always reject.
return false;
})
;
});
Benefits of this:
It will work with all your forms, with all methods of submission:
clicking a submit element
pressing enter, or
calling form.submit() from some other code
It will disable all submit elements:
<input type="submit"/>
<button type="submit"></button>
<input type="image" />
it's really short.
I'm guessing that you don't want them to hit the submit button more than once while the submit is processing.
My approach has been to just hide the button entirely and display some sort of status indicator (animated gif, etc) instead.
Here's a very contrived example (it's technically in prototype but I think a jquery version would be very similar):
<html>
<head>
<script type="text/javascript" src="include/js/prototype.js"></script>
<script type="text/javascript">
function handleSubmit()
{
$('submit').hide();
$('progressWheel').show();
return true;
}
</script>
</head>
<body>
<img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/>
<input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/>
</body>
</html>
in JQuery:
$('#SubmitButtonID').click(function() { this.disabled = true; });
On thing to be aware of is that you should not disable the button before the form is submitted. If you disable the button using javascript in the OnClick event you may lose the form submit.
So I would suggest you hide the button using javascript by placing an image above it or by moving the button out of the visible range. That should allow the form submit to proceed normally.
There are three ways to submit a form that should be covered. Use both David McLaughlin's and Jimmy's suggestions. One will disable the submit button form element while the other disables the basic HTML form submit.
For the third, these won't disable Javascript from doing a form.submit(). The OnSubmit="return false" method only applies when a user clicks the submit button or presses Enter in a input form element. Client side scripting will need to be handled as well.
How about
Code behind:
btnContinue3.Attributes.Item("onclick") = "disableSubmit()"
Javascript:
function disableSubmit() {
document.getElementById('btnContinue3').onclick = function() {
alert('Please only click once on the submit button!'); return false;
};
}
This doesnt solve the problem of what happens if the postback times out, but other than that it worked for me.