JQuery seems to be blocked by something else - javascript

JQuery seems to be blocked
Hello there, I've been confronting this problem for several days, I just can't find a way to get this fixed, or around it.
What I want to do is simple, I want to read out every sub-folder of a big Project folder. Then assign a thumbnail image and a figcapture to this folder. With a simple for loop, php builds this for me. Everything works perfect and quick. The only thing is that the jquery won't respond. Even though I have created various menus with this technique. As you can see in my code, in the "script" tags, I have the jquery code which doesn't seem to work.
I don't know wheter php puts in a space somewhere or I just looked too long at this code for seing the error.
I appreciate any help.
<?php
/*Because of the "ease of use" aspect of this site, I prefered to write it completely in PHP,
advantage of that:
Images are loaded directly out of the folder, so I can just drag and drop something onto the server without having to write aditional code.
As you see, it can save a lot of time.*/
echo "<h1>Referenzen</h1><br>";
$projects = scandir('../src/sub/credentials'); //The credentials directory is being scanned and converted into an array.
$projectsSize = count($projects); //$size is being created. It counts the number of objects in the array which has been created above.
$projectsCaptions = file('../src/sub/captionsOfCredentials.txt'); //Edit the name of the figcaption in the "captionsOfCredentials.txt".
for($i = 2; $i < $projectsSize; $i++){ /*Simple "for" loop, that creates $i with the size of two, because PHP is 0-index based and has the "dot" and the "dotdot" folder. The loop stops at the end of the array($size).*/
echo '<a href="index.php#PRJ'.trim($projectsCaptions[$i]).'" class="ID'.trim($projectsCaptions[$i]).'">
<div class="projectFolder">
<img src="src/sub/credentialsThumb/project_00'.$i.'.jpg" width="100%" />
<figcaption>'
.$projectsCaptions[$i].
'</figcaption>
</div>
</a>';
/*Project folder level starts here.*/
$images = scandir('../src/sub/credentials/project_00'.$i);
$imagesSize = count($images);
for($k = 3; $k < $imagesSize; $k++){
$tempID = ('ID'.trim($projectsCaptions[$i]).'.php'); //$tempID is the entire file name including the .php part.
$handle = fopen($tempID, "a") or die ('Unable to open '.$tempID.' , please contact admin A.S.A.P..');
$imagesCode = 'test';
fwrite($handle, $imagesCode);
}
//end second for-loop
echo "
<script>
$(document).ready(function () {
$('#ID".$projectsCaptions[$i]."').click(function () {
$('#mainContent').load('de-DE/".$tempID."');
});
});
</script>";
}
//end first for-loop
?>

