Passing arguments from PHP to javascript - javascript

This is the PHP code . I am try to call edit_course() function defined in javascript , passing arguments . But not able to complete the task .There is some problem with this piece of code. But I am not able to figure out .
Is there some better way to do so, which is not so messed up ?
Help will be appreciated.
php
$course_result = $con->query("SELECT * from course_records where institute_id='".$row['institute_id']."' ");
$course=$course_result->fetch_assoc();
echo "<div class='options'> <span ><div class='round-button' id='".$course["course_id"]."' onclick='edit_course(".$course['course_id'].",".$course['subject'].")'><div class='round-button-circle'></div></div> <label class='lblname' >Edit</label></span>";
javascript
function edit_course(course,institute){
alert(course);
alert(institute);}
The output is blank page.

Change it to this, there were some errors:
echo "<div class='options'><span><div class='round-button' id='".$course["course_id"]."'
onclick='edit_course(".$course['course_id'].",".$course['subject'].")'><div>
class='round-button-circle'></div></div> <label class='lblname'>Edit</label></span>";

fetch_assoc() returns an array http://php.net/manual/es/mysqli-result.fetch-assoc.php , you can not use it in the way you are using it, you should iterate over the array to return the results, like this:
$course_result = $con->query("SELECT * from course_records where institute_id='".$row['institute_id']."' ");
$course=$course_result->fetch_assoc();
foreach($course as $value){
echo "<div class='options'> <span ><div class='round-button' id='".$value["course_id"]."' onclick='edit_course(".$value['course_id'].",".$value['subject'].")'><div class='round-button-circle'></div></div> <label class='lblname' >Edit</label></span>";
}

Related

The first table row (dynamically generated) always shows, no matter the input value for Javascript

Sorry for asking, I am probably missing something small here but have no clue. I dynamically generated a long list of radio buttons using PHP. On top of the list is an HTML input to search through the list using jQuery. This works, except for one tiny detail. The first radio button in the list always shows, no matter what the search result is. Even if I type something completely different, I will always see the first radio button in the list together with the matching results.
What is going wrong here?
This is my dynamically generated list of radio buttons, using HTML and PHP:
<input id="addplantSearch" class="form-control" type="text" name="addplantsearch" placeholder="Zoek op (Latijnse) naam..." style="margin:0; height:48px;"> <!-- Search input -->
<?php
$query = "SELECT * FROM plants ORDER BY plants.name ASC;";
$post_data = $data->execute($query);
// Prepared statement in 'execute' method (Database class)
?>
<div class="addplant-list">
<?php
foreach ($post_data as $post) {
# Loop start
?>
<div class="searchable">
<label class="pselect-container"> <?php echo $post['name']; ?>
<input type="radio" name="selectPlant" value="<?php echo $post['plant_id']; ?>">
<span class="pselect-checkmark" style="width:100%;">
<img src="../system/src/img/plants/<?php echo $post['directory']; ?>/icon.png" />
<?php echo $post['name'] . " - (" . $post['name_latin'] . ")"; ?>
</span>
</label>
</div>
<?php
# Loop end
}
?>
</div>
And this is my jQuery, responsible for searching through the list:
$("#addplantSearch").keyup(function() {
var value = this.value;
$(".addplant-list").find(".searchable").each(function(index) {
if (!index) return;
var id = $(this).find("span").first().text();
$(this).toggle(id.indexOf(value) !== -1);
});
});
EDIT: The first item in the list is determined by the alphabetical order (ASC) of my database results (see $query variable). So this is always the same item in alphabetical order.
It looks like your issue is with your if statement.
if (!index) return;
This problem occurs because JavaScript uses 0 based arrays, and 0 is also a falsy value. Meaning:
!0 === true
and the first item in the array will always return out of the function and won't be applicable to the toggle logic.
So probably a lot of ways to work around this, one would be to check the length of the array before the each function. Ex:
$("#addplantSearch").keyup(function() {
var value = this.value;
var searchableItems = $(".addplant-list").find(".searchable");
if (searchableItems.length) {
searchableItems.each(function(index) {
var id = $(this).find("span").first().text();
$(this).toggle(id.indexOf(value) !== -1);
});
}
});

How to get either select .val() or div .text() from dynamically created elements with same id?

