We Keep Coding

How to pass parameters to destination url using javascript

I am trying to pass a movie id to the url when a movie is clicked on, and retrieve the movie id in the destination page. I know forms do this by default, but I want to accomplish this with an anchor element.
So for example i have this homepage url:
http://127.0.0.1:5500/client/index.html
I click on a movie on the homepage and the movie has an anchor tag which redirects to a different file:
http://127.0.0.1:5500/client/views/movies.html
The movie has an id that I want to be available in the /movies.html page, and the movies url should look something like this:
http://127.0.0.1:5500/client/views/movies.html?movieId=1234
How would I accomplish this using javascript?
Here is the html:
<div class="card">
<a href="${'/client/views/movies.html'}" data-src="1234" >
<img class="img-size" src="${poster_image}" alt="">
</a>
<div class="card-body">
<h6 class="card-title"> ${el.title}</h6>
<p>${el.release_date}</p>
</div>
</div>

Just add the desired parameter in the anchor tag href itself like this:
<div class="card">
<a href="${'/client/views/movies.html?movieId=1234'}" data-src="1234" >
<img class="img-size" src="${poster_image}" alt="">
</a>
<div class="card-body">
<h6 class="card-title"> ${el.title}</h6>
<p>${el.release_date}</p>
</div>
</div>

How to use aria-label and aria-labelledby to get visible and non-visible(customized) value from the reader?

Is there any way to get the visible label name and the customized name either by using aria-label or by using aria-labelledby or any other attribute
For example the below code is saying:
<div>
<div id="shankar">Name</div>
<input type="text" aria-labelledby="shankar"/>
</div>
<div>
<div id="set-address">Address</div>
<input type="text" aria-label="set-address"/>
</div>
reader:
Name edit text(for first input box)
Set-address edit text(for 2nd input box)
I have gone through this question: Difference between aria-label and aria-labelledby
What should I do here to get the message as:- Set-address for Address edit text?
which attribute should I use here?

For screen reader, and because your case if for form input, the right syntax is :
<div>
<label for="shankar">Name</label>
<input type="text" id="shankar"/>
</div>
You have to associate Label tag by for attribute who target "id" attribute.
If you are on another case (like dropdown or tabpanel) :
Will be something like (here example show for case dropdown of translation):
// My label structure
<button id="associatedLang" role="button" title="" aria-expanded="true">
<span class="ps-current-lang">FR</span>
<span aria-hidden="true" class="ps-icon ps-icon-chevron-down"></span>
<span class="sr-only">Changer de langue</span>
</button>
//MY associated content
<ul aria-labelledby="associatedLang">
<li class="ng-star-inserted">
<a target="_self" href="####" lang="en" title="EN - English">
EN
</a>
</li>
</ul>

append a div with class "modal-trigger" using jquery.append() not working

i have a modal named "modalcreatelist" using materializecss. the modal will triggered when some div is clicked using an a href tag.
<div id="modalcreatelist" class="modal">
<div class="modal-content">
<div class="col s12 m6 l12">
<div class="row">
<h6><b>Create a list..</b></h6>
<div class="divider"></div> <p>Title</p>
<input type="text" placeholder="Title.." id="listTitle">
<input type="hidden" id="hiddenListId" value="<?php foreach($board as $r) {echo $r->boardId;}?>">
</div>
</div>
</div>
<div class="modal-footer"> <a class="waves-effect waves-red btn-flat modal-action modal-close">Close</a> <a class="waves-effect waves-red btn-flat modal-action modal-close" onclick="createList()">Save</a>
</div>
</div>
so i use this html code to trigger the modal, this works perfectly fine
<div id="invoice-line" class="left-align white-text">
<a href="#modalcreatelist" class="modal-trigger white-text">Add a List..
</a>
</div>
however when i move the code to my javascript file, i try to append the div using jquery .append()
and it is not working
the class "modal-trigger" is not loaded at all
the url is showing like 'localhost/project#modalcreatelist'
$("#divCreateList").append'(<div id="invoice-line" class="left-align white-text">Add a List..</div>')

You need to rebind modal-trigger after adding it to DOM. It works the first time cause the bind is done based on class name on document.ready. You need to add an event listener for click on modal-trigger and add the logic that opens your modal.
That means, after adding the content through JavaScript. You have to write something like.
$('.modal-trigger').on('click', function() { open modal; })
replace 'open modal' with your logic.

