Develop Reference

jquery attr get only class but not other attributes

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

Replacing html entities with a text using javascript

Please I want to replace html entities with a text like so: <img src='my_image.jpg'> so I ran this code:
var image = $("#my_div").html($("#my_div").html().replace(/<img scr='(.*?)'>/g, "{{$1}}"));
so when its outputted it show like this: {{my_image.jpg}} but when outputted this is what displays: [object Object]. Please I need help because I know am getting something wrong.

You can change an img element's attribute (src in this case) like this :
Markup:
<img id="eximg" src="source.jpg">
Script:
$('#eximg').attr('src','anothersource.jpg');

You can use a function to create the new value
<img id="myid" src="mypicture.jpg">
<script>
$('#myid').attr('src', function(i, origValue){
return "{{" + origValue + "}}";
});
</script>

strange variable scope in jQuery

I know scope in javascript in sometimes tough but this time I suspect the issue may be jQuery execution order. In the following code I try to define a simple HTML element (simulates a button) in javascript and pass different text to it when mounting it in HTML using jQuery:
var name;
var buttonsecondary = '<div class="buttonsecondary clicked"><p>'+name+'</p></div>';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="content-item" id="things4">
<a href="aFabrica.html">
<div class="itemHome">
<div class="bg" id="buttonsecondaryfabrica"></div>
<script>
$(document).ready(function() {
var name = "A Fábrica";
$("#buttonsecondaryfabrica").after(buttonsecondary)
})
</script>
</div>
</a>
</div>
<div class="content-item">
<a href="lojas.html">
<div class="itemHome">
<div class="bg" id="buttonsecondaryloja"></div>
<script>
$(document).ready(function() {
var name = "Loja";
$("#buttonsecondaryloja").after(buttonsecondary)
})
</script>
</div>
</a>
</div>
The problem is that I get the same text on both buttons: "Store" although in the first alert getting "Street" and in the second "Store"...
Does anyone know how to explain it?

The problem is that the buttonsecondary variable already contains the final HTML of the button because it's merely a concatenated string.
You need to generate the desired HTML each time:
function generateButton(name)
{
return '<div class="buttonsecondary clicked"><p>' + name + '</p></div>';
}
Then:
var name = "A Fábrica";
$("#buttonsecondaryfabrica").after(generateButton(name));
And
var name = "Loja";
$("#buttonsecondaryloja").after(generateButton(name));

In your original code, you are creating a string with variables that are changed later on. When you change the variables, the string does not get updated because the variables are not bound. You need to create a new string if you want to pass in a new value for the name.
Change this:
var buttonsecondary = '<div class="buttonsecondary clicked"><p>'+name+'</p></div>';
To this:
function createSecondaryButton(name) {
return '<div class="buttonsecondary clicked"><p>' + name + '</p></div>';
}
Or, since you are using jQuery:
function createSecondaryButton(name) {
return $('<div>').addClass('buttonsecondary clicked')
.append($('<p>').text(name));
}
Then simply call the function:
$("#buttonsecondaryfabrica").after(createSecondaryButton('A Fábrica'));
$("#buttonsecondaryloja").after(createSecondaryButton('Loja'));

add dynamic id to links using Javascript?

I have many links on a page generated dynamically. Now I want to attach ids to them based on a link just before them.
I have written the following function to return me the value I want to add as id to the href I want.
<script>
function movingid(){
var res = location.href.replace(/.*student\/(.*)\/subject/, '$1');
var subjectid = res.split("/")[2];
var classid = res.split("/")[1];
var sectionid = res.split("/")[0];
return classid+"-"+sectionid+"-"+subjectid;
}
</script>
So what I did is
<a href="javascript:void(0);" id= "javascript:movingid();" >Move To</a>
But the HTML thus generated is not calling the function. Instead its adding the id as plain text form like this id= "javascript:movingid();". How can I call the function?
Please help

Create the links this way:
<a href="javascript:void(0);" id= "" >Move To</a>
Maybe wrapping the links with a div, which gets the id "mylinks". After this call a function adding the id with this code:
i = "1";
$( "div#mylinks a" ).each(function( index ) {
$(this).attr("id",i);
i++;
});
Instead of i take your code from the movingid function you already posted.

jquery toggle not functioning

My Jscript/Jquery is not working. I can alert but I cannot get my div to toggle. Can someone explain to me why please? My code is below. I am using JSP if it matters.
My Javascript
$(window).ready(function(){
$(".moreButtonClass").click(function(e){
var id = this.id;
var cleanid = id.replace(/[^\d]/g, "");
var dog = "post" + cleanid;
alert(dog);
$(dog).toggle();
});
});
My Html
<div id="content">
<h1>Site Update Log:</h1>
<% for(int i = 0; i<2; i++){ %>
<div class="blogPost" id="postGroup<%= i %>">
<div>The ID is :<%out.print(indexModel.miniBlogConnector.GetID(i));%></div>
<div>The DATE is :<%out.print(indexModel.miniBlogConnector.GetDate(i));%></div>
<div>The AUTHOR is :<%out.print(indexModel.miniBlogConnector.GetAuthor(i));%></div>
<div>The MINIPOST is :<%out.print(indexModel.miniBlogConnector.GetShortPost(i));%></div>
<div class="MainPost" id="post<%=i%>">The POST is :<%out.print(indexModel.miniBlogConnector.GetPost(i));%></div>
<button type="button" class="moreButtonClass" id="moreButton<%=i%>">more</button>
</div>
<% } %>
</div> <!-- end #content -->
My CSS
.MainPost {
display:none;
}
Can anyone please explain to me why I can alert dog and get the correct variable name. But when I try to toggle it; it is not functioning. Nothing happens. No errors; no changes. It absolutely does nothing. I even tried using console.log and was unable to get it to react. The button works because the alert works; but the toggle is not functioning.
Can any one let me know how to fix this please?

Here dog is just a variable, and not a DOM node.
You need to do:
$("#"+dog).toggle(); //assuming it is an id. if class, use . instead of #

If the content in the dog is an ID, use this:
$("#" + dog).toggle();
Or, if it is a class, use this:
$("." + dog).toggle();
Since, in your case, it is going to be an ID, you need to use the first one.

You missed the selector # here.Then it will consider as a variable not DOM element
var dog = "#post" + cleanid;
$(dog).toggle();
or
$("#"+dog).toggle();