Depending on the user type, my page dynamically creates either a select element (for admins to change) or a div with text (for regular users) using the same id.
if ($user_type == 'admin') {
echo "<tr><td>Type:</td><td><select id='type' >";
echo "<option value='student' >student</option><option value='teacher' >teacher</option>";
echo "</select></td></tr>";
}
else echo "<tr><td>Type:</td><td><div id='type'>" . $user_type . "</div></td></tr>";
When the page submits, I need either the .val() from the select element or the .text() from the div element.
I can't use .val() on the div element and I can't use .text() on the select element.
Is there a way in jQuery / javascript to get one or the other, depending on which element type was created?
make the else statement as so (use input[type=hidden], to use the .val())
else echo
"<tr>
<td>Type:</td>
<td>
<!-- div to show the value -->
<div>$user_type</div>
<!-- hidden input type to get the value via jQuery .val() -->
<input type='hidden' id='type' value='$user_type'>
</td>
</tr>";
Oh by the way, you can use PHP variables inside strings that are defined with double quotes echo "$someVar";
Since you are printing out from PHP the HTML out put, by the same time you can print a Javascript variable who has what method use to get the value/text. Then, use the variable in your Javascript to perform one query or other.
Something like :
if ($user_type == 'admin') {
echo "<tr><td>Type:</td><td><select id='type' >";
echo "<option value='student' >student</option><option value='teacher'>teacher</option>";
echo "</select></td></tr>";
echo "<script> var method = 'val'</script>";
}
else
{
echo "<tr><td>Type:</td><td><div id='type'>" . $user_type . "</div></td></tr>";
echo "<script> var method = 'text'</script>";
}
You can check it with the following simple code in javascript:
if(document.getElementById("type").tagName == "SELECT") {
//Your code for admin
}
else
{
//Your code if it is not admin
}
You can have the text or the value with a simple and elegant ternary condition :
var result = $("#type").val() !== undefined ? $("#type").val() : $("#type").text();

javascript function with 2 arguments is not working

DEscription :
I have a php script that displays the div on an html page
echo '<div class = "star_box" id = "'.$each_status['post_id'].'" onmousedown = "star_it(this.id)"></div>';
Now when I click on this div the star_it function gets called and it works perfect...
The problem
I want to pass another argument in the star it function .. like this
echo '<div class = "star_box" id = "'.$each_status['post_id'].'" onmousedown = "star_it(this.id,'.$each_status['regno'].')"></div>';
or a simple alphabet if any like star_it(this.id,s)
but when I do so the function stops working as when I click the div the function does not gets called ....
I dont know why I am stuck and now my star rating system does not work... I have absolutely no idea what is wrong
Anyone ??
You should modify your string quote's like this :
<?php
$status = "second test";
echo '<div class="star_box" id="'.$id.'" onmousedown="star_it(this.id,'."'".$status."'".');" >Hello</div>';
?>
<script>
function star_it(foo1,foo2){
console.log(foo1);
console.log(foo2);
}
</script>
This example works for me.
So with your code :
<?php
echo '<div class="star_box" id="'.$id.'" onmousedown="star_it(this.id,'."'".$each_status['regno']."'".');" >Hello</div>';
?>
Here you go
echo '<div class = "star_box" id = "'.$each_status['post_id'].'" onmousedown = "star_it(this.id,\''.$each_status['regno'].'\')"></div>';
you forget to add \' before and after your string , the JS engine on the browser will treat your string as an undefined variable and the function will not work because of that .
//my English is not so good.
Try
echo '<div class = "star_box" id = "'.$each_status['post_id'].'" onmousedown = "star_it(this.id,\"'.$each_status['regno'].'\")"></div>';

Undefined variable from php to js

