I need some div's to work as a clickable link. I already found the solution for jquery. Unfortunately this solution is always window.location or window.open. This is not suitable for us, since we have a lot of div's and the urls are already defined with _blank or same window.
I have to admit, that I am not sure, how I can look for the function that I need, since I have almost no knowledge of Javascript and the functions of it.
This is the code for the script, that I found:
$(document).ready( function () {
$(".textlink").click(function () {
window.location = $(this).find("a:first").attr("href");
return false;
});
});
and this is one box with target=_blank
<div class="textlink texticon texticon-top">Text in DIV</div>
The expected result would be, that the whole div is clickable but the target will be taken from the href of the div and not predefined in the script.
You just need to trigger click on found anchor tag instead of setting its href to window.location
$(document).ready( function () {
$(".textlink").click(function () {
$(this).find("a:first").click();
});
});
You can do:
$('.textlink a:first').click(function() {
window.location.replace($(this).attr('href'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="textlink texticon texticon-top">Text in DIV</div>
Related
I'm new to Javascript and I have what is probably a pretty basic question. I have some tools tips and want to open them with a click. I create a Javascript call on the click. I can pas the element ID I want to open, but I don't know how to get it to work in the Open call.
<script type="text/javascript">
function opentip(tipID) {
//alert(tipID);
$(#tipID).tooltipster('open');
}
</script>
It's not necessary the function opentip(tipID) to bind the mouse click. I will give you an genereic exemple. You have to import Tooltipster's CSS and JS, and jQuery, so the code will be:
<span class="tooltip" title="Tooltip content!">Target tag</span>
<script>
$(document).ready(function() {
$('.tooltip').tooltipster({
trigger: 'click'
});
});
</script>
When clicl on "Target tag" will appear an tooltip with "Tooltip content!" inside.
The $(document).ready(function() {}); is important to be sure that when the script runs, the browser have already the DOM ready, so the script can find the HTML elements.
You are using JQuery syntax. Insert JQuery plugin and add single quotes in your syntax $('#'+tipID).tooltipster('open'); and add inside document.ready
<script>
$(document).ready(function(){
function opentip(tipID) {
//alert(tipID);
$('#'+tipID).tooltipster('open');
}
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='here'></div>
I am trying to refresh a certain div within a bunch of divs. The div content is basically generated by PHP along with data from a MySQL database in addition to many variables being sent with the help of an XMLHttpRequest.
The idea is to reload/refresh the div itself and not load a php file or to overwrite it with .text or .html. In this case, I cannot use .load('file.php')
What I have tried :
<script type='text/javascript'>
function updateDiv()
{
document.getElementById("here").innerHTML = document.getElementById("here").innerHTML ;
}
</script>
and (for a every 3 second refresh) :
$(document).ready(function () {
setInterval(function () {
$('#here').load('#here'));
}, 3000);
});
Ideally, I would require something like :
function reloadDIV () {document.getElementById("here").innerHTML.reload}
function reloadDIV () {$('#here').load(self)}
so that I can use it in a onClick :
<a onclick='reloadDIV ();'>reload div</a>
To reload a section of the page, you could use jquerys load with the current url and specify the fragment you need, which would be the same element that load is called on, in this case #here:
function updateDiv()
{
$( "#here" ).load(window.location.href + " #here" );
}
Don't disregard the space within the load element selector: + " #here"
This function can be called within an interval, or attached to a click event
For div refreshing without creating div inside yours with same id, you should use this inside your function
$("#yourDiv").load(" #yourDiv > *");
Complete working code would look like this:
<script>
$(document).ready(function(){
setInterval(function(){
$("#here").load(window.location.href + " #here" );
}, 3000);
});
</script>
<div id="here">dynamic content ?</div>
self reloading div container refreshing every 3 sec.
You can do the following to just reload a <div> element:
$('#yourDiv').load('#yourDiv > *')
Make sure to: use an id and not a class. Also, remember to paste:
<script src="https://code.jquery.com/jquery-3.5.1.js"></script> in the <head> section of the HTML file, if you haven't already. In opposite case it won't work.
You can use jQuery to achieve this using simple $.get method. .html work like innerHtml and replace the content of your div.
$.get("/YourUrl", {},
function (returnedHtml) {
$("#here").html(returnedHtml);
});
And call this using javascript setInterval method.
I have this bit of code below which expands and collapses the results from a search. The search displays the search results on the same page so the whole page isn't reloaded. It works the first time - i.e the first search, however for future searches the expand collapse feature stops working. I think its because the page isn't reloaded but Im not sure how to fix it.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2 /jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.section').hide();
$('h2').click(function () {
$(this).toggleClass("open");
$(this).next().toggle();
}); //end toggle
}); //end ready
</script>
<?php include('db.php');
$descr = $_POST['search'];
echo '<ul id="user_list">';
$user_query = $db->query("SELECT * FROM tblVulns WHERE Name LIKE '%".$descr."%'");
while($user = $db->fetch_assoc($user_query))
{
echo ' <h2 style="cursor:pointer">'.stripslashes($user['Name']).'</h2>
<div class="section" style="display:none"> <h3>'.stripslashes($user['Risk']).'</h3><p>
<h4>'.stripslashes($user['Summary']).'<p>'
.stripslashes($user['Description']).'<p>'
.stripslashes($user['cveCode']).'<p></div>';
}
?>
The code at the bottom is the php receiving the search results. The code at the top is the js that is dealing with expand and collapse
Any help in how to get this work for all searches after the page has loaded would be great. Thanks
You are adding your event listener to the click event of any h2 elements that are present on page load. It sounds like you are then loading in new content and expecting the same code to work for them.
Instead, you will need to do this:
$("body").on("click","h2",function(){
$(this).toggleClass("open");
$(this).next().toggle();
});
Which will work on any h2 that is on the page. If you want only h2s in a certain container to have the effect then replace body for a reference to that element
EDIT:
I see now that you are using quite an old version of jQuery that doesn't support the on() function. I would suggest upgrading if you can, or use Abhishek Saha's answer if you cannot.
I think one of the reason, it doesnt work after the first search is because the new element which gets loaded, is not bind with the click action.
Try this:
replace
$('h2').click(function () {
$(this).toggleClass("open");
$(this).next().toggle();
});
with
$('h2').live('click',function () {
$(this).toggleClass("open");
$(this).next().toggle();
});
I am trying to load a popup lightbox window when the page is initially opened. I can get it to work on a click but I cannot get the code right to add a class in the script. I am using 'Lightbox' from within HTML Kickstart.
The link that works looks like this: <a class="lightbox" href="#bbc">BBC</a> This works perfectly. Basically how do I get that to work automatically on page load.
My attempt at the script:
<script type="text/javascript">
function load() {
var target = location.href = "#bbc";
target.className = "lightbox";
}
</script>
So I assume you want to add a class to that anchor tag:
$(function () {
$("a[href=#bbc]").addClass("lightbox");
});
Using $(function() {…}) is the same as using the ready() function (in JQuery). I would recommend running the code after the DOM is ready rather the "on load".
you need to call the load() function on the onLoad event of <body> tag.
<body onLoad="load()">
The way I read this question — ignoring the title — is that the user is trying to trigger the lightbox on load. Whilst this may be a wrong assumption, the way to trigger a link using javascript is to use the .click() method:
window.onload = function(){
var i, list = document.getElementsByTagName('a');
for ( i=0; i<list.length; i++ ) {
/// this will only work for links with only a class name of lightbox.
/// you could look into using getElementsByClassName or something similar.
/// I use getElementsByTagName because I know how supported it is.
if ( list[i].className == 'lightbox' ) {
list[i].click();
}
}
};
The above code would support multiple lightbox links in a page, which might not be desired, so it may be best just to add an id to the link you wish to target and then use:
window.onload = function(){
document.getElementById('clickonload').click();
};
<a id="clickonload" class="lightbox" href="#bbc">BBC</a>
You may find however, that in reading the documentation for whatever lightbox plugin you are using, that there is a command you can use from JavaScript, rather than clicking a target link.
$(window).load(function () {
var target = location.href = "#bbc";
target.className = "lightbox";
});
I have a very simple JavaScript operation which is just not working. I'm using the twitter-bootstrap CSS, and am attempting to implement the close of the close message box. I have my code here:
http://jsfiddle.net/YQgpe/
HTML
<div class = "alert-message success" id = "message_1">
<a class = "close" href = "#">x</a>
</div>
JavaScript
function hideSomething(which_thing)
{
$(which_thing).hide();
}
$(".close").click(function()
{
hideSomething("#" + $(this).parent().attr("id"));
});
Essentially I want the same "close" class of link to hide the div when clicked - hence the request for the parent id. But even though jslint tells me my code is valid - it still doesn't work.
Any ideas on how to solve this would be greatly appreciated.
Try this, I just removed the js lint and it works.
http://jsfiddle.net/YQgpe/15/
It works if you remove jQueryLint (edge) as library: http://jsfiddle.net/YQgpe/10/
However, your code can be simplified to:
$(".close").click(function() {
$(this).parent().hide();
});
You already have a reference to the parent, there is not need to search for it again via its ID.