i tried to display all images in one directory using following jquery. But it is not working. My folder structure is just a images folder and js folder.
I just followed this question also, but couldnt achive the target.
< script >
$(document).ready(function() {
var folder = "images/";
$.ajax({
url: folder,
success: function(data) {
$(data).find("a").attr("href", function(i, val) {
if (val.match(/\.(jpe?g|png|gif)$/)) {
$("body").append("<img src='" + folder + val + "'>");
}
});
}
});
}); < /script>
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
</head>
<body>
</body>
</html>
First of all you need to create a server page which will provide you list of names from that directory. you need to call that page (instead of folder name) from your $.ajax function.
Second, loop over that list of image names (paths) and create image elements. You are doing the similar stuff.
Javascript does not have access to file system. Alternatively you can send an ajax request to your server-scide script to list the file names and return the names back to your script OR you can use server side javascript
Related
I have a table generated through:
<tr *some other th tags* th:onclick="'javascript:openPoolModal(\''+ ${networkHashrate.id} + '\');'">
I have a openPoolModal function in static/js/openPoolModal.js
I have added a <script type="text/javascript" src="../js/openPoolModal.js"></script> to the .html file header where the function is used.
The function looks like this:
function openPoolModal(id){
$.ajax({
url: "/" + id,
success: function(data){
$("#PoolModalHolder").html(data);
$("#PoolModal").modal("show");
}
});
}
What am I missing?
I think this is a directory problem. You're including the js file by calling this script from your html file:
<script type="text/javascript" src="../js/openPoolModal.js"></script>
But if your html file is in directory resources/templates/ then this script is trying to call resources/js/openPoolModel.js which isn't where your Javascript file is.
Adding the js function directly to the html file called the function so your script and directory is wrong.
I want to display all images on my localhost server - localhost:3500/NameOfImage.jpg which actually a folder containing JPEG files.
I want to display all the images on /upload folder of my server which I have managed to mapp to localhost:3500 so localhost:3500/LA.jpg gives me a single image called "LA"
Basically this folder contains 20 something .jpg files which I want to display all of them on my web page - this folder is updated periodically. So after every refresh changes should be visible. I am trying this on my own too.
#my code is as below
`
<!DOCTYPE html>
<html>
<head>
<title>Local Server(Folder) Image Display</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div id="div1"><h2>Displaying Uploads</h2></div>
<button name="button" id="button" type="button">Get Images </button>
<script>
$(document).ready(function(){
$("button").click(function(){
var folder = "localhost:3500/";
$.ajax({
url : folder,
success: function (data) {
if( val.match(/\.(jpe?g|png|gif|jpg)$/) ) {
$("body").append( "<img src='"+ folder + val +"'>" );
});
}
});
});
});
</script>
</body>
</html>
I'm importing an external js file right after the opening body
<body>
<script src="http://website.com/jsfile#1"></script>
etc...
</body>
the head includes the following:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.css" /><script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.2/jquery.mobile.min.js"></script>
the script file looks like this:
$(document).ready(function() {
$(document).on('click', ".clickable", function() {
var o_id = $(this).attr('id');
$('#l_id').val(o_id);
$("#pick_location").attr("action", "pick_contact.php?l_id=" + o_id + "&p_id=" + $('#p_id').attr('value') + "&f_id=" + $('#f_id').attr('value'));
$('#pick_location').submit();
});
});
later I dynamically created clickable divs that trigger the script, e.g.
<?php
echo '<div id ="'.$id.'" class="clickable"><div>test</div></div>';
?>
clicking submits the form and it takes the user to another page very similar again where the user can pretty much do exactly the same thing (the application has to do with selecting stuff in one page, then more stuff in next, etc) as before but with a different script
<script src="jsfile#2"></script>
the problem I'm having is that in that second page the clicked div is triggering the js file jsfile#1 instead of the jsfile#2. So, this caching is giving me a headache. Same results in latest Chrome and Firefox. Can't seem to find anything that works for my problem. Any suggestions would be greatly appreciated
I have successfully called the following JavaScript code to populate an image and description using parameters.
The image and description are in tags and are called imagePlaceHolder and descriptionPlaceHolder. As I say, this works perfectly.
function changeImage(imgName,descriptiveText)
{
image = document.getElementById('imagePlaceHolder');
image.src = imgName;
text = document.getElementById('descriptionPlaceHolder');
PlaceHolder.innerHTML=descriptiveText;
}
What I now require is to place the javascript in its own file and call it from the HTML page using <script src="xxxx.js"></script>
The problem is that the object in the <div> is not recognized. I need to amend the line
document.getElementById('imagePlaceHolder');
to point to the HTML file containing object to manipulate.
Can anyone advise me of the correct syntax please?
In the HTML file you need to link the javascript file in the header
E.g.
<head>
<script src="/scripts/yourjavascript.js" type="text/javascript"></script>
</head>
then do a onload function at the top of your javascript file
window.onload = function(){
changeImage("imgName", "descriptiveText");
}
function changeImage(imgName,descriptiveText)
{
image = document.getElementById('imagePlaceHolder');
image.src = imgName;
text = document.getElementById('descriptionPlaceHolder');
text.innerHTML=descriptiveText;
}
any javascript using document should reference the html document
I am trying to hold a file full of templates that can be loaded up into a page upon page load. Is this really possible? Let me show you what I mean:
Usually, we do this:
<script id = "template1" type= "text/x-jquery-tmpl">BLAH</script>
<script id = "template2" type= "text/x-jquery-tmpl">BLAH</script>
<script id = "template3" type= "text/x-jquery-tmpl">BLAH</script>
Instead how can we do something like this
<script id = "all_templates" type= "text/x-jquery-tmpl">TEMPLATE1, TEMPLATE2, TEMPLATE3</script>
No, but you can simply use an AJAX request to load a page containing the separate <script> templates and then use the normal jQuery DOM functions to access them:
var templates = {};
$.ajax({
url: 'templates.html',
dataType: 'html',
success: function(data) {
$('script', data).each(function() {
templates[this.id] = $(this).text();
});
}
});
However, an even cleaner solution would be transforming your templates into a single JSON object on the server side and load that one.