PHP script JQuery grabs wrong number of elements - javascript

I've been using JQuery to show/hide elements based on login-status, however I've run into some unexpected results, here's the code:
<script>
$(document).ready(function(){
$("#uploadform").hide();
});
</script>
This hides the form if the user is not logged in.
<h2 id="needlogon"> You need to be logged in </h2>
<a id="needlogon" href="index.php"> Back to start </a>
These are to be shown only if the user is not logged in
<?php
if (isset($_SESSION['cid'])){
echo '<script>
$(document).ready(function(){
$("#uploadform").show();
$("needlogon").hide();
});
</script>';
}
?>
The uploadform is shown/hid as intented, but the needlogon elements are not hidden when the condition ($_SESSION['cid']) is set. The only way it works is if i change the ID's of the elements to needlogon1 and needlogon2, and changing the JQuery to:
<?php
if (isset($_SESSION['cid'])){
echo '<script>
$(document).ready(function(){
$("#uploadform").show();
$("#needlogon1").hide();
$("#needlogon2").hide();
});
</script>';
}
?>
I'm sure I'm just missing something silly, anyone know what it is?

For starters, your jQuery selector is off:
// $("needlogon").hide();
$("#needlogon").hide(); // you forgot the #
Having said that, you're using an ID -- which is supposed to be unique. You might want to change the two usages of needlogin to a class instead of id, and then your selector would be .needlogon like so:
$(".needlogon").hide();

Related

Using Javascript function to hide button inside PHP

