I'm looking a way to set with javascript somewhere only the id e.g from a youtube video and to place it automatic in URL. For instance I can make it like this in PHP: ->
<?php
$id = 'pOYRLBhYGyc';
?>
<table style="background:url('http://img.youtube.com/vi/ <?php echo "$id" ?> /0.jpg')no-repeat;
Is there any way like this in JS also?
Yes you can. You need to set the background property dynamically.
Checkout a sample in JS Fiddle.
<table id="sample" border="1" width="100%" height="100%">
<tr>
<td>Sample</td>
</tr>
<tr>
<td>Sample</td>
</tr>
<tr>
<td>Sample</td>
</tr>
<tr>
<td>Sample</td>
</tr>
</table>
The script tag will contain the following script.
var videoId = "pOYRLBhYGyc";
$("#sample").attr("background", "http://img.youtube.com/vi/" + videoId + "/1.jpg");
http://jsfiddle.net/y44n6hao/
Related
I have this kind of data in my html which is very wrong
<table
border="0"
cellpadding="0"
id="iFlightTable"
class="cellpadding3 styled-table"
>
<thead>
<tr class="flightData1">
<td width="10%">Name</td>
<td width="5%">Subject</td>
<td width="20%">Email</td>
</tr>
</thead>
<table
border="0"
cellpadding="0"
id="iFlightTable"
class="cellpadding3 styled-table deleteit"
>
<tbody>
<tr>
<td></td>
</tr>
- many elements like this
</tbody>
</table>
</table>
with jquery I want to delete the table having the class "deleteit" and the extra closing </table> at the bottom, so my rendered table is perfect.
any clues how can I do it please guide ?
I am uysing raw vanilla javascript
coded as above to try to use a log of javascript and even created a function but it didn't help, it removes everything
function removeElementsByClass(className) {
const elements = document.getElementsByClassName(className);
while (elements.length > 0) {
elements[0].parentNode.removeChild(elements[0]);
}
}
I'm manipulating cookie data for Scheduling Calendar.
I've array in cookie, using it i have made table. Now i want to delete table rows from last delete button of last column of the row.
My Code as given below
$cookie_data = '2017-06-27+06:00-06:30,2017-06-29+12:00-12:30,2017-07-01+06:00-12:00-17:00 ';
echo '<table class="table table-bordered" id="schedule">
<tr>
<th>Date</th>
<th>Times</th>
<th>Delete</th>
</tr>';
$val = $cookie_data;
$num_dates = explode(',',$val);
foreach($num_dates as $k => $v){
$bdata = explode('+',$v);
echo '<tr><td><label>'.$bdata[0].'</label></td><td><label>'.$bdata[1].'</label></td><td><button>Delete</button></td></tr>';
}
echo '</table>';
Also Code is running on phpfiddle.
http://phpfiddle.org/main/code/8ch0-merp
Now i want to remove any value by clicking delete button.
try with this,
Currently it will give error in fiddle. because stackoverflow not allowing to set custom cookie. So you can try this code at your side, and also i convert code in html so you have to convert in php.
You can set your cookie name as you want i just give example here.
Hope this will helps you :)
$("button").on("click",function() {
var cookieStr = $(this).attr("data-cookie");
var setCookieVal = [];
var cookieValue = $("#cookievalue").val().split(",");
for(i = 0; i< cookieValue.length; i++) {
if(cookieStr !== cookieValue[i]) {
setCookieVal.push(cookieValue[i]);
}
}
$.cookie("yourCookie",setCookieVal);
$(this).parent().parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<body>
<input type="hidden" value="2017-06-27+06:00-06:30,2017-06-29+12:00-12:30,2017-07-01+06:00-12:00-17:00" id="cookievalue">
<table class="table table-bordered" id="schedule">
<tbody>
<tr>
<th>Date</th>
<th>Times</th>
<th>Delete</th>
</tr>
<tr>
<td><label>2017-06-27</label></td>
<td><label>06:00-06:30</label></td>
<td>
<button data-cookie="2017-06-27+06:00-06:30">Delete</button>
</td>
</tr>
<tr>
<td><label>2017-06-29</label></td>
<td><label>12:00-12:30</label></td>
<td>
<button data-cookie="2017-06-29+12:00-12:30">Delete</button>
</td>
</tr>
<tr>
<td><label>2017-07-01</label></td>
<td><label>06:00-12:00-17:00 </label></td>
<td>
<button data-cookie="2017-07-01+06:00-12:00-17:00">Delete</button>
</td>
</tr>
</tbody>
</table>
</body>
If do you want to delete cookie use $.dough in Jquery Plugin and for this you should specify name of the cookie like this example :
Create Cookie
//Code Starts
$.dough("cookieName", "cookieValue");
//Code Ends
Read Cookie
//Code Starts
$.dough("cookieName");
//Code Ends
Delete Cookie
//Code Starts
$.dough("cookieName", "remove");
//Code Ends
I use json save for a template builder. And I convert some blocks and html tables into simple tags, eg: [[TableName(Title,SKU,Total)]]
The code for this tag looks like this:
<div class="box table">
<table id="TableName">
<thead>
<tr>
<td class="title">Title</td>
<td class="sku">SKU</td>
<td class="total">Total</td>
</tr>
</thead>
<tbody>
<tr>
<td class="title"></td>
<td class="sku"></td>
<td class="total"></td>
</tr>
</tbody>
</table>
</div>
On load, I need to convert tag back to html, so I use:
var tag = []
template.find('.table').each(function(){
var array = $(this).html().match(/\(([^)]+)\)/)[1].split(',');
tag.push(array);
});
console.log(tag)
but I need to get the id too "TableName" than generate the table.
Maybe you need simpler templating engine :
You can try handlebarjs. It's very easy to use and have good performance.
http://handlebarsjs.com/
https://www.youtube.com/watch?v=4HuAnM6b2d8
var $tableID = $(".table").attr("id"); // gets the table's id
var tag = []
template.find('.table').each(function(){
var array = $(this).html().match(/\(([^)]+)\)/)[1].split(',');
tag.push(array);
});
console.log(tag)
Greeting everyone,
Currently i'm making a webpage that has the following functions:
When the administrator opens the page, admin will be seeing a form filled with these information from a database:
What this page does is that it shows how many video's each user has in the database and when the admin clicks on the desired user ID, a new page should open with the video's of that specific user ID. The " DONE" button is to return to the main page when the admin is done deleting video's.
Now, what I have done is that I've assigned an href link to the userID values that is being fetched from Database. The problem is that, I have no clue how to pass the selected value/string to the next page with href. I've tried with Session, but ended up getting the last variable processed in the WHILE loop instead of getting the clicked UserID. Below follows my php code of what I've done. Can anyone give me some tips on how to pass the clicked userID from one page to another with href, or is there another way to do this?
code= click here
ps: As everyone can see, my php coding needs some serious improvement. But i'm still trying to improve by doing these types of exercises.
<?php
include_once ("includes/db_connection.php");
$sql = "SELECT Users_UserID, count(Users_UserID) AS total FROM video GROUP BY Users_UserID";
$sql2="SELECT UserID, FirstName, LastName FROM users";
$result = $connection->query($sql);
$result2 = $connection->query($sql2);
?>
<table width="400" border="0" cellspacing="1" cellpadding="0">
<tr>
<td><form name="deleteSingleVideo" method="post" action="">
<table width="400" border="0" cellpadding="3" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td bgcolor="#FFFFFF"> </td>
<td colspan="4" bgcolor="#FFFFFF"><strong>Delete user video</strong> </td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF">#</td>
<td align="center" bgcolor="#FFFFFF"><strong>First Name</strong></td>
<td align="center" bgcolor="#FFFFFF"><strong>Last Name</strong></td>
<td align="center" bgcolor="#FFFFFF"><strong>User ID</strong></td>
<td align="center" bgcolor="#FFFFFF"><strong>Amount of videos</strong></td>
</tr>
<?php
session_start();
if ($result->num_rows > 0) {
while (($row=$result->fetch_assoc())&& ($row2=$result2->fetch_assoc()) ) {
?>
<tr>
<td align="center" bgcolor="#FFFFFF"></td>
<td bgcolor="#FFFFFF"><center><?php echo $row2['FirstName']; ?></center></td>
<td bgcolor="#FFFFFF"><?php echo $row2['LastName']; ?></td>
<td bgcolor="#FFFFFF"><center><a href="DeleteVideo.php" target="_blank"><?php echo $row['Users_UserID'];
$_SESSION['id']=$row['id'] ?></center></td>
<td bgcolor="#FFFFFF"><center><?php echo $row['total'];?></a></center></td>
</tr>
<?php
}
}
?>
<tr>
<td colspan="5" align="center" bgcolor="#FFFFFF"><input name="Done" type="submit" id="Done" value="Done" </td>
</tr>
<?php
$connection->close();
if(isset($_POST['Done'])){
header( "Location: Home.php" );
}
?>
</table>
</form>
</td>
</tr>
</table>
<?php
?>
this is not a good use of session
use get method to send such data :
append the id to href url --->href="<?php echo "DeleteVideo.php?id="$row['id'] ?>";
get data in the next page by accessing global variable ---> $_GET['id']
..
In the DeleteVideo.php your variable is $_GET['id']
use this code
and that id value get in xyz.php
$value=$_request['id'];
or
$value=$_Get['id'];
I was looking at the usage of jquery filter for data attributes, in this case, tables containing three data variables, i.e, team, specialization and level. Please do let me know what the best approach is and what the typical usage methodology are.
Here is my code html:
<table data-team="<?php print $name['team']; ?>" data-specialization="<?php print $name['speciality']; ?>" data-level="<?php print $name['level']; ?>" cellpadding="0" cellspacing="0" border="0" width="670px" class="jobs"><tr><td>
<tr><td colspan="4"><strong><?php print $name['title'] ?></strong></td>
<td></td><td></td><td></td></tr>
<tr>
<td width="100">Location : </td>
<td colspan="3"><?php print ($name['location']);?> </td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> Job Code : </td>
<td width="460"><?php print $name['id'] ?></td>
<td></td>
<td></td>
<td><a data-action="showDesc,jumpTo" href="javascript:;" id="<?php print($name['id']);?>" class="more">More Details </a></td>
</tr></td></tr>
</table>
The javascript that I have I got from one other Stack Overflow question, and it works on showing based on one matching attribute, here is my code:
$("#search").click(function() {
var team=$('#selectOne').val();
var specialty=$('#selectTwo').val();
var level=$('#selectThree').val();
var teams=[];//
var special=[];
var level=[];
//teams=$('.jobs').data('team');
//alert(teams);
$(".jobs").hide();
$('.jobs').filter(function(){
return $(this).data('team') === team;
}).show();
});
});
I want to put all the data-team attributes into the array, iterate over it and then check if each table contains it, in which case to the next array, to check and so on. if the data values match then, show.
Turns out my error was just that I re-declared the variables team[]. so basically, this:
$('.jobs') .hide().filter('[data-team="'+team+'"][data-specialization="'+specialty+'"][data-level="'+level+'"]').addClass('num').show();
Works fine now.