I've got a loop posting images from database.
I tried to give each photo div separate id.
When i tried to send it to script by onclick function
It shows that "$photoid is not defined "
I tried to print this variable in this first php script but it shows me all IDs, so shouldnt be empty or undefined...
$allphotos = mysql_query("SELECT * FROM photos ORDER BY id DESC");
while ($numphotos = mysql_fetch_assoc($allphotos)){
$photoinfo = mysql_query('SELECT * FROM photos WHERE link="'.$numphotos['link'].'" ');
$fetchinfo = mysql_fetch_assoc($photoinfo);
$photoid = $fetchinfo['id'];
echo '<div class="thisphotobox" id="'.$photoid.'"><img src="'.$numphotos['link'].'" alt="photo" class="photolink" onclick=clicked($photoid)></div>';
}
Here goes script:
<script>
function clicked(photoid){
document.getElementById('photoid').style.backgroundColor = 'red'
}
</script>
Change this:
echo '<div class="thisphotobox" id="'.$photoid.'"><img src="'.$numphotos['link'].'" alt="photo" class="photolink" onclick=clicked($photoid)></div>';
to this:
echo '<div class="thisphotobox" id="'.$photoid.'"><img src="'.$numphotos['link'].'" alt="photo" class="photolink" onclick="clicked('.$photoid.');"></div>';
otherwise, the output is just clicked($photoid), all text.
Also change that:
function clicked(photoid){
document.getElementById('photoid').style.backgroundColor = 'red'
}
to that:
function clicked(photoid){
document.getElementById( photoid.toString() ).style.backgroundColor = 'red';
}
The answer above is working, but they forgot to add something,
instead of
echo '<div class="thisphotobox" id="'.$photoid.'"><img src="'.$numphotos['link'].'" alt="photo" class="photolink" onclick="clicked('.$photoid.');"></div>';
copy this code
echo '<div class="thisphotobox" id="'.$photoid.'"><img src="'.$numphotos['link'].'" alt="photo" class="photolink" style="background-color:white" onclick="clicked('.$photoid.');"></div>';
add the style="background-color:white;" i think you can't access the .style in js if you didn't initialize it in your div. hope this will help
This is simply an escaping issue. The argument $photoid in your echoed function has to be escaped if it is a string. In your code above this:
onclick=clicked($photoid)
should be
onclick="clicked($photoid)"
if $photoid is a number or
onclick="clicked(\'$photoid\')"
if it is alphanumeric or a string

Reduce string length retrieved from database

I am fetching rows with title & its description from MySQL database.
I want to alter the strings that I got from the database.
<div class="title"><?php $row['title']?></div>
<div class="details"><?php $row['desc']?></div>
So please tell me, how to apply javascript to this content ($row['..'])? Means, how I can access those strings in Javascript?
If the string length is more than 50 characters, I want to limit the string & add dots (...) to it.
It is better to use mb_substr() than substr()
<?php
echo mb_substr($row['title'],0,50);
Source
You can do this using substr.
<?php echo (strlen($row['desc']) > 50) ? substr ($row['desc'] , 0, 50 ).'...' : $row['desc']; ?>
Why do that? Html has a css for that. you can fix the width and add the "text-overflow:ellipsis".
Try this:
<div class="fixedWidth title"><?php $row['title']?></div>
<div class="fixedWidth details"><?php $row['desc']?></div>
<style>
.fixedWidth{
width:200px;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
</style>
If you are working with non-ASCII strings and you want to manipulate those then substr() is wrong to use. Instead you should use multibyte string functions, like mb_substr() and others.
For that you must have mbstring-extension enabled for PHP. see http://php.net/manual/en/mbstring.installation.php
I would also not directly echo string for using javascript - you never know what chars could be there and then you should start to escape some chars to work properly with javascript.
Instead I would encourage you to use json_encode. This will escape properly all special and UTF8-chars.
PECL's json-extension must be enabled for json_* functions. See http://php.net/manual/en/json.installation.php
Of course if you are using Zend-framework, then proper would be use Zend_Json::encode()
<?php
$maxLength = 50;
$encoding = 'UTF-8';
$tail = ' ...';
$row['desc'] = (mb_strlen($row['desc'], $encoding) > $maxLength) ? mb_substr($row['desc'], 0, $maxLength, $encoding) . $tail : $row['desc'];
?>
<script type="text/javascript">
var rowData = <?php echo json_encode($row); ?>;
alert(rowData.desc);
</script>
why don't you try in directly php scripting insted of javascript.
you can make it as below.
<div class="title"><?php echo $title = strlen($row['title']) > 50 ? substr($row['title'], 0, 50)."..." : $row['title']; ?></div>
Then you can get the title in javascript as well.
$(document).ready(function(){
var title = $(".title").text();
});

Categories

Resources