I am currently writing a website where I want to hide the the supervisor editing button if the supervisor field = N. I am able to get the query to display the correct output but I can't get the button to hide. Can anyone help me get it to hide whenever the page loads. I also under stand I should be using PDO's but we have not been taught that sadly.
HTML & PHP
<?php
$supervisorstatus = mysql_fetch_assoc($supervisorresult);
echo $supervisorstatus['supervisor'];
if($supervisorstatus !='Y') {
echo '<script type="text/javascript">',
'closesup();',
'</script>'
;
}
?>
JavaScript
function closesup(){
document.getElementById('supervisor').style.visibility="hidden";
}
Supervisor is the element id for the button.
This is how your code would be
<?php
$supervisorstatus = mysql_fetch_assoc($supervisorresult);
echo $supervisorstatus['supervisor'];
if($supervisorstatus['supervisor'] !='Y') {
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#supervisor").hide();
});
</script>';
}
?>
I gave a example of implementation above but if you need to see it separate Here is the code to hide your supervisor id
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#supervisor").hide();
});
</script>
$supervisorstatus contains an array. You probably want: if($supervisorstatus['supervisor'] !='Y') {

Targeting dynamic id's within a javascript file

In a php file I have tags with dynamic id's.
Example:
<ul id="<?php echo 'ul_'.$xx; ?>">
<li id="test_li">...</li>
</ul>
In a separate JavaScript file I am wanting to use the load function and target that div.
$('<?php echo 'ul_'.$xx; ?>').load('../includes/myphpfile.inc.php #test_li');
My question is, how could I load that php within a JavaScript file?
Notes:- The reason I have it set up this way is due to looping multiple ul's. I just want my ajax file to refresh the li's within the specific ul I am inside of.
Edit: If I use classes instead of Id's it adds my newly inserted rows into all of the ul's with the same class. If I use a plain Id it only works on the first ul. Further explaining why I need to target the way I am.
Unable to find a solution using the path I was on, I looked for alternate methods. Worked out I could add the event in the php file on the submit form button click.
The reason I wasn't using this method at first was because the code was running before it submitted to the DB and therefore was always behind in relation to the new data being submitted.
To my surprise I fixed this by just duplicating the line of code.
<script>
$("<?php echo '#enter_submit_button'.$linkid ?>").click(function(){
/*1*/
$('#<?php echo 'ul__'.$linkid; ?>').load('../includes/pursuit.inc.php <?php echo '#li__'.$linkid; ?>');
$("<?php echo '#insert_new'.$linkid; ?>").fadeOut();
/*2 with delay*/
$('#<?php echo 'ul__'.$linkid; ?>').delay( 800 ).load('../includes/pursuit.inc.php <?php echo '#li__'.$linkid; ?>');
});
</script>
I honestly couldn't say exactly why this works but the logic behind trying the method came from hoping that the double load would pick up the latest submission.
The simplest answer would be to put your JavaScript code into the PHP file inside
<script></script> tags, i.e, just before closing your <body> tag, do this:
<script type="text/javascript">
$('<?php echo 'ul_'.$xx; ?>').load('../includes/myphpfile.inc.php #test_li');
</script>
But if you must use an external js file, then you could do this:
Create a (.php) file and write:
<?php
header("Content-type: application/javascript");
?>
// your js code with php inside (as you would do in HTML)
var othervar='<?php echo $phpVar; ?>';
//<?php //some php ;?>
Then, in your main (html/php) file, put in:
<script src='myjs.php' type='application/javascript'></script>
Hope that solves it.

Javascript show div when button is clicked

I realize that this is a common question and I have searched for solutions and the one that I'm trying to use (it works in jsfiddle) but when I tried to use it in my website it just won't work. I'm trying to show a div when a button is clicked. Am I doing something wrong? Maybe there's something wrong with the javascript? Or could it be I need to include a jquery js file? Thanks for your help in advance.
Here is the code I'm trying to use:
<script type="text/javascript">
$("#seeAnswer").click(function() {
$('#subtext').html($(this).next().html());
});
</script>
And I'm trying to use it with this:
<div class="back_button">
<button id="seeAnswer">See Answer</button>
</div>
<span>
<?php
/* foreach($row2 as $ans) {
$answer = $ans['answer'];
}
echo $answer;
echo "hi";
*/
?>
<?php foreach ($row2 as $ans) : ?>
<p><?php htmlspecialchars($ans['answer']) ?></p>
<?php endforeach ?>
<p>hi there</p>
</span>
<div id="subtext">
</div>
Use .parent() after .next() because you are referring to the next element after the button... but there is no element... so you want the next() of the parent element.
EDIT: as per new information about the <HEAD>, you are executing the code before the whole dom is ready... so you're actually applying the code to nothing. You need to wait for the DOM to be ready. Like this
$('docment').ready(function() {
$("#seeAnswer").click(function () {
$('#subtext').html($(this).parent().next().html());
});
});
Fiddle

How do I embed Javascript in PHP code?

I have a HTML form and PHP code. In my form, I have a textbox and a textarea. Within both, I have included the "disabled" option. I want both textboxes to remain disabled until the user decides to click the "Edit" button, in which case both textboxes should be enabled so changes can be made and the output once again saved. According to the research I have done, the only way to do this is to use javascript, so I have included the following code within my PHP;
if (isset($_POST['edit']))
{
echo "<script type=\"text/javascript\">";
echo "var oldnotes = document.getElementById('oldnotes');";
echo "oldnotes.disabled = false;";
echo "var record = document.getElementById('record');";
echo "record.disabled = false;";
echo "</script>";
}
I have also tried;
if (isset($_POST['edit']))
{
echo "<script type=\"text/javascript\">";
echo "$('#oldnotes').removeAttr('disabled')";
echo "$('#record').removeAttr('disabled')";
echo "</script>";
}
But no luck :(
I am not receiving any errors, the textboxes just remain disabled after I click the Edit button. Could anyone help me with this? Thanks in advance.
This is a better approach for these kind of problems :
if (isset($_POST['edit'])){
?>
<script type="text/javascript">
var oldnotes = document.getElementById('oldnotes');
oldnotes.disabled = '';
var record = document.getElementById('record');
record.disabled = '';
</script>
<?php
}
<?
<script language='javascript'>
(javascript code here)
</script>
?>
Try use onclick on your Button
<input type="button" name="edit" id="edit" onclick="document.getElementById('oldnotes').disabled=false; document.getElementById('record').disabled=false; return false;">
I hope it helps.
The second approach seems correct, but you're missing ; there. Also, you haven't put any newline characters.
Here's what I suggest:
<?php
if (isset($_POST['edit'])) {
?>
<script type="text/javascript">
alert("Check entry"); // Use this for checking if your script is reaching here or not
$('#oldnotes, #record').removeAttr('disabled');
</script>
<?php
}
?>
You don't need to echo the whole thing. You can simply put it out of the PHP and keep it inside a if block.
Also, I've kept the alert to check if your code structure is proper. If you're getting the alert on clicking the edit button, means you're on the right path. You just need to workout on the JS.
If not, something wrong with your edit button and the form POST
Use single quotes for script type
echo "<script type='text/javascript'>\n";
//javascript goes here
echo "</script>";
use this jquery code:
<script>
$('#oldnotes,#record').attr('disabled','')
</script>
If you want to use JS with PHP you can read here:
how to write javascript code inside php
However: it seems you want the JS to be called on it own accord upon evaluation in the php logic as per the implementation provided.
Technically speaking your JS simply states it should re-enable the controls. Rather add the JS functionality to the OnClick of the submitting control and it should work fine. This is a quicker way of testing the functionality as well.
<a href="javascript:void(0);" onclick="document.getElementById('oldnotes').disabled=false;" >
Once it is clicked it will hide the appropriate control instead of trying to write new JS on the fly that is not executed. This is tried and tested and should work fine for you.
Hope it helps!
you can always make a cookie
use document.cookie()
set the onclick=“” to changing the cookie
and make a script that runs and gets the cookie when you open the site (use window.onload = function(){/*code goes here*/})

All list item popovers for new items showing at once on hover- Javascript

So, I have a categorised list of items from a SQL Server database on my page. I also have stars next to the newer items to draw user attention. My code should hopefully display popovers for each of the new items when the user hovers over each of them. My problem is that no matter what new item/star I hover on, they all appear at once. Ive tried using a for loop for each item and giving each <li> a unique class or id in different attempts. This is part of the code looping through the Db and also displaying the "new"
<li>
<?php
if(strtotime($itemDetails['posted']) > (strtotime('-30 days'))){
echo '<i class="icon-star" data-content="This item is new on Corkboard. Check it out!" data-original-title="New Item"></i>';}
echo ''.$itemDetails['name'].' - '.$itemDetails['description'].'';
?>
</li>
<?php
}//foreach
echo '</ul>';
}//foreach
?>
This is the code instantiating the popover.
<script type="text/javascript">
$(document).ready(function() {
$('.icon-star').popover(options);
});
</script>
<script>
$("i").hover(function () {
$('.icon-star').popover('show');
});
</script>
Without knowing what library the "popover" function belongs to, I'd say you need to change your javascript up a bit. The $("i").hover(...) code is going to make your popover happen on all "i" elements.
Try something like:
<script type="text/javascript">
$(document).ready(function() {
$('.icon-star').popover('show');
});
</script>

Categories