You're selecting an element by id when you need to use class. Change the JS block to this:
$(document).ready(function () {
// Note ".ID" not "#ID"
$('.ID".$projectsCaptions[$i]."').click(function () {
$('#mainContent').load('de-DE/".$tempID."');
});
});
UPDATE
It seems like you've also got an illegal character in $projectsCaptions[$i]. It's most likely a newline character. Try wrapping the above reference above in trim():
$('.ID" . trim($projectsCaptions[$i]) . "').click(function () {

Related

Change user image based on who's logged in

I'm currently working on a login portal.
I already set the log in and log out functions and placed a session start button on every page.
My problem now is that I would like to update the user image based on the identity of who is logged in.
I'm using a template my boss chose, and this is the code where the image is:
<span>
<img src="../../global/portraits/5.jpg" alt="...">
</span>
Just a simple <img> tag with the link where the image is.
My project is in an html file with php implemented, and I tried to do this in the <span> tag, instead of <img>:
<?php
$W = ["Raffaella", "Milena", "Domiziana"];
$M = ["Umberto", "Domenico"];
if ($_SESSION["nome"] == $W) {
echo '<img src="W.jpg">';
} else if ($_SESSION["nome"] == $M){
echo '<img src="M.jpg">';
}
?>
where $_SESSION["nome"] represents the current user logged in. However, it doesn't do anything, not even producing an error.
Can someone explain how I can do it correctly, please? I'm new to php and trying to understand by studying alone on the internet
I was also considering JavaScript for this work (instead of PHP), but I don't know where to start
It looks like both $W and $M are array of names, rather than a single user, if that's the case, I assume you're trying to determine if a user is in that array. In PHP, you can use:
in_array($_SESSION["nome"], $W)
https://www.php.net/manual/en/function.in-array.php
which will return true/false.
if (true === in_array($_SESSION["nome"], $W)) {
echo '<img src="W.jpg">';
} else if (true === in_array($_SESSION["nome"], $M){
echo '<img src="M.jpg">';
}
But, this only gives two separate images for up to 5 unique names, and I'm not sure if that's what you're going for.

SimpleHtmlDom take elements from pagination built with javascript

So i already have used SimpleHtmlDom with success. The difference is that i iterated through the pagination based on the url.
For example the domain would be:
www.example.com/articles
and the pagination would be
www.example.com/articles/page/1.html
Now i have a pagination that is based on javascript and i get only the results from the first page. Now, when i tell the page to get to the next page, i assume that it reloads the page, so it goes from the start again because the url does not change.
One extra problem is that the link that belongs to the "next page", if you copy it and paste it on the URL bar then it redirects you to another section of the website. (So much for developers -_- )
I will actually paste the original code so you can see by yourself what is going on with the links.
Anyways my question is the following:
How can i iterate through the whole pagination?
<?php
require "simple_html_dom.php";
$url = "http://es.4story.gameforge.com/ranking/browse?type=world";
$baseUrl = "http://es.4story.gameforge.com/ranking/browse?type=world";
//Create a DOM object
$html = new simple_html_dom();
// Load HTML from a URL
$html->load_file($url);
// Get all links
foreach ($html->find('.enc_controls .enc_pager a.enc_next') as $anchor) {
$tempUrl = $baseUrl . $anchor->href;
$linkHtml = file_get_html($tempUrl);
foreach ($linkHtml->find('#results td .item_classWrap a span') as $item ) {
echo $item;
echo "<hr/>";
}
}

echo variable to document via button click

First time here so apologies if I'm doing something wrong.
I have the following php code:
<?php
$quoteFile = "quotes.txt"; //File holding qoutes
$fp = fopen($quoteFile, "r"); //Opens file for read
$content = fread($fp, filesize($quoteFile));
$quotes = explode("\n",$content); //Put quotes into array
fclose($fp); //Close the file
srand((double)microtime()*1000000); // randomize
$index = (rand(1, sizeof($quotes)) - 1); //Pick random qoute
?>
The code fetches a random quote from a text file by randomly choosing one of the lines of the .txt file.
I then echo out the result using:
echo $quotes[$index];
However what I want to achieve and don't seem to be able to is to have a button (html) that when clicked executes the echo $quotes[$index]; to the current page. So that each time the button is clicked it prints/echo's out a random quote from the .text file.
I did mess about with just setting a button up to refresh the page which by default made a new random quote display but it sometimes just reloaded a blank so I'm hoping someone can help me achieve this better or prompt me in the right direction. Thank tou.
You can try saving that variable into a session variable like this:
$_SESSION['quote'] = $quote['index'];
Then create an anchor element that redirects to current page:
Refresh
And print the result on the page:
<span><?php echo $_SESSION['quote']; ?></span>
To do all of this, you need to set a session. At top of your php file write:
session_start();
Hope that helps. :)
Your TXT file might have an empty line in it at the end or anywhere else. A second explanation of this, is that the way you are generating randomness is quite questionable.
Check out this simple example by W3 Schools.
$a=array("red","green","blue","yellow","brown");
$random_keys=array_rand($a,1);
echo $a[$random_keys[0]]."<br>";
The array_rand() function returns a random key from an array, or it returns an array of random keys if you specify that the function should return more than one key.
Or, simply:
<?php
$a=array("a"=>"red","b"=>"green","c"=>"blue","d"=>"yellow");
print_r(array_rand($a,1));
?>
Full Post: http://www.w3schools.com/php/func_array_rand.asp
Happy coding !

editing html with embedded PHP using javascript

I hope someone has an answer for me,
I am currently trying to create a PHP product page for my shop website, I have an sql table that stores the name of an image prefix eg if the image file is 'test_1.png' then the table stores 'test'. using embedded php
src="images/shop/<?php echo $row['item_img'], '_1.png';?>"></img>
what I would like to do is using js, dynamically update the src on a mouse click.
something like eg.
var imgSwitch = function(i){
Document.getElementById('js-img').src = "images/shop/
<?php echo $row['item_img'], '_';?>i<?php echo '.png';?>";
}
Even to me this seems wrong which is why I've turned to the GURU's here
Is there anyway this would be possible? If not, any suggestions would be GREATLY appreciated
I am trying to figure out what you are asking, and I think this is your way to go:
var imgSwitch = function(i){
document.getElementById('js-img').src = "images/shop/<?php echo $row['item_img'], '_';?>" + i + ".png";
}
The change is in the i, you have to cut the string and add it as a variable.
But remember that the PHP code is executed at the server, and will not change once the page is sent to the client. When you execute that function, $row['item_img'] will always be the same.
A simple example which you can adapt. What I do in the code below is give the element an id and attach an onclick to it.
In the function we pass the id as a parameter (onclick(changeSrc(this.id))) and we manipulate the src using the getElementById as we have the id.
<img src="http://ladiesloot.com/wp-content/uploads/2015/05/smiley-face-1-4-15.png" id="test" onclick="changeSrc(this.id);" height="400" width="400" />
<script>
function changeSrc(id) {
document.getElementById(id).src = "http://i0.wp.com/www.compusurf.es/wordpress/wp-content/uploads/2014/04/smiley.jpeg?fit=1200%2C1200";
}
</script>
http://jsfiddle.net/tq1Lq5at/
Edit 1
You're using Document when it should be document, notice the lowercase d.

Preload all images in a directory using jQuery

I want to preload all images in a directory called img,and that directory also contains sub directory called ui_images.
I know how to preload specific images by putting their names in an array and doing the preloading work, but i want to know how to tell the script to search dynamically for all images in that directory img and img/ui_images?
Here's my code :
var preloadImg = function(imgArr){
$.each(imgArr, function(index,value){
$("<img/>")[0].src = value;
});
}
var arrimg = ['img/check.png','img/add_sub.png'];
preloadImg(arrimg);
There is no generally available facility for doing a directory listing in http. The options I can think of are:
Name your images in a predictable fashion like (img001, img002, etc...) and then you can load images until you get an error.
Name your images in a predictable fashion like (img001, img002, etc...) and then code in one numeric limit value into your web page for how many there are.
Create an ajax call (on both client and server) that will give you a list of image names to preload.
Have your server embed an array of image names into the page so you know what to preload.
I was looking at improving the performance on one of my sites and looked into this. My solution seems to work and I haven't seen it anywhere else yet.
Its a two step approach using jquery and php
// Preload images via jquery .load and delete once their cached via the callback
<div id="preload"></div>
$('#preload').load('preload.php', function() {
$('#preload').remove();
});
// preload.php below - loop through the image folder and insert the images into a hidden div
<div style="display:none">
<?php
$dirf = 'images';
$dir = scandir($dirf);
foreach ($dir as $file) {
if (($file != '..') && ($file != '.')) {
echo "<img src='images/$file' />";
}
}
?>
</div>
This worked in Firefox but feel free to critique or improve

Categories

Resources