We Keep Coding

Dynamic attribute value element locator in Protractor

When I add a new button with some value it gets dynamically added into DOM. Non-Angular HTML element for this button is:
<li class="ui-state-default droppable ui-sortable-handle" id="element_98" data-value="2519">
25.19 EUR
<button type="button" class="btn btn-default removeParent">
<span class="glyphicon glyphicon-remove" aria-hidden="true">
</span>
</button>
</li>
Once I remove this button I want to check it is not present anymore. Element that I'm searching for is data-value="2519"and this could be anything I set, like for example 2000, 1000, 500, 1050,...
In page object file I have tried to use the following:
this.newValueButtonIsNotPresent = function(item) {
newValueButton = browser.element(by.id("containerQUICK_ADD_POINTS")).all(by.css('[data-value="' + item + '"]'));
return newValueButton.not.isPresent();
};
And in spec file I call this function as follows:
var twentyEurosButtonAttributeValue = '2000';
describe("....
it ("...
expect(predefined.newValueButtonIsNotPresent(twentyEurosButtonAttributeValue)).toBeTruthy();
I know this is not correct, but how I can achieve something like that or is there another way?

Stupid me, I found a simple solution. Instead dynamically locating an element I located the first on the list, which is always the one, which was newly added and then checked if it's text does not match:
Page object file:
this.newValueButtonIsNotPresent = function() {
newValueButton = browser.element(by.id("containerQUICK_ADD_POINTS")).all(by.tagName('li')).first();
return newValueButton.getText();
};
Spec file:
// verify element 20.00 EUR is not present
predefined.newValueButtonIsNotPresent().then(function(value) {
expect(value).not.toEqual(twentyEurosText);
});

$('#notificationClick').click not working

so I'm trying to make this works here is the jquery+php.
When I try to trigle the click in jquery it doesnt even does the "alert()".
PHP(Updated):
$MSG_Notification_sql = mysqli_query($Connection, "SELECT * FROM notifications WHERE user_id='".$bzInfo['id']."'");
while ($MSG_Notification_row = mysqli_fetch_array($MSG_Notification_sql)){
$MSG_Notification_rows[] = $MSG_Notification_row;
}
foreach ($MSG_Notification_rows as $MSG_Notification_row){
$bzWhen = date('d-m-Y H:m:i', strtotime($MSG_Notification_row['when']));
echo '<form method="POST">
<div class="notificationClick notification-messages info">
<div class="user-profile">
<img src="assets/img/profiles/d.jpg" alt="" data-src="assets/img/profiles/d.jpg" data-src-retina="assets/img/profiles/d2x.jpg" width="35" height="35">
</div>
<div class="message-wrapper">
<div class="heading"> '.$MSG_Notification_row['title'].'</div>
<div class="description"> '.$MSG_Notification_row['description'].' </div>
<div class="date pull-left"> '.$bzWhen.'</div>
</div>
<input name="notificationID" value="'.$MSG_Notification_row['id'].'" style="display: none" />
<div class="clearfix"></div>
</div>
</form>';
}
Javascript(Updated):
$(document).ready(function(){
$('.notificationClick').click(function(event){
alert('Ok');
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = $('#notificationClick').serialize();
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : '../../class/notifications/msgs_del.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json' // what type of data do we expect back from the server
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
window.location = '/?page=messages&sub=inbox&bx=preview&id='+ data.notificationID +'';
});
event.preventDefault();
});
});
Can anybody help me please? I'm trying to complete this but nothing :(

