I have a div containg a few dynamically generated dropdowns.
I want to clone this and add it underneath the original. The code for the original is:
<div id="subjectselectiondiv" style="width:inherit;">
<h4>Select the subjects that you are able to tutor</h4>
<div id='choices'>
<script type="text/javascript">
var doc = document.getElementById("choices");
var subj_div = document.createElement('div');
subj_div.setAttribute('class', 'selectSearchBar');
subj_div.innerHTML = '<select id="level'+counter+'" name="level'+counter+'" class="selectSearchBar"><?php echo "<option>Level</option>"; while($row = mysqli_fetch_array($result_level, MYSQLI_ASSOC)){echo "<option value=".$row['id'].">".$row['level']."</option>";}?></select><div id="subject'+counter+'" style="display:inline;">sBar2</div><div id="topic'+counter+'" style="display:inline;">sbar3</div>';
doc.appendChild(subj_div);
</script>
Add another subject
</div>
I thought that the function Repeat() would work with:
function Repeat(){
counter++;
$('#choices').clone().appendTo('#subjectselectdiv');
event.preventDefault();
}
but this isnt working - am I missing something?
Thanks
Name mismatches:
<div id="subjectselectiondiv" style="width:inherit;">
^^^^^^
$('#choices').clone().appendTo('#subjectselectdiv');
^^^
What you're attempting to append to doesn't exist. Most likely if you'd bothered checking your javascript console, you'd have seen the warnings/errors about the non-existing element.
Related
Each time a new message is sent, it is automatically displayed for each user. The message consists of the message, a timestamp, and the sender's profile picture. Using the HTML template, the message and timestamp displays but not the image.
HTML
<!--template for javascript incoming-->
<template id="incoming_template">
<div class="incoming_msg_img" data-template="temp_img">
</div>
<div class="received_msg">
<div class="received_withd_msg" aria-describedby="name">
<small id="name" data-template="sender">User</small>
<p data-template="temp_message"></p>
<span class="time_date" data-template="temp_time"></span></div>
</div>
</template>
JavaScript
$(function () {
// Get template
var template = $("#incoming_template").html();
var template_dom = $('<div/>').append(template);
// Create a new row from the template
var $row = $(template);
var img = "<img src=../static/avatars/beard.png>";
// Add data to the row
$row.find("p[data-template='temp_message']").text(data.msg);
$row.find("span[data-template='temp_time']").text(data.timestamp);
$row.find("small[data-template='sender']").text(data.sender);
$row.find("div[data-template='temp_img']").html(img);
// Add the row to the table
$("#newmsg").append($row);
updateScroll();
});
Currently, you are wrapping some HTML string in a jQuery object. You need to temporarily create a DOM object out of your template HTML so that the jquery find function can properly find the elements inside a DOM tree. See revisions below:
// Get template
var template = $("#incoming_template").html();
// Add this line to your code
var template_dom = $('<div/>').append(template);
// Create a new row from the template
var $row = $(template_dom);
Then change this line:
$row.find("div[data-template='temp_img']").text(img);
To this:
$row.find("div[data-template='temp_img']").html(img);
Since you are appending a markup and not some text.
Read more here: What is the difference between jQuery: text() and html() ?
i am trying to dynamically set an attribute to a div element and then get it back through jquery. the jquery attr method works when i try to get the class but returns undefined when i try other attributes. this is i have tried,
my php code
while($records = mysqli_fetch_assoc($parcel)){
echo "<div class='records' id='".$records['id']."' code='".$records['Tracking_code']."'>
<div class='record'>".$records['Sender_name']."</div>
<div class='record'>".$records['Tracking_code']."</div>
<div class='record'>".$records['Parcel_location']."</div>
<div class='record'>".$records['Parcel_status']."</div>
<div class='record btn-record'><a class='btn-record' href='updateRecord.php?id=".$records['id']."&trackId=".$records['Tracking_code']."'>Edit</a></div>
<div class='record btn-record'><a class='btn-record' href='parceldetail.php?id=".$records['id']."&trackId=".$records['Tracking_code']."'>View</a></div>
</div><br />";
this is my jquery code
"use strict";
$('.records').on('click', function(e){
let code = $(this).attr('code');
let uid = $(this).data('id');
console.log(code);
window.location.replace(`updaterecord?id=${uid}&&trackId=${code}`);
})
});
both the code and uid return undefined. please help. what am i doing wrong
Im trying to get a link where I have to add a countrycode to a link.
Im trying this:
var link = "http://restcountries.eu/rest/v1/alpha?codes=" + myData;
Where myData is defined by:
var div = document.getElementById("dom-target");
var myData = div.textContent;
dom-target:
<div id="dom-target" style="display: none;">
<?php
$output = $_GET['id'];
echo htmlspecialchars($output);
?>
</div>
Where the $_GET['id'] is a code like FR or NL.
but for some reason when I console.log() it, it comes out with the link and underneath that I see the countrycode, indicating that it hasnt added the countrycode to the link.
Am I doing something wrong here?
var link = "http://restcountries.eu/rest/v1/alpha?codes=" + myData.trim();
the .trim() will remove and spaces
if that doesn't work you can try myData.replace(/(\r\n|\n|\r)/gm,""); this will remove line breaks.
good luck
I'm struggling to get the Jquery 'find' to work in the following code. I've stripped it down to the very basics. In short, what I'm trying to achieve is, I have two lists containing the same names. When the name is clicked on the top list, I want a more detailed box to toggle open below. Then when either is clicked again, the lower box will toggle closed again.
I assume something is wrong in the Jquery with the 'find'. The other part, which collects the ID works fine when the ID is sent to an alert.
I've looked through other answers and that find section is from another answer but it doesn't work in this example, so presumably I'm doing something wrong on some other level.
Bear in mind that just finding the div or paragraph element won't work for my full code. I've just put them in those tags for this example. I basically need to find (in this example), the para inside the correct div (obviously there's only one div here but loads in my full code).
<html>
<body>
<?php
for ($x=0; $x<10; $x++) {
echo "<p class = 'player_name' data-playerid = $x>Player $x</p>";
}
echo "<div class = 'individual_player_reports'>";
for ($x=0; $x<10; $x++) {
echo "<p class = 'player_name' data-playerid = $x>Player $x</p>";
}
echo "</div>";
?>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$('.player_name').on('click',
function() {
var id = $(this).data().playerid;
$('.individual_player_reports').find("[playerid='" + id + "']").toggle();
});
</script>
</body>
playerid !== data-playerid
Data attributes are just like any other attributes. Use the full name of the attribute when using the attribute equals selector.
$('.player_name').on('click',function() {
var id = $(this).data().playerid;
$('.individual_player_reports').find("[data-playerid='" + id + "']").toggle();
});
$('.player_name').on('click',function() {
var id = $(this).data().playerid;
$('.individual_player_reports').find("[data-playerid='" + id + "']").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="player_name" data-playerid='1'>1</p>
<p class="player_name" data-playerid='2'>2</p>
<p class="player_name" data-playerid='3'>3</p>
<div class="individual_player_reports">
<p data-playerid='1' style="display: none;">1</p>
<p data-playerid='2' style="display: none;">2</p>
<p data-playerid='3' style="display: none;">3</p>
</div>
As #T.J. Crowder suggests, you don't need to use .data() in this case, it would be more efficient to skip .data and just get the attribute value directly to avoid initializing the data cache unless you are using .data()'s features elsewhere too.
var id = $(this).attr('data-playerid');
I am self taught PHP with little js experience so it is probably something really simple, but I have made a js function to change the inner html of a table cell and added an onchange event listener on a select element to call the function. However nothing happens when I change the selected value and I have no idea why, considering it is so simple it should. Please help.
td that I want to change:
echo '<tr><td id="pastEvents">';
for($i=0;$i<=3;$i++){
echo '<table class="invisible"><tr><td><img src="/'.$pastEvents[$i]['banner'].'" alt="Event Banner"></td></tr><tr><td>'.$pastEvents[$i]['name'].'</td></tr></table>';
}
echo '</td></tr>';
Event Listener:
echo '<tr><td><table class="invisible"><tr><td>Number Shown: <select name="select" onchange="changePast()"><option value="3">3</option><option value="10">10</option><option value="20">20</option><option value="all">All</option></select></td></tr></table></td></tr>';
Script:
<script>
function changePast(){
var shown = document.getElementsByName("select");
document.getElementById("pastEvents").innerhtml = "test";
}
</script>
actually it is innerHTML
<div id="A"></div>
document.getElementById("A").innerHTML = 'text'
The correct way to use is .innerHtml() instead of .innerhtml()
<script>
function changePast(){
var shown = document.getElementsByName("select");
document.getElementById("pastEvents").innerHtml = "test";
}
</script>