I'm trying to initiate a postback invoking the click function of a server-running element, as to run some C# code, in the event of a particular jquery dialog button click.
I am using a modal dialog with buttons as per this jQuery UI example. I have attempted using all of the different answers for javascript/jquery postback invocations in this question.
I've set a couple of breakpoints in my C# code to see if these postbacks are getting called, but nothing is getting hit.
I have this dummy element in my ascx file to use:
<a id="anchorId" runat="server" onclick="return true;" onserverclick="TryLogin"></a>
I've attempted to get this postback to occur a few different ways:
$("#anchorId").click(); //just simply does nothing
document.getElementById("anchorId").click(); //This one gives me a null javascript error
$("document").getElementById("#anchorId").click(); //tells me [object] doesn't have a getElementById
__doPostBack('<%=anchorId.UniqueID %>', '');//Also does nothing in the jQuery code, but works in standard javascript code
Lastly I did try retrieving the unique ID in the code behind as:
string id = anchorId.UniqueID;
and replaced in the javascript this way:
__doPostBack('Softening_Main$anchorId', '');//Still does nothing, and no javascript error
I really need some help here, any ideas?
There are couple of issues in your code.
$("document") will not select document instead will look for document tag element on the page. You should use $(document) removing the quotes.
Also getElementById is a JavaScript method of document object which is used to find element by id. When you use getElementById don't specify # in the id. # is used by jQuyer to differentiate between various selectors.
Remove inline onclick="return true;" from anchor and try this.
$("#anchorId").click(function(e){
__doPostBack('<%=anchorId.UniqueID %>', '');
return false;
});
Related
I want to pull the onclick information from an a tag. I know how to do this normally and I've confirmed it works via the console. However, it returns null when attempted through an extension. Is this possible via an extension and if so: what strange method must be employed?
Example:
On the page: text
I'd like to be able to grab that something(stuff,otherstuff).
However, pure JS didn't work: String(document.getElementsByTagName("a")[10].onclick)
And neither did jQuery: String($(".tableclass").find("tbody").find("a")[10].onclick)
Both of the above working when entered into the console.
First of all, you can never read the onclick property that was set by a page because extension code runs in an isolated scope.
Secondly, even if the code was not isolated, the onclick property of <a onclick="foo"></a> may not have the value foo you are expecting. That is because a property is not the same thing as an HTML attribute.
Therefore, if you want to access the string value of an onclick attribute you can and should use linkElement.getAttribute('onclick'); instead.
Is this what you mean, that you want to change a href of the link? You can do it like this:
html:
<a href='foo' class='link-to-swap'>link</a>
javascript:
$(document).ready(function(){
$('.link-to-swap').click(function(e){
e.preventDefault();
var grabbedData = $(this).attr('data-id')
$(this).attr('href',grabbedData)
return false
})
})
here is the fiddle:
https://jsfiddle.net/cp6x9pf5/1/
I have hyperlinks with href="#" that are assigned to client-side javascript event handlers. When making requests via ajax, these links behave as expected (via "click" events) but when I occasionally use a link generated by the Rails link_to helper these href values suddenly become corrupted: href="#" becomes href="users/1/photo/4" for example. Every link on the page picks up the same value!
When I use Chrome's Inspect Element, it reveals that the rendered href value remains href="#", yet rolling over it reveals it is pointed to the unwanted url. The event listeners fail. Is this turbolinks forcing my link placeholders to take on unwanted values? Why is rails messing with my links?
Here is typical javascript code assigning an event handler:
Menu.prototype.activatePhotosLink = function() {
var self = this;
// ======= get all user photos =======
$("#main-nav").on("click", function(){
event.preventDefault();
self.getUserPhotos();
});
}
Here's how the link looks via Chrome's Inspect Element with href="#":
photos
I tried to fix this problem with data-no-turbolink="true" but that did not work. Meanwhile, here is what I see in the browser's "link to tooltips" on rollover:
localhost:30000/users/1#
Why not href="#"? Thank you for any thoughts!
The path is not corrupted. It should be the path of the page you are at with the hashtag appended to it. This is not related to Rails nor JavaScript, but rather a feature in HTML. In HTML, if you want to create an anchor link to a certain element in the page, you pass its id to the href. You can read more about it here.
If you don't want a url to appear when you roll over the link, you can use href='javascript:void(0)'
I have some AJAX, it pulls in the following, which is added to a div using innerHTML.
Add
Then when I press the "Add" link, it will add "TEST" into textareax.
If I have it in the HTML of the document from the start, it works perfectly, but when I pull it in using AJAX and using innerHTML to add it to the div the "Add" link does not work.
I think it might be a problem because it has javascript in it and I am just adding it using innerHTML, but don't know how to solve this.
\r\n is a newline, but is parsed by JavaScript already. The innerHTML will be set to:
<a href="#" onclick="javascript:document.getElementById('textareax').value += '
TEST';">Add</a>
which does not work (a syntax error; JavaScript strings cannot have literal newlines).
You'd need to double-escape with \\r\\n so that it becomes \r\n when it is parsed by JavaScript (\\ becomes \ and the r will be unaffected). Then the \r\n will be kept in the onclick handler, so that the newline is indeed added to the textarea: http://jsfiddle.net/r6bhE/.
onclick="javascript:document[...] is incorrect syntax. The onclick attribute is a javascript event, and doesn't need the javascript scheme indication. You can just place the script directly into the attribute value:
Add
It's also a good idea to return a value when intercepting mouse events (true to pass the event on, false to cancel it).
In a Rails project I need to keep a link_to_remote from getting double-clicked. It looks like :before and :after are my only choices - they get prepended/appended to the onclick Ajax call, respectively. But if I try something like:
:before => "self.stopObserving()"
the Ajax is never run. If I try it for :after the Ajax is run but the link never stops observing.
The solutions I've seen rely on creating a variable and blocking the whole form, but there are multiple link_to_remote rows on this page and it is valid to click more than one of them at a time - just not the same one twice. One variable per row declared outside of link_to_remote seems very kludgey...
Instead of using Prototype I originally tried plain Javascript first for this proof of concept - but it fails too:
click
just puts up an alert when clicked - the lambda here does nothing? This next one is more like the desired goal and should only alert the first time. But instead it alerts every time:
click
All ideas appreciated!
I got this to work using jQuery:
link.click(function() {
alert('foo');
$(this).unbind('click');
$(this).click(function() {
return false;
});
return false;
})
So surely you can accomplish the same with plain old javascript.
The benefit of doing this with jQuery is that it would be easy to add a class to all links that you want to behave this way and in your application.js you could assign this behavior to all links of that class.
Of course, you can do all that with plain old JavaScript too... jQuery just makes it easier.
i have a link_to_function that shows a hidden div. now i would like to hide this div if the user clicks out of this div(onBlur or onclick). when should i call this function and how? this is my function that shows the hidden div:
<%= link_to_function "ShowHorse", "$('horsePic').show();" :class =>"links_02"%>
shoud it be from inside this function? or should i call an external action with link to remote to look after events on the site? i would be able to use function onblur if it references a form element(text_field or sth). but i dont know how or when to put code for just div element. i was trying sth like:
:onclick=>"if($('loginContainer').onClick) {} else {$('loginContainer').hide}"
i dont know much javascript so i am kind of a lost here. was checking google but wasnt able to find anything useful. any help would be greatly appreciated!
It appears that you're using Prototype, so you can use the built-in JavaScript helpers in Rails to do this for you.
One thing to be careful with in JavaScript versus Ruby is that functions are not called unless the brackets are included. Without the brackets you get a reference to the function instead.
// Check to see if a function is defined
if ($('something').onClick)
true;
// Check to see if a defined function returns a true value by calling it
if ($('something').onClick())
true;
Typically you can just introduce functions in your link_to definition as required.
You should look at defining a click event on the whole body of the page. If a click isn't caught on the div you're watching, close the div. You might need to look at capturing and bubbling javascript events, to get the right click target.
http://www.quirksmode.org/js/events_order.html Very good resource for understanding how a click will move through your page.