jQuery initiate JavaScript action - javascript

<div class="button">
<a class="testclass" href="javascript:actionx(objectId);"></a>
</div>
So the question is how do I initiate JavaScript bit using jQuery, I have tried:
window.location = javascript:actionx(objectId);
And some other similar variations, but they do not seem to work.
By the way, class is universal and all the buttons have it. The only thing that changes is the objectId.

If you are trying to redirect then you can try this:
html:
<div class="button">
<a class="testclass" href=" javascript:actionx(1234);">Redirect</a>
</div>
script:
function actionx(data){
//rest of the code without return
window.location="d3.php";//here your location to redirect
}

Related

Change title with JS with button in secondary page

I've two pages in HTML-PHP:
first page, the main page, has buttons that can rederict to second page, second page has title and image that I would like to change with JS code.
I try to use function in my first page to change title in second page but it doesn't work.
My FIRST PAGE:
<div class="hover">
<a onclick="hello();" href="secondPage.php" target="_blanck" ;>Second Page</a>
</div>
My SECOND PAGE:
<h2 id="title2">Hy</h2>';
MY JS:
function hello (){
document.getElementById("title2").innerHTML='<h2 id="title2">Hello!</h2>';
}
I'm new in JS and I think there's something wrong in my JS code, can anyone help me?
Thanks!
You can use the following codes to do it.
firstPage.php
<div class="hover">
<a href="secondPage.php?change=1" target="_blank" ;>Second Page</a>
</div>
secondPage.php
<h2 id="title2">Hy</h2>
<?php
if ( (isset($_GET['change'])) AND ($_GET['change'] == 1) )
{
?>
<script>
document.getElementById("title2").innerHTML='<h2 id="title2">Hello!</h2>';
</script>
<?php
}
?>

HTML page keeps reloading after click event

Hi I have a small website, which keeps reloading after a click event. How can I prevent this?
PS: I'm only allowed to use pure JS.
HTML
Cookie Clicker
</head>
<body>
<header>
<h1>Points: </h1>
<span id="score"></span>
</header>
<div class="container">
<div>
<a href="" onclick="addPoints(1)">
<img src="assets/graphics/Friis.png" />
</a>
</div>
</div>
<script src="assets/scripts/cookieClicker.js"></script>
</body>
</html>
JS
var points = 0,
score = document.getElementById("score");
function addPoints(increase) {
console.log('hit');
points += increase;
score.innerHTML = '' + points;
};
You can modify only your html and it works:
<a href="javascript:void(0);" onclick="addPoints(1)">
Some people make this:
<a href="#" onclick="addPoints(1)">
But this is an anchor that scrolls your page to top. If you need to make by javascript, search about event preventDefault.
EDIT
Read about void javascript function:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void
It's good to understand behaviour.
update your code to:
<a href="" onclick="addPoints(1);return false">
or
<a href="" onclick="return addPoints(1)">
and let your function addPoints return false. Upside of this is that you can actually let the href link to a page in case addPoints reaches a certain level for instance. If addPoints returns true the link will take the user to that page, return false will keep the user on the current page.
Instead of using onClick you can just change the href to run the function.
For example:
<a href="javascript:addPoints(1);">
that happens because you code contain
<a href="" onclick="addPoints(1)"> // These Can Reload Same Page
<a href="#" onclick="addPoints(1)"> // Modify upper code to these code

How to avoid firing an onclick() event fired when clicking a link in AngularJS

First of all, I want to say that I have seen some topics already with similar question. I have tried withe the responses of these topics, but I have not been able to find a solution for my problem. Maybe the difference is that I am using AngularJS
(HTML)
<li class="article-list_item" ng-repeat="noticia in news" >
<article class="article_news" id="newsBlock{{noticia.id}}" >
<header>
<h1 class="article_newsTitle">
<a href="http://www.google.es" rel="tooltip" title="{{noticia.title}}"
data-toggle="modal" ng-bind-html-unsafe="noticia.shortTitle"></a>
</h1>
</header>
</article>
(JS)
$(document).ready(function () {
$(".article_news").click(function (event) {
$(this).addClass("approved");
});
});
What I am trying to do is to add the class "Approved" to the object I am clicking.
But when I click the link inside the <article> , I dont want to add the Class. Instead, I want the browser to open the URL.
How can I do this? Must I use stopPropagation(), preventDefault() or similar? How should I use them?
Thanks in advance
Well, Angular automatic filter link action if you implement it in angular way. For implementing it in angular way you should create directive to bind click event which handles your issue. Still you can solve it like this.
ng-click="$event.stopPropagation()"
Your HTML
<article class="article_news" id="newsBlock{{noticia.id}}" >
<header>
<h1 class="article_newsTitle">
<a ng-click="$event.stopPropagation()" href="http://www.google.es" rel="tooltip" title="{{noticia.title}}"
data-toggle="modal" ng-bind-html-unsafe="noticia.shortTitle"></a>
</h1>
</header>
</article>

Javascript: Automatically clicking a button?

I'm learning how to write a chrome extension, and I'm fairly new to javascript.
Here's some html:
<div class="button data" style="">
<a class="button1 whiteColor" href="http://link1.com">VIEW This</a>
<a class="button2 redColor" href="http://link2.com">VIEW That</a>
</div>
What I want to do is open link2.com by automatically clicking button2 using javascript.
I'm using the following, but it's not working :/
document.getElementByClassName("button2 redColor").click();
Any help would be appreciated!!
document.getElementsByClassName("button2 redColor")[0].click();
You need select index, because getElementsByClassName return the array

AddThis in AJAX

I'm trying to get Addthis to work in a div tag that's being loaded with AJAX I read on their site I had to render the toolbox with javascript http://support.addthis.com/customer/portal/articles/381263-addthis-client-api
I'm using the code below but it doesn't seem to be working, any help with the function is appreciated. Thanks.
<div id="toolbox"></div>
<script type="text/javascript">
addthis.method('#toolbox', [configurationObject], [sharingObject]);
</script>
Since I don't know that much about your particular problem, I'd start start by looking into addthis.toolbox('.yourClass');
If you have a typical toolbox like this...
<div id="myToolbox" class="toolbox addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_email" style="cursor:pointer"></a>
</div>
Once your ajax content has finished loading into the dom you could do the following...
addthis.toolbox('#myToolbox');
However, watch out for this!
Don't put your like button inside your toolbox because when you call the addthis.toolbox method it will create a duplicate like button iframe for some reason. It must be a bug but it took a couple years off my life. Instead you should put it in its own toolbox containing div and call the method on it as well.
In the case of multiple toolboxes
you should probably use a class instead. See the following code for the final example.
html
<div class="toolbox">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" addthis:userid="myCompany"></a>
</div>
<div class="toolbox addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_email" style="cursor:pointer"></a>
</div>
javascript:
//on complete of ajax load
addthis.toolbox('.toolbox');
var addthis_config =
{
ui_hover_direction: -1
, ui_offset_left: offsetLeft
, ui_offset_top: -45
, ui_delay: 300
, ui_click: false
};
var addthis_share =
{
url: 'http://www.example.com',
title: 'example title'
}
addthis.method("#Button2", addthis_config, addthis_share);
Visit http://www.addthis.com/forum/viewtopic.php?f=5&t=14137 this may help you.
method is not a valid function of the addthis object. It's a placeholder in the example for you to use a real method name.
You are never really calling anything as you aren't waiting for the DOM to ready:
<script type="text/javascript">
$().ready(function () {
addthis.method('#toolbox', [configurationObject], [sharingObject]);
});
</script>

Categories