I am using an .aspx page as cluetip bound to an anchor tag. I need to pass a parameter from anchor to this page and then call a WCF service to populate my template with returned JSON. I tried putting body onload function but that doesnt seems to work.
Thanks
Koby.
response to comment
You want to use the .mouseenter() event. This new event in 1.4 is better than .blur() which is what you will see in most examples (and probably why you can find it, a search of blur jquery popup should give you lots of examples). But mouseenter is better in the lastest jQuery
Docs: (very nice example code at the bottom of the page.)
http://api.jquery.com/mouseenter/
old version
just add the function to the onclick handler. You can do this in jquery with something like this
$(selector).click(function () {
code to do stuff (call wcf and populate)
you can use $(this) to see what was clicked on. ("passed" as you put it)
});
see fab new jQuery docs http://api.jquery.com/click/
Related
I wanna highlight the menu while scrolling the page. As we know, there are so many tutorials about this.
For example, here is one by JQUERY: http://suo.im/6q97rQ
Now the problem is it seems the Blazor server-side has forbidden some method of JQUERY that it can not run perfectly.
In the tutorial above, the scroll method never works.
I searched for something about Blazor forbidden JQUERY, most of the solution is to invoke JQUERY by the Blazor code.
However, I don't know how to get the scrolling event by the Blazor code.
Would you please help me? Thank you.
You have two options
You can use onscroll for detected you scroll page change states. Event argument types
You can call js function by using JSRuntime.InvokeVoidAsync("yourFunction");
I have a seaside application with a master-detail page. The master page has a table that consists of a list of tr records. When the user clicks a particular tr element, I want to call a detail component, which'll show the individual record's data.
Since I cannot make a tr element with callback or have it contain an anchor with a callback, I want the tr's onClick property to have some JavaScript which'll call: subcomponent . When I tried this, I got an error saying call: can only be used in callbacks and tasks.
Using ajax is a workaround, however it breaks the back button.
Edit:
More generally, I'd like to know how to set callback like behaviour for various JavaScript events.
Well, you cannot render a component in a tr element, but you could add some anchor or other element in one of its td children.
For my project I did roughly the following: I added an anchor to each row with a special css class, e.g. '.dblclick-action'. This anchor has a normal Seaside callback.
Then I bound a dblclick handler to the tr element that does something like document.location=$(this).find('.dblclick.ction').get(0).href;
I am not close to a Smalltalk image now to give you source code, but I hope you get the idea: you don't use Ajax to click the link in that particular row, but instead have the browser navigate to the callback that is associated to the link in that row. You could say you use the tr.'s dblclick handler to click the link and then let the normal Seaside stuff do its work. No magic there. You can find a little bit more info here.
If you don't want the anchor to be visible you may want to experiment with making the anchor invisible (display: none) or the like.
If you are a bit more experiment friendly, you can also try saving a callback on the server and render its url with callback id as an attribute of the tr element and use the dblclick handler to follow the link from that attribute you extract the value of an attribute in query using attr().
I forgot to answer your initial question: you cannot issue a call: from javascript. But you can use the document.location trick to re/misuse an existing link to a callback on the page using the technique I described in my first answer.
In seaside I need to do two events - callback and go to the other url (google.com) on clicking a link but I am not able to do both of them. What could be possibly wrong here? Is there any way I can do both the events?
html anchor
newTarget url: 'www.google.com';
callback: [Transcript show: 'clicked on google.com'];
with: ('www.google.com') .
Because >>callback: and >>url: both update the href attribute on an Anchor tag, you can't use both on the same anchor. You will have to solve this by writing a callback method which executes your logic, and then uses javascript to open the page in a new window.
Hope that helps!
You cannot use the default click behaviour of an anchor to accomplish this.
The code snippet below demonstrates how to do this with an ajax call that executes your action in a callback and sets the navigation to the other url as the ajax 'oncomplete' action.
html anchor
url: 'javascript:{}';
onClick: (html jQuery ajax
callback: [ ... ];
onComplete:(html javascript goto:'http://www.google.com'));
with: 'http://www.google.com'.
The snippet cancels the default click action on the anchor using the 'javascript:{}' code as the url. In some cases, I have also seen the use of '#' but in my experience that also scrolls your browser to the top. Next, it sets its proper 'click' handler that launches an ajax request, as I described before.
I have seen numerous advice on stackexchange and all over the web suggesting that I not use jquery's live function. And at this point, it is deprecated, so I'd like to get rid of it. Also I am trying to keep my javascript in one place(unobtrusive)--so I'm not putting it at the bottom of the page. I am unclear though on how to rewrite the code to avoid live for elements that don't yet exist on the page.
Within the javascript file for my site I have something like this:
$(function() {
$('button.test').live('click', function(){
alert('test');
});
});
.on( doesn't work since the element doesn't exist yet.
The button is in a page I load in a colorbox pop-up modal window. I'm not sure exactly where that colorbox window sits in the DOM but I think it is near the top.
I could use delegate and attach this to the document--but isn't the whole point of not using live to avoid this?
What is the best way to get rid of live in this case?
You can use .on() - http://api.jquery.com/on/
$(document).on("click", "button.test", function() {
alert('test');
});
If you use live() you can use die().
You can also use on() and off().
They do about the same thing but its recomended to use on.
I ended up avoiding both live and an on attached at the document level. Here's how:
Wrap all of the jquery code specific to objects in a page which loads in the colorbox window in the function like so:
function cboxready(){
...
}
The code wrapped in this function can attach directly to the objects (instead of attaching at the document level) since it will only get run once the colorbox window is open.
Then just call this function using colorbox's callback when you attach the colorbox, like so:
$('a.cbox').colorbox({
onComplete:function(){ cboxready(); }
});
I need to display content in a lightbox along with recaptcha.This was very easy except that recaptcha can be used only one per page.So, that threw the hidden div option away. Now, iam trying to render the content via js.erb using jquery's html() method. Rest of the content is rendered correctly.But, i'm having trouble rendering recaptcha.Is there a way to render recaptcha via jQuery html() method? I am using Ambethia reCaptcha.
Found a solution. I used a single Div(main lightbox container).Within that div, i added another div which wrapped <%=recaptcha_tags%>.This inner div was placed using absolute positioning.For the rest of the content, i used jquery's append() function instead of html() function.