preventDefault not working if the link is not found - javascript

I have this code
$("#mainPageSlider").click(function(){
event.preventDefault();
console.log("I am here");
]);
My html is
<a href="admin/category/cloths">
<img src="image/catalog/myimage.jpg" alt="Slider" id="mainPageSlider">
if the link admin/category/cloths exists, my code displays console.log message however if the link does not exists, it seems to ignore my click code and just goes to another page for not found pages. What am i doing wrong?

Related

Disable link after click until the page loads

I am using Flask to make a webapp. The reset href triggers the method I showed below the html code. That method runs a bash script via OS.system python module and it needs time to run. During that script running time, my page is loading and I can click multiple times on the reset link, triggering the method each time and therefore the bash script.
HTML:
<div class="butonulmeu"> <span>RESET</span> <br> <img src="/static/images/reset.png"> </div>
Python Flask method:
#app.route('/reset')
def Reset():
system("./bash_script.sh")
return redirect('/')
I tried to disable the link after one click using this java script code, however, it is not working. What am I doing wrong?
<script>
function clickAndDisable(link) {
// disable subsequent clicks
link.onclick = function(event) {
event.preventDefault();
}
}
</script>
<a href="/reset" onclick="clickAndDisable(this);">
<div class="butonulmeu">
<span>RESET</span> <br>
<img src="/static/images/reset.png">
</div>
</a>
When a visitor goes to a URL from a link, javascript variables will be reset. So there will be no reference to the fact that the link was clicked. There are a few solutions to this, my solution is using localstorage to show that the link was clicked before.
This code will detect if reset was saved to local storage. If it wasn't, save it to local storage and allow the click by not doing anything. If it has been saved, prevent the default clicking of the link.
function clickAndDisable(link) {
if(!localStorage.getItem("reset")){
localStorage.setItem("reset",1);
}
else{
event.preventDefault();
}
}
<a href="/reset" onclick="clickAndDisable(this);">
<div class="butonulmeu">
<span>RESET</span> <br>
<img src="/static/images/reset.png">
</div>
</a>

How to restrict href link to <oblique> tag

<a href="myList/doctor">
<div>
<span> The important Info
<a data-toggle="modal" data-target="#mapModal">
<a data-toggle="modal" data-target="#mapModal"
id="obliqueIcon"> <oblique
class="iconSize">i</oblique></a>
</a>
</span>
</div>
</a>
document.getElementById("obliqueIcon").onclick = function(e) {
return false; // or use e.stopPropagation() and e.preventDefault()
}
I have the above code.Here the div can be clickable but the 'i' button here should open up a model box (data-target="#mapModal") but it is not since the anchor tag contains the 'href'.
What I am trying to do is let this code should not be changed but when I click on the oblique it should open up a model box but not redirecting to the link.Is there any way to restrict it.Please suggest help.Thanks.
So there are a couple of issues with your HTML: first, there isn't an <oblique> tag (did you mean <i>?), and second, you can't nest an <a> tag within another <a>.
That said, though, the more general form of what you're asking for -- a node within a link tag that will not fire that link if clicked -- is possible; all you need to do is prevent the click event from bubbling up from that node to the anchor tag:
document.getElementById("foo").onclick = function(e) {
// open your modal here
return false; // or use e.stopPropagation() and e.preventDefault()
}
<a href="https://example.com">
This should link to the other page...
<span id="foo">but this should not</span>
</a>
Added to the answer in response to comments below: here's the same code snippet applied to your HTML:
document.getElementById("obliqueIcon").onclick = function(e) {
return false; // or use e.stopPropagation() and e.preventDefault()
}
<a href="myList/doctor">
<div>
<span> The important Info
<a data-toggle="modal" data-target="#mapModal">
<a data-toggle="modal" data-target="#mapModal"
id="obliqueIcon"> <oblique
class="iconSize">i</oblique></a>
</a>
</span>
</div>
</a>
I do not get the error message you're reporting ("Cannot set property 'onclick' of null") but at a guess it may be because you're continuing to use invalid HTML (the nested <a> tags) -- possibly that's making those nodes inaccessible in some browsers? (I'll stress that this is only a guess; I don't have a lot of experience working with invalid HTML other than by fixing it, so I don't have a solid understanding of how all browsers might handle it. I've tested Safari, Chrome and FF, all work correctly even with the invalid HTML, but if you're using a different browser perhaps that's the cause. If you see the error on my second snippet but not on my first snippet, that would confirm the guess. If you see no errors in either snippet, then you have something else going wrong in your code.)

I want to run this jquery on load not how it is, how should I enter the code?

I have this code that runs when someone clicks yes
<a id="question-submit" class="cta cta-submit corners" onclick="jQuery('#user-process').modal('show');">
<span>Yes ยป</span>
</a>
I want it to run when page is loaded as if they clicked yes.....How would I do this, I can't figure it out, thanks.
<script>
jQuery(function() {
jQuery('#user-process').modal('show');
})
</script>
jQuery() adds an on-load event.

How can I use document.getElementById(someid).onclick for tag a

I want to automate to click on some link in a website.
since links on webpage are not direct link such as www.example.com/1.html.
it shows following link address for all the links I am interested in clicking
javascript:void(1)
following is the html code for that link I want to click
<a href="javascript:void(1)" onclick="server_playOn(17,2, 'est', this);">
Life OK
</a>
Once you've got a reference to the link you can just use the click method:
referenceToLink.click();

Facebook Connect button question - please help

<fb:login-button onlogin="window.location = '/custompage.html';">Connect</fb:login-button>
That's currently my code for users to log in to my site. It's in FBML.
It will pop up a box, the user then logs in. And then, it closes the new window, followed by a redirect to "custompage.html".
Now, I would like to manually render my button instead of using FBML, because it's too slow on mobile" http://wiki.developers.facebook.com/index.php/Facebook_Connect_Login_Buttons#Facebook_Connect_for_iPhone_Buttons
How do I close the popup window and redirect, using this code as explained in the doc?:
<img src="http://wiki.developers.facebook.com/images/6/6f/Connect_iphone.png">
The code you want run on successful login should be passed as an argument to requireSession(). In your case, I believe you want
<a href="" onclick="FB.Connect.requireSession(function () {
window.location = '/custompage.html'
});return false;">
<img src="http://wiki.developers.facebook.com/images/6/6f/Connect_iphone.png">
</a>
Fixed.
put this inside the requireSession:
function() { window.location='/'; }

Categories

Resources