First as the others say, ids need to be singular. So use the class you already have. Now inside, you need to use the current form that you clicked on, not all the forms.
$('.notification-messages').click(function(event){ //<-- change to class
var formData = $(this).closest("form").serialize(); //change to this
...
If you are loading these dynamically, you need to use event delegation
$(document).on("click", '.notification-messages', function(event){
var formData = $(this).closest("form").serialize();
...

You can concatenate the timestamp to your id to make it unique (separated by an _ if you like) and change your selector for the click event to $('[id*="notificationClick_"]')
On the other hand, you might want to use a class instead, that's what it's there for:
$(".notification-messages")

You're using ID, you can only bind click to 1 id not multiple ids.
You should use the class to bind the .click function.

Find an element value with jQuery

In the following HTML markup, how can I get the value of the input field which has the name module_id[], by clicking on the span class .click.
HTML:
<div class="module">
<div class="info">..</div>
<div class="ctrl"><span class="click">Click</span></div>
<input type="hidden" value="module1" name="module_id[]" />
<input type="hidden" value="title" name="module_title[]" />
</div>
I have tried this:
jQuery:
$('.module').on('click','.click',function(){
var target_module = $(this).parent();
var module_id = target_module.find('input[name=module_id\\[\\]]').val();
alert(module_id);
});
Demo:
http://jsfiddle.net/FKdNJ/

$(this).parent(); is giving you the <div class="ctrl"> instead.
You could use $(this).parent().parent(), but a more flexible solution is to use closest() instead;
$(this).closest('.module');
You can see this working here; http://jsfiddle.net/FKdNJ/5/
FWIW, you could also change your approach completely, and use e.delegateTarget to retrieve the .module element directly (http://jsfiddle.net/FKdNJ/7/);
$('.module').on('click','.click',function(e){
var target_module = $(e.delegateTarget);
var module_id = target_module.find('input[name=module_id\\[\\]]').val();
alert(module_id);
});

With:
$('input[name="module_id[]"').val();
jsFiddle example 1
$('.module').on('click', '.click', function () {
console.log($('input[name="module_id[]"').val());
});
If you have more than one set of this block of code, use $(this).closest('.ctrl').next().val():
as in:
$('.module').on('click', '.click', function () {
console.log($(this).closest('.ctrl').next().val());
});
jsFiddle example 2

Try this
$('.module').on('click','.click',function(){
alert($(this).closest('.module').find('[name="module_id[]"]:first').val())
});
http://jsfiddle.net/FKdNJ/3/

Try this. You're probably better off using html 5 data- attributes if possible.
$('span.click').click(function(){
var moduleId = $(this).closest("div.module").find("input[name='module_id[]']").val()
alert(moduleId);
});

I have added a answer in fiddle:
$('.click').on('click',function(){
alert($('input[name=module_id\\[\\]]').val());
})
http://jsfiddle.net/FKdNJ/6/

How Do I Replace/Change The Heading Text Inside <h3></h3>, Using jquery?

How do I change/replace the <h3> text: "Featured Offers" using javascript to say "Public Offers" instead?
</div> <!-- FEATURED OFFERS -->
<div class="panel">
<div class="head">
<h3>Featured Offers</h3>
</div>
<div class="body">
<table>
<thead>
<tr>

If you can select it, you can manipulate it.
Try this:
$(".head h3").html("your new header");
But as others mentioned, you probably want head div to have an id.

you don't - not like this.
give an id to your tag , lets say it looks like this now :
<h3 id="myHeader"></h3>
then set the value like that :
myHeader.innerText = "public offers";

$("h3").text("context")
Just use method "text()".
The .text() method cannot be used on form inputs or scripts. To set or
get the text value of input or textarea elements, use the .val()
method. To get the value of a script element, use the .html() method.
http://api.jquery.com/text/

Give an id to h3 like this:
<h3 id="headertag">Featured Offers</h3>
and in the javascript function do this :
document.getElementById("headertag").innerHTML = "Public Offers";

try this,
$(".head h3").html("New header");
or
$(".head h3").text("New header");
remember class selectors returns all the matching elements.

Something like:
$(".head h3").html("Public offers");

jQuery(document).ready(function(){
jQuery(".head h3").html('Public Offers');
});

You can try:
var headingDiv = document.getElementById("head");
headingDiv.innerHTML = "<H3>Public Offers</H3>";

Hope that help someone:-
Element with a class attribute with the value of "className":
<h3 class="className"></h3>
You will make a refernce of by the class name:
const newTitle = document.querySelector(".className");
Then change the content:
newTitle.textContent = "New Title";

Javascript to get the id of the hyperlink clicked

I would like to know how i can set the current hyperlink id to a hidden field on clicking the corresponding links. The html control code is as follows:
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent" class="thickbox" id="ExpressionsLink"
title="Create expression column" onclick="keepID()">Add Expressions Model</a>
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent" class="thickbox" id="AggregateMethodLink"
title="Create aggregate column">Add Aggregate Methods</a><input id="HiddenIdHolder"
type="hidden" />
I need the id of the link clicked on the hidden field 'HiddenIdHolder'.
Javascript
function keepID() {
var hiddenInput = document.getElementById("HiddenIdHolder");
hiddeninput.value= ? // What can i do here to get the id?
}

this refers to the element itself. Example on jsFiddle
onclick="keepID(this)"
Then
function keepID(element)
{
var hiddenInput = document.getElementById("HiddenIdHolder");
hiddeninput.value = element.getAttribute("id");
}

Use jQuery:
$('a').click(function() {
$('#HiddenIdHolder').val($(this).attr('id'))
})

You should modify your HTML to provide argument for KeepID function:
ooxx
note that you should provide a this argument when invoke KeepID function, then in KeepID function, you can access this element from argument:
function KeepID(src) {
document.getElementById("HiddenIdHolder").value = src.id;
}