Dynamically created div is draggable but not droppable

on the left sidebar, i have (hard-coded) a "Report Sections" list of dragable objects (li's - div's) and a list of "Widgets" (also li's - div's) that are dynamically generated from some database records
i dynamically create a number of rows (div's) by dragging from the reports section elements and dropping (cloning) them into the container.
the list of the widgets starts with a hard-coded element (called "Alerts") and then continues with the dynamically created ones (DISSATISFACTION DRIVERS*, etc...)
when i drag the first (hard coded) widget, "Alerts," into a Row, the dropping works fine and the result looks like this
when i try to drop any other (dynamically created) widget from the list, the dragging works but the dropping doesn't work. I am at loss! If the dragging works on the widgets, then the problem should be with the droppable container, not accepting the widgets. If it is so, then why would the droppable functionality work in the container for the hard coded "Alerts" widget (same div class, same everything) and not for the dynamically created ones? Inspecting the page elements, specifically the widget list, all the entries look the same (except for the description.)
the code for the hard coded "Alerts:"
<div class="box box-element ui-draggable">
<a class="remove label label-danger" href="#close">
<i class="glyphicon glyphicon-remove"></i> remove</a>
<span class="drag label label-default ui-draggable-handle">
<i class="glyphicon glyphicon-move"></i> drag</span>
<div class="preview">Alerts</div>
<div class="view">
<div contenteditable="true" class="alert alert-success alert-dismissable">
<h4>Alert!</h4>
</div>
</div
</div>
the code for the first dynamically created widget (the rest of the widgets are the same)
<div class="box box-element ui-draggable">
<a class="remove label label-danger" href="#close">
<i class="glyphicon glyphicon-remove"></i> remove</a>
<span class="drag label label-default ui-draggable-handle">
<i class="glyphicon glyphicon-move"></i> drag</span>
<div class="preview">DISSATISFACTION DRIVERS*</div>
<div class="view">
<div contenteditable="true" class="alert alert-success alert-dismissable">
<strong>Widget!</strong> Widget Name.
</div>
</div>
</div>
any ideas?

Generate unique div id in php to assign javascript to it

I generate the following pieces of code via php (unknown number in advance) and they are all wrapper in my 'item-container' div:
<div id="item-size" class="item-size">
<div class="view pic-transition">
<figure id="ribbonnew" class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
I generate a ribbon on SOME of these 'item-size' div's and via javascript i want the ribbon to be hidden when the mouse is hovered over and back to normal when mouse out.
My javascript code is:
$("#item-size").hover(function(){
$('#ribbonnew').hide();
},function(){
$('#ribbonnew').show();
});
This of course only works for the first element, so I guess I need to assign ID's to the 'item-size' div's ? How do I do this AND create the javascript which binds the mouse hover to every of these divs (how to pass the size of how many I created, so I could add ID's from 0 to size)?
As an extra question, is there also a way to make the ribbon fade in and fade out slowly? .fadeOut(1000); is not delivering the expected result

Remove all ids :
<div class="item-size">
<div class="view pic-transition">
<figure class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
And use a dot . in your selectors to match elements by classes :
$(".item-size").hover(function(){
$(this).find('.ribbonnew').hide();
},function(){
$(this).find('.ribbonnew').show();
});
For your extra question, you can use a parameter in the hide and show jquery methods for animation :
$(this).find('.ribbonnew').hide(400);
Edit : if the html is inserted dynamically, try event delagation instead :
$('#item-container').on('mouseenter mouseleave', '.item-size', function(){
$(this).find('.ribbonnew').toggle(400);
});

(if you really want to use ids)
Generate a unique id using the uniqid() function, and name all your item-size elements.
<?php
$unique_id = uniqid();
?>
<div id="<?=$unique_id?>item-size" class="item-size">
<div class="view pic-transition">
<figure class="ribbonnew">
<img class="ribbonnewimg" alt="" src="../images/endingsoonribbon.png">
</figure>
<img src="../images/woman.jpg" />
<div class="mask">
<h2>Title</h2>
<p>This is a test of a description for an item.</p>
Read More
</div>
</div>
</div>
Then, match all elements with that unique id as part of their ids.
$("*[id^='<?=$unique_id?>']").hover(function(){
$(this).find('figure.ribbonnew').hide();
},function(){
$(this).find('figure.ribbonnew').show();
});