Develop Reference

Encountering tagName.toLowerCase is not a function

I'm trying to automate a web application built on Angular on the front-end.
I have a form where I need to click a button.
HTML code:
JavaScript code to click:
cy.get('.modal-body.container .ng-star-inserted a.ng-star-inserted').click()
Error in Cypress runner:
I do not understand why I see the tagName.toLowerCase() function while executing a click on the ADD BUTTON of the form page. I have not defined this function in the code anywhere.

Opened an issue https://github.com/cypress-io/cypress/issues/8191 and seems like it is a bug on Cypress side. However I found a workaround by using the .then() function. Code below :
cy.get('.modal-body.container .ng-star-inserted a.ng-star-inserted').then(($el) => {
console.log($el)
}).find('.mat-icon').then(($ol) => {
$ol.click()
})

framework 7 on click not working while navigation

I have used framework built-in formToJSON() to get the form values. I have used click event to console the value.
$$("#query-submit").on("click", function () {
var queryForm = app.formToJSON("#query-form");
console.log(JSON.stringify(queryForm));
});
It works fine when page loads first time. But if I changed navigation to other page and return back to first page.
On debug, I found click event is not working when I went back to form page.
Also found this warning in console.
What is wrong here.
Note All pages were loaded via AJAX

Try this:
$$(document).on('click', '#query-submit', function(){
// your code
});

Check if a tweet completely done or user close the popup

I am working on a web app using AngularJs as front-end and Laravel as back-end
In many views I have sharing bar with tweet button, I managed to add a share button using twitter javascript widget
twttr.widgets.createShareButton(
'https://dev.twitter.com/',
document.getElementById('tw'),
{
count: 'none',
text: 'Sharing a URL using the Tweet Button'
}
).then(function (el) {
console.log("Button created.", el);
});
and also I managed to detect the click event on this twitter share button via
twttr.events.bind(
'tweet',
function (event) {
console.log('tweeet', event);
}
);
but this event fires if user clicked on tweet button even if he just closed the popup and didn't tweet !!
I found this thread https://twittercommunity.com/t/need-to-check-if-user-tweet-like-retweet-post-successfully-using-js-intent/61432 on twitter community but it has been since Feb,2015 I hope there is something new after more than one year !
Is there anyway to track a complete successful tweet!!
Thanks in advance.

Populating Bootstrap 3 Modal on Button Click

I am a junior web developer and am currently creating a dynamic website. Within this website I am using Javascript in order to structure my pages e.g. entering HTML into a var string and calling upon it to load on the page when necessary.
I am trying to use the Bootstrap Modal for various forms to input data into my database. This is giving me some trouble as some elements such as datepicker is not working I assume because the Modal loads on click of the button where as the date picker loads on page load.
Anyway, I just wanted to know if there is a way to have content and my custom Javascript to load when the bootstrap modal button is clicked e.g.
var outputContainer1 = $('#selectCraft');
$.ajax(apiPrefix + '/craft' + apiSuffix, {
error: function() {},
success: function(data){
for(var i in data){
$('#selectCraft').append('<option value="'+ data[i].id +'">'+data[i].aircraft_name+'</option>');
}
},
type: 'GET'
});
As you can see this is a select element that is getting its information from the database. Which I want to load on button click rather then at the page-load.
My data target for the button is "#flightModal" and the Modal ID is "#flightModal".
If anyone can help I would much appreciate.
Thanks
Ibrahim

You just need to initialize your datepicker after the modal is created. So build you DOM in the success callback, then initiaze the datepicker as you would on a normal page load:
success: function () {
// ...
$('#datepicker').datetimepicker();
}
By the way, if you are working with modals, I recommend using the Bootstrap Dialog JavaScript library, it makes working with models programmatically much easier. For example you can show a simple modal window like this:
BootstrapDialog.show({
title: 'Hello World',
message: 'This is a hello world message'
});

Telerik tab strip

I have a tab strip containing many tabs. when i make some changes in tab 2, a confirm msg pops up asking if i want to continue without saving and if i say yes, i need to reset the value of the modified field in tab 2 to its original. Please help me do this.
please find below my sample code
Html.Telerik().TabStrip().Name("TabStripEmployeeDetail")
.Items(items =>
{
items.Add()
.Text("tab1").HtmlAttributes(new { onclick = "return warnOfChanges()" })
.LoadContentFrom(......);
items.Add().HtmlAttributes(new { onclick = "return warnOfChanges()" })
.Text("tab2")
.LoadContentFrom(......);
items.Add()
.Text("tab3")
.LoadContentFrom(.......);
items.Add()
.Text("tab4")
.LoadContentFrom(....);
items.Add()
I have a javascript function
function warnOfChanges() {
if(documentmodified) {
return confirm('Changes have been made on this tab. Continue without saving?');
}
return true;
};
and i am calling this onclick of the tab. please help here

First of all I suggest you to use the select event of the TabStrip instead of attaching the same handler on the tab items.
To actually reset these settings (since you are loading them with Ajax) the easiest way would be to refresh the content of the TabFrom the server. To refresh a particular tab you could use the reload method of the Client API.
Check the documentation for examples how to use the reload method.