I would like to click a button using javascript without physically clicking on the bottom.
Below is what I have tried:
<li id="#attendBtn"><a style="background:#FF6400;" href="#attend"><i class="fa fa-check"></i> Attend</a></li>
echo "<script>
document.getElementById('attendBtn').click();
</script>";
but it does not seem to work. any help would be appreciated
Remove the # in <li id="#attendBtn">.
document.getElementById('attendBtn').click();
<li id="attendBtn" onclick="console.log(1);"><a style="background:#FF6400;" href="#attend"><i class="fa fa-check"></i> Attend</a></li>
In javascript, if you use getElementById, you only need to pass the id name. Other frameworks such as jQuery use the # as an alias to id
document.getElementById('attendBtn').onclick();
If I understand your question correctly, you want to trigger the click event without actually having to click on the button?
You should look into using jQuery for that then.
Then you can do this:
$('#attendBtn').click(function() {
console.log('button was clicked');
});
And trigger it with this:
$('#attendBtn').trigger('click');
Also, I'm guessing the rest of the html is not posted, as an 'li' should be in a 'ul'?
Related
this might be very basic but I am still trying to figure it out because I cannot seem to get it correct.
The button
<a class="fusion-button button-flat button-square button-xlarge button-default button-40" target="_blank"><span class="fusion-button-text fusion-button-text-left">KÖP DITT CAMPINGKORT HÄR!</span></a>
And I need to add this
Köp Camping Key Europe
Some things needs changing such in the next code but you get the idea, how can I make button work, so when they press it it open module? When I use the second code without button and only link, it works fine, module shows up.
Please help :)
Try this
<button type="button" class="fusion-button-text fusion-button-text-left"
onclick="CampingKeyEurope(' blank', 'sv')">Button Text</button>
Building off the comment by Sterling Archer, you should attach event listeners outside of your HTML, so if you are using JQuery, in your $(document).ready() function you would add your onclick event there to your button like so:
$('.fusion-button-text.fusion-button-text-left').on('click', function() {});
Try using an event listener:
<a id="btn" class="fusion-button button-flat button-square button-xlarge button-default button-40" target="_blank">
<span class="fusion-button-text fusion-button-text-left">KÖP DITT CAMPINGKORT HÄR!</span>
</a>
document.getElementById('btn').onclick = function () {
CampingKeyEurope(' blank', 'sv');
};
I suggest looking through here, Its very useful: https://www.w3schools.com/jsref/event_onclick.asp
I am using WordPress so i could only change the HTML through custom JS.
This is the HTML
<li class="submit-listing"><i class="fa fa-plus"></i> Submit Listing</li>
I already tried all of these:
$(".submit-listing a").html("<i class="fa fa-plus"></i> Post You Ad");
$(".submit-listing a").html(function(){
$(this).find("i").addClass("fa fa-plus");
this.nodeValue = "Post Your Ad";
});
but none of these work. I also tried this : How can I get, manipulate and replace a text node using jQuery?, but nothing seems to work with me.
Thanks anyway.
Using a replace works:
$('.submit-listing a').html(function (i, el) {
return el.replace('Submit Listing', 'Post your ad');
});
DEMO
The first line of your code should be,
$(".submit-listing a").html("<i class='fa fa-plus'></i> Post You Ad");
Change the double quotes to single quotes because JavaScript treats them as closing strings.
I am using one of the bootstrap snippet for login dropdown box in the login box there is a link for Join Us I wanted that when i click on Join Us, the content within the box should get replaced by another box that contains login credentials
I modified the following code
New here ? <b>Join Us</b>
with the code below
New here ? <b>Join Us</b>
and created another content that had id signup-dp like this
<ul id="signup-dp" class="dropdown-menu">
// signup data Inside this part
</ul>
Now when i click on the Join Us link the url of the page gets changed i.e #signup in the end of the url, but the content does not get displayed,
can anyone please tell how to do so
Please check jquery included or not.
Use return false like below
<b>Join Us</b>
#signup-dp{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b>Join Us</b>
<div id="login-dp">login-dp</div>
<div id="signup-dp">signup-dp</div>
Its very simple and you code is working for me only.
<a href="#" onClick="$('#login-dp').hide(); $('#signup-dp').show()">
<b>Join Us</b>
</a>
<a href="#" onClick="$('#login-dp').show(); $('#signup-dp').hide()">
<b>Login</b>
</a>
<ul id="signup-dp" class="dropdown-menu">
// signup data Inside this part
</ul>
<ul id="login-dp" class="dropdown-menu">
// login data Inside this part
</ul>
Please follow this link . JSfiddle
Onclick jQuery is not working, So user Javascript code
New here ? <a href="#" onclick='document.getElementById("login-dp").style.display = "none";document.getElementById("signup-dp").style.display = "visible";'><b>Join Us</b></a>
Put the new hidden element somewhere before your existing element.
unless you write your jQuery code in $(document).ready(); in a separate file, or internal.
Your code is correct. But please check have you included jquery file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
This jquery should be included before the jquery code you have written.
Put following jquery code to make signup div initially hidden.
<script type="text/javascript">
$(document).ready(function(){
$("#signup-dp").hide();
});
</script>
First of all, for make good programming habit you have to bind click event instead of write javascript code inside of tag onClick attribute.
<b>Join Us</b>
In your javascript code (try to write code in other js file instead of inline code in HTML page.)
$(document).ready(function(){
$("#btn_join_us").click(function(e){
e.preventDefault();
$('#login-dp').hide();
$('#signup-dp').show();
return false;
});
});
This kind of code make some secure event binding. otherwise anyone can make change your code from inspect element and execute this.
So, I have been given an admin built in php and I was asked to implement an already done admin built in aspx into the new one(changing the css and so), the thing is that i want to dynamically "insert" into the main admin structure which is made in php only the part that's gonna be run in aspx, I made a reserach and found out that the way to do it was using file_get_contents and yeah it works, the thing is that i want that to show after I click on a link so I put the f_g_c into a js function to do so, the thing is that it doesnt work, it doesnt insert anything, it does it outside a function, but inside it just won't
<li class="active">
<a id="solicitud" href="" >
<i class="fa fa-file-text-o"></i>
<span>Solicitudes</span>
<span class="label label-primary label-circle pull-right">2</span>
</a>
var li = document.getElementById('solicitud');
li.onclick = aparecer();
function aparecer() {
<?php
$hola= "./solicitudAAA.aspx";
?>
var lo = document.getElementById('container');
lo.innerHTML ="<?php echo file_get_contents($hola); ?>";
return false;
}
above there are the section of code or well the link i want to click so it shows the aspx and the second section of code is the actual script, i don't know what I'm doing wrong and why inside the scriptit won't work, thanks for your answers!
The problem with your code has something to do with your link's href. A blank href in your anchor tag will refresh the page causing the onclick in your script to not work. How about adding the following:
<a href="javascript: void(0)" id="solicitud" onclick="aparecer();">
<i class="fa fa-file-text-o"></i>
<span>Solicitudes</span>
<span class="label label-primary label-circle pull-right">2</span>
</a>
To make things easier, add the function to the onclick attribute of the anchor tag to call the function rather than coding it inside the script.
Since onclick attribute(that contains the calling of function) is added to the anchor tag, you can remove this in the script:
var li = document.getElementById('solicitud');
li.onclick = aparecer();
I hope this helps!
I have Clipboard.js working fine on my test site, I can copy using data-clipboard as such.
<a href="#">
<i class="icon-link icon-1x fa-fw" id="d_clip_button_x" data-clipboard-text="copythistext" title="Copy direct link"></i></a>
<script type="text/javascript" src="copy/clipboard.min.js"></script>
<script type="text/javascript"> var client = new Clipboard( document.getElementById('d_clip_button_x') );</script>
But when I have content from an Ajax call the same code no longer functions. I have read some ways and tutorials on how to get Ajax to work well with Clipboard.js but I can't seem to wrap my head around it. As I understand it I need to retrigger the function, but how can I achieve that?
Thanks.
i tried on my end. clipboard.js uses extensive triggers to get the data attribute and binds when the page finishes loading.
so, in case the data is fetched from ajax, clipboard, won't binds them as u wish to.
for the solution, here is the trick.
first of all, make one generic copy button which works, give it a ID, suppose we give is d_clip_button_villa_XXX.
<a style="display:none" href="javascript:void(0);"> <i class="icon-link icon-1x fa-fw" id="d_clip_button_villa_XXX" data-clipboard-text="" title="Copy direct link"> </i> </a> <script type="text/javascript"> var client = new Clipboard( document.getElementById('d_clip_button_villa_XXX') ); </script>
now, instead of making same buttons, use any element like <a> tag and mention 2 events->
copy
now make two functions->
function copytxt(txt){
jQuery('#d_clip_button_villa_XXX').attr('data-clipboard-text', txt);
}
function clkd(){
jQuery('#d_clip_button_villa_XXX').click();
}
this will work with ajax also