I'm trying to implement a simple rollover tooltip for images on a page where when you roll over an image, you get a little tooltip window and have the contents loaded from a database via AJAX.
I can hack this together quickly but I wanted an elegant way of doing this without using any inline JS.
So my question is: If I capture the rollover event inside my external .js file, how do I pass it the database ID?
I'm using jQuery so I would do something like this:
$('.item_roll').mouseover(function() {
//show tooltip and load ajax content
}
and my HTML would be something like this:
<img src="thumb.png" class="item_roll" />
Without calling a function from the img tag, how do I send the JS call above the database id? I hope that makes sense.
Thanks.
I recommend having both a class and an id in the image tag:
<img src="thumb.png" id="id_28436379" class="item_roll" />
Then in your jQuery event, you can access that like so:
$(".item_roll").mouseover(function(event){
alert( event.target.id.split("_")[1] ); // displays 28436379
});
This should let you access the database id by making it the id of the image tag.
EDIT: After reading some helpful comments, I've changed my answer so that the id does not start with an integer, since this is nonstandard and might not work in all browsers. As you can see, the split/[] code extracts the id number from the id string.
Related
so I just had a quick question about jQuery .load().
Is there a way I can load the 'src' field of a div on another page into a variable on my current page? So if it is:
<div class="test"> <img class ="image" src="imagelink">
I would like to get the imagelink in my current HTML page using JS / jQuery. I've tried doing ${#loadhere}.load("URL .image") as per the documentation https://api.jquery.com/load/ but it doesn't seem to get me the image link. My plan is to get the link and then $(#loadhere).attr('src', LINK) as per this SO post: jquery changing image src
If all you want is to parse something from another page using $.get() would be more practical as it won't insert anything into the current page unless you want to yourself.
You can wrap the response html in $() and maniplate or query that html the same as you would do in the current page
$.get('otherPage.html').then(function(res){
const src = $(res).find('.test .image').attr('src');
$('#currentPageImage').attr('src', src)
})
im working on a Asp.net MVc application to create a scheduler application for workers.
The schedule is auto-generate using a JavaScript library called: Dhtmlx Scheduler.
upon populating the data, it creates some Html and places the content.
I would like to retrieve the content and was wondering if it's possible by obtaining the info from its class.
Pic for reference:
I am trying to retrieve the "Abel Toribio" so i can do a reverse search in my database for his name and eventually display a tooltip over that td with further information about the person.
So far I have tried:
var engName = document.getElementsByClassName("dhx_matrix_scell");
alert(engName[0].getData());
alert(engName[0].getContent());
alert(engName[0].getText());
alert(engName[0].getValue());
They all seem to give me undefined.
Thanks!
engName[0].innerHTML - for contents inside the tag 'html'.
engName[0].outerHTML - for contents inside the tag wrapped in the tag.
engName[0].textContent - for contents inside the tag 'text'.
As you tagged jquery as well,for tooltip purpose, you can write mouseover event using jquery this way :
$(".dhx_matrix_scell").on("mouseover",function(){
alert($(this).text());
// do something here
});
if you want to get all, you can get them like this:
$.each(".dhx_matrix_scell",function(){
alert($(this).text());
});
Here is my scenario:
I am having a page with pagination and enhanced with infinite-scroll
The page has a list of items, where each item looks like this in smarty
<div id="link-{index}">
<div align="left"><a href={$url}></div><div alight="right"><img src="" id="{$url}"></div>
</div> <script>imager({$url});</script>
I am using a service to dynamically grab image src for a given URL and append it to the image by defining imager(x){ document.getElementById(x).src = service(x).image; }
Now this works, as in shows correct images along side URLs as long as normal pagination is used. Doesn't work for page 2 onwards with infinite scroll as it uses JQuery and that parses out the imager JS script for each item.
I am stuck with trying to create a callback function for infinite scroll that will do what imager does but after a page is loaded but I am unable to get it to work.
Any tips will be appreciated. Thank you
In the callback for when a new page is loaded, you can do something like this:
$('img:not([src])').each(function() {
$(this).attr('src', service($(this).attr('id')).image);
});
This assumes that the only images without a source are those that were just loaded by the infinite scroller. If the widget provides parameters to the callback that tells it which parts of the DOM were just paged in, you may be able to use that to narrow down further; the second argument to a jQuery selector is the context to search.
We've got a little tool that I built where you can edit a jQuery template in one field and JSON data in another and then hit a button to see the results immediately within the browser.
I really need to expand this though so the designer can edit a full CSS stylesheet within another field and when we render the template, it will have the CSS applied to it. The idea being that once we've got good results we can take the contents of these three fields, put them in files and use them in our project.
I found the jQuery.cssRule plugin but it looks like it's basically abandoned (all the links go nowhere and there's been no development in three years). Is there something better or is it the only game in town?
Note: We're looking for something where someone types traditional CSS stylesheet data in here and that is used immediately for rendering within the page and that can be edited and changed at will with the old rules going away and new ones used in their stead. I'm not looking for something where the designer has to learn jQuery syntax and enter in individual .css("attribute", "value") type calls to jQuery.
Sure, just append a style tag to the head:
$("head").append("<style>p { color: blue; }</style>");
See it in action here.
You can replace the text in a dynamically added style tag using something like this:
$("head").append("<style id='dynamicStylesheet'></style>");
$("#dynamicStylesheet").text(newStyleTextGoesHere);
See this in action here.
The cleanest way to achieve this is by sandboxing your user-generated content into an <iframe>. This way, changes to the CSS won't affect the editor. (For example, input { display:none; } can't break your page.)
Just render out your HTML (including the CSS in the document's <head>, and write it into the <iframe>.
Example:
<iframe id="preview" src="about:blank">
var i = $('#preview')[0];
var doc = i.contentWindow || i.contentDocument;
if (doc.document) doc = doc.document;
doc.open('text/html',true);
doc.write('<!DOCTYPE html><html>...</html>');
doc.close();
If the user should be able to edit a whole stylesheet, not only single style attributes, then you can store the entered stylesheet in a temporary file and load it into your html document using
$('head').append('<link rel="stylesheet" href="temp.css" type="text/css" />');
sounds like you want to write an interpreter for the css? if it is entered by hand in text, then using it later would be as simple as copy and pasting it into a css file.
so if you have a textarea on your page to type in css and want to apply those rules when you press the button, you could use something like this (only pseudocode, needs work):
//for each css id in the text area
$.each($('textarea[name=cssTextArea]').html().split('#'), function({
//now get each property
$.each($(this).split(';'), function(){
$(elem).css({property:value});
});
});
then you could write something to go through each element that your designer typed in, and get the current css rules for it (including those that you applied using some code like the snippet above) and create a css string from that which could then be output or saved in a db. It's a pain and much faffing around with substrings but unfortunately I don't know of a faster or more efficient way.
Hope this atleast gives you some ideas
Good evening everyone,
I am using a JavaScript to load/override content from an HTML-File into specified divs.
You can watch a demo.
The javascript that does the load job looks like the following:
function loadScreenie(elementSelector, sourceURL) {
$(""+elementSelector+"").load("img/screenies/"+sourceURL+"");
}
and gets invoked by a hyperlink looking like this:
mibmib
( i have also tried the same with onclick="")
This is the content of screenie2.htm
hello world<br />
<img src="screenie2.png" />
The problem is that images are not displayed. The behaviour is like this:
- you click the link and the javascript is executed.
- the text in screenie2.htm is displayed correctly in the correct div
- the image is not displayed. there also isnt any broken image symbol or an empty space.
Do you have an idea what could cause this error?
Thanks a lot in advance,
-- benny
Ok. Let me conclude to you what is happening here.
When link is clicked, jQuery loads "img/screenies/screenie2.htm
The image-tag <img src="screenie2.png" /> is inserted into the DOM.
So, we have an image linking to a supposed image at ./screenie2.png, where you would believe it should be linking to *./**img/screenies/**screenie2.png*.
You need to use absolute URLs in your load():ed content.
If you're testing with IE, the problem might be that Jquery uses innerHTML instead of creating individual dom elements with the load command. IE can be very finicky about that.