Hyperlink Rewriting with Javascript/Jquery - javascript

Here's what I"m trying to do. I have a hyperlink like this on my page:
Whatever Page Here
When a user clicks the link I want to grab that click. If it's a link I don't want them to click (like something that doesn't match the format http://www.wikipedia.com/wiki/xxxxx) I want to pop a message box. Otherwise I want to funnel them through my Mvc Controller instead. like this:
//Category is the "Whatever_Page_Here" portion of the Url that was clicked.
public ActionResult ContinuePuzzle(string category)
{
}
Any suggestions?

Start by intercepting all the click events:
$(function() {
$("a").click(ClickInterceptor);
});
function ClickInterceptor(e)
{
// code to display popup or direct to a different page
if (redirect)
{
var href = $(this).attr("href").split("/");
location.href = "http://mydomain.com/controller/" + href[href.length - 1];
}
return false;
}
The "return false;" tells the anchor not to fire the navigate.

If you want to select all the a tags which do not start with "http://http://www.wikipedia.com/wiki/" you would use:
$("a").not("a[href^='http://http://www.wikipedia.com/wiki/']")

Related

Consume link events on jxbrowser

I want to catch and consume (prevent redirection) link events on the teamdev's jxbrowser. Suppose the content is
link
When the user clicks the link, I want to be informed that the user has clicked the link and get the URL, but I do not allow the page change (link should be consumed).
The problem is, the links in the quotes of the anchor tag do not start with any protocol (http:// or https:// and do not end with any .html or etc). For example the link is in the form of:
<a href="foo">link<a>
and we want when user clicks on the link, we get informed that the clicked string is foo. I know, the links in this a tag are not valid and not well formed due to the standarts, but the contents are generated by using some specific busines rules and then set to the JxBrowser. And we can not change the way the links are created.
With the example below, we get about:blank for the url, which is not the desired info. If we change to
link
then it works fine but we can not modify the links (content) as I have mentioned before.
browser.addLoadListener(new LoadListener () {
public void onStartLoadingFrame(StartLoadingEvent arg0) {
System.out.println("link click occured " + arg0.getValidatedURL());
arg0.getBrowser().stop();
}
);
LoadHandler allows you to handle any activity related to loading. Using LoadHandler you can determine the load type and cancel any load events. Here is an example:
browser.setLoadHandler(new DefaultLoadHandler() {
#Override
public boolean onLoad(LoadParams params) {
if (params.getType() == LoadType.LinkClicked) {
System.out.println("Link clicked: " + params.getURL());
return true;
}
return false;
}
});

How to track a user coming from a certain URL to trigger a function using JavaScript

I am wanting to trigger a function that will display all events but only when the user comes from a URL with /events/ in it.
Right now I am using referrer to take the user back to the page and to scroll to the last event they clicked on. But if the event they clicked on has to be loaded by clicking 'view more' it will just scroll to the bottom of the page. I need all the events to collapse when the user hits the return button.
Any help is much appreciated!
You can achieve what you're trying to do with localStorage:
if(!!localStorage.getItem("isEventsInPath")) {
// user came from /events
}
var isEventsInPath = document.location.pathname.includes("/events/");
localStorage.setItem("isEventsInPath", isEventsInPath);
// keep the order intact!
You can use the following to parse the URL and call your function:
$(document).ready(function(){
if(document.location.pathname.includes("/events"))
{
//CALL YOUR FUNCTION
}
});
This parses the path name and checks if /events exists in it.

How to change the function handlers for a link in Jquery?

So in a particular page I serve a lot of content. Now user can click on the bookmark button for a piece of content and it should call the bookmark function which communicates necessary information to the server. Next time when the user clicks on the link it should call the unbookmark function which does the converse of what bookmark function does and the next time the user clicks on this link, it should call the bookmark function. Flip flop flip flop....
My link for the bookmark button kinda looks like this.
<a id = cno class = 'bookmark_button'></a>
I did come up with a solution for this by counting clicks for a particular cno using a global array. This is a very inconvenient thing cause the user has the option to refresh content in which case I have to reset all the counters! So I was wondering if there was an elegant solution to this. So that I could change the click event handler on the fly.
Edit:
Bookmark function code:
function bookmark(cno){
result = server_comm('bookmark', cno);
if(success){
//change the icon of the bookmark button;
}
else{
// display error
}
}
Your server should render links depend on the bookmark state like below.
HTML
<!-- a bookmarked link looks like this -->
<a id="cno" class="bookmark_button bookmarked"></a>
<!-- a new link looks like this -->
<a id="cno" class="bookmark_button"></a>
Javascript
jQuery(function($) {
$(".bookbmark_button").click(function() {
var btn = $(this);
if(btn.is(".bookmarked")) {
btn.removeClass('bookmarked');
// call undo bookmark here
} else {
btn.addClass('bookmarked')
// call do bookmark here
}
});
});
Make an AJAX call to the server, and keep the state (on/off states of the book marks) at the server. Of course this will increase the communication with your server more but it will be more reliable.
__update__
Whenever someone clicks on a book mark button, make an AJAX call to the server. Server should get the request and decide what to do (add a new book mark or delete it) and it should respond accordingly. Depending on the answer from the server, you can decorate your button.
To do so,
function onNewBookMarkCallBack(){
$('#idOfTheItemThatYouWantToChangeTheClass').addClass("newBookMark");
}
function onBookMarkDeletedCallBack(){
$('#idOfTheItemThatYouWantToChangeTheClass').removeClass("newBookMark");
}
See the following fiddle:
http://jsfiddle.net/mdfb1ef6/12/
var firstClick = function()
{
$(this).text("Click me again!")
$(this).one("click", secondClick);
}
var secondClick = function()
{
$(this).text("Click me!");
$(this).one("click", firstClick);
}
$("a").one("click", firstClick);
Essentially, you just call the one method again on the element, passing in a new handler.
You can save the state of "checked/unchecked" on the A tag eg.:
<a id="bookmark-toggle" class="xpto bookmark-unchecked" >bookmark icon</a>
<script>
$("#bookmark-toggle").click(function(){
if ( $(this).hasClass("bookmark-unchecked") ) {
// here you execute code that ADD text on bookmark
// two lines below you can also run just inside a ajax callback function, so you can run it just if server said it could insert bookmark with success, and if not success, does not run two lines below and tell user what happens
$(this).removeClass("bookmark-unchecked")
$(this).addClass("bookmark-checked")
} else if ( $(this).hasClass("bookmark-checked") ) {
// here you execute code that REMOVE text on bookmark
$(this).removeClass("bookmark-checked")
$(this).addClass("bookmark-unchecked")
}
});
</script>
Plus: to work alternating between two class, give to you the ability to alternate button style too. you can set an icon different to both cases, or even alternating text too.. you choose..

Is there a way to automatically change the hash url with jQuery?

I'm looking for a way to change the hash url automatically. (no page reload)
The reason I want it is this:
I'm using a pop login / registration form that only initially opens the login portion. You can only get to the registration portion after clicking the login. So, when the user clicks the http://website.com/#modal-login from a certain link, I'd want it to redirect to http://website.com/#register.
Currently it is directly going to the #register. Is there a way to change the hash url after user clicks on login?
No need to use jQuery
document.getElementById("modal-login").onClick = function () {
window.location.hash = "register";
}
For example, try pasting this into your browser's JavaScrtipt console, then click on your question text.
document.getElementById("question").onclick = function() {
window.location.hash = "footer";
}
If you really want to use jQuery for some reason
$('#modal-login').click(function(event) {
event.preventDefault();
window.location.hash = "register";
});
Edit:
Your question isn't about hash locations in general, but how this modal plugin that you're using works. The following was determined by reading the source to the plugin, found here:
http://demo.pressapps.co/plugins/wp-content/plugins/pressapps-modal-login/js/modal-login.js?ver=1.0.0
http://demo.pressapps.co/plugins/wp-content/plugins/pressapps-modal-login/js/modal.js?ver=1.0.0
Here's what you need to execute to get your desired behavior
$('.your-register-button-class').click(function(e) {
/* We expect plugin's click handler to fire in addition to this one. */
$(".modal-login-nav[href='#register']").click();
});
I'm assuming that the element with .your-register-button-class also has attribute data-toggle="ml-modal".

Display text when user clicks on any link

I want to display my licence agreement when the user clicks on any link on the page and prevent the link from taking the user anywhere. I need a way to make any click on the page show the code I want. Is there an easy way to do it? Like a scripts that tells the browser "when the user clicks something show this...".
Thanks a lot for any info
Plain javascript (but without any test for existing onclick handlers):
in the head add
<script>
var disclaimer="This link is not our responsibility - click ok to continue"
window.onload=function() {
var links = document.links;
for (var i=0, n=links.length;i<n;i++) {
links[i].onclick=function() { return confirm(disclaimer);}
}
}
</script>
Jquery:
$('a').click(function() {
// show whatever you want
});

Categories