How do i change my HTML page with a form? - javascript

I will explain my problem, I have an HTML page "index" with many buttons (all Href linked to other sites), I would like to create a form which writes alone the basic code.
I think an example would explain better, this form is for non-developer, 3 input (name, href, picture) and when you use the form, it updates the index page with a new button who is already linked to the other website.
I was thinking about creating many buttons with display: none, and update these buttons. Or having a script already written who could be filled.
I want these new buttons to stay even if you refresh the page.
My index looks like this :
#{
ViewData["Title"] = "Index";
}
<div style="background-image: url('img/LOGOFIVES.jpg');">
<div class="text-center">
<h5 class="my-4">Bienvenue sur le portail Fives.</h5>
<div class="row m-4">
<div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
<a asp-controller="Order" asp-action="Index" class="btn btn-lg btn-primary btn-block">Ordres</a>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
<a asp-controller="Article" asp-action="Index" class="btn btn-lg btn-primary btn-block">Articles</a>
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
Portail Qualios
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
Saphir
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
Base Qualité
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2" onclick="alert([message?: veuillez utiliser Internet Explorer pour utiliser Chronogestor sans problème])">
Chronogestor
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
Intranet Fives ECL
</div>
<div class="col-12 col-md-6 col-lg-4 col-xl-3 my-2">
Portail Fives
</div>
</div>
</div>
</div>

If you want other people to see these newly added links/buttons, you have to use some back end language (PHP for example) and a database to store these links. To my knowledge, you can't update the HTML code without any back-end language or server-side apps but if you can, it's neither practical nor commonly used.
What you want is not too complicated so some basic knowledge of a back-end language should be enough.
Good luck!
P.S. If what you mean is to just update those buttons for the current user until they refresh the page, that's a whole different story and you can just accomplish that with JavaScript.

if you want too change the view just for the user
you can do this with java script using this function
function add_button(text, href){
let b = document.createElement("a");
let t = document.createTextNode(text);
b.appendChild(t);
b.setAttribute("href", href)
let element = document.getElementById("div");
element.appendChild(b);
}
and just call it from the submit button in the form

Related

Get Portion of Class Name, in order, on Web Page Using JavaScript?

Is there a way using Javascript, to pull a portion of a class name in order (top to bottom) on a web app? I have an issue where I need to get information on a 3rd party web app we are integrating into our site. I can't change their code. What I want to do is take the class name (e.g. class="index solid-shape-large-rating-fair AnalysisCategory" or class="index solid-shape-large-rating-poor AnalysisCategory" etc.) and grab the value after "rating-" in the class name (class="index solid-shape-large-rating-[want this value] AnalysisCategory"). So in the example I have, I would get back, in this order, top to bottom, "fair", "poor" and "excellent". Is this possible? If so how? Please be aware there will be more mark-up between elements in my example, if that impacts the answer? I just cleaned up the non-related code for presentation purposes. They aren't stacked directly on top of each other as in my example.
///////Top Element//////////
<div class="stack-item">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center index-area">
<label tabindex="0">YOUR INDUSTRY BORROWING HISTORY</label>
<div class="index solid-shape-large-rating-fair AnalysisCategory">
MODERATE RISK
</div>
</div>
</div>
</div>
//////////////Middle Element////////////////////
<div class="stack-item">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center index-area">
<label tabindex="0">TENURE OF YOUR BUSINESS</label>
<div class="index solid-shape-large-rating-poor AnalysisCategory">
POTENTIAL CONCERN
</div>
</div>
</div>
</div>
////////////Bottom Element/////////////
<div class="stack-item" style="">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-12 text-center index-area">
<label tabindex="0">YOUR BUSINESS PROFITABILITY</label>
<div class="index solid-shape-large-rating-excellent AnalysisCategory">
EXCELLENT
</div>
</div>
</div>
</div>
Thank you!
I found this answer on another site.
$(function() {
$('[class*="solid-shape-large-rating-"]').each(function(i, e) {
var result = this.className.match(/solid-shape-large-rating-(.*?)\s+/);
console.log(result[1]);
});
});

Selenium - cannot click on an element inside a modal

I am using Selenium and java and I cannot click on an element inside a modal.
The scenario is this:
after clicking on an item inside a frame, it opens up a modal and I need to click on an element inside this modal but I cannot get it.
I already tried with:
js.executeScript("document.getElementById('saveexit').scrollIntoView(true);");
I also tried with switchTo() this way:
while (itr.hasNext()) {
String popup = itr.next();
System.out.println("itr: " + popup);
driver.switchTo().window(popup);
}
Here is the html of my modal:
<div class="modal-dialog">
<div class="modal-content modal-custom-content">
<div class="modal-header">
...
</div>
<div class="modal-body">
<form id="formTo" class="form-container">
<div class="row">
...
</div>
<div class="small-space"></div>
<input ...>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
<div class="small-space"></div>
<div class="row">
...
</div>
</form>
</div>
<div class="small-space"></div>
<div class="modal-footer">
<div class="row text-center">
<div class="col-md-6 col-sm-6 col-xs-12">
<button class="btn modal-button full-btn" id="saveexit" type="button">SAVE AND EXIT</button>
</div>
<div class="col-md-6 col-sm-6 col-xs-12">
...
</div>
</div>
</div>
</div>
</div>
this is the CSS Path as taken from firefox dev tool:
html.no-touch body div.remodal-wrapper.remodal-is-opened div.modaliAdesione.remodal.remodal-is-initialized.remodal-is‌​-opened div.modal-dialog div.modal-content.modal-custom-content div.modal-footer div.row.text-center div.col-md-6.col-sm-6.col-xs-12 button#saveexit.btn.modal-button.full-btn
the object is never found.
Question 1: if an element is inside a modal has to be managed
differently?
Question 2: How to finally have the click on the button
saveexit working?
here is shared a code snippet of the html: https://codeshare.io/arLW9q
Here is the java code:
wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//*[#id=\"saveexit\"]")))
I have also tried with:
cssSelector: #saveexit
cssPath: html.no-touch body div.remodal-wrapper.remodal-is-opened div.modaliAdesione.remodal.remodal-is-initialized.remodal-is-opened
div.modal-dialog div.modal-content.modal-custom-content div.modal-footer div.row.text-center div.col-md-6.col-sm-6.col-xs-12
button#saveexit.btn.modal-button.full-btn
xpath: //*[#id="saveexit"]
Please note: if I run document.getElementById('saveexit').click(); from browser's console it works out
As you are using the Selenium-Java clients as per best practices the first and foremost trial must be with invoking the highly efficient and proven click() method. Depending on the errors resulting out of click() method we can work on other alternate solutions.
As I can see from your code trials with JavascriptExecutor and switchTo().window(), you havn't identified the WebElement representing the SAVE AND EXIT button well.
To click on the SAVE AND EXIT button you can use the following code block :
new WebDriverWait(driver, 5).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//div[#class='modal-dialog']//div[#class='modal-footer']//button[#class='btn modal-button full-btn' and #id='saveexit']"))).click();
I fixed it using jquery inside my script;
here is the linecode:
js.executeScript("$('#saveexit').trigger('click');");
I hope it can help someone in future.
I dont know why plain javascript was not working...

Bootstrap column floating on right side insteaf of left why?

Let's go to exaplain my problem:
I have this html code:
<div id="nodeInitInsertion" class="row removePadd_oddEven_childs"></div>
This is like the parent node where the dynamic content is going to be inserted after an ajax petition. This GET petitions gives us information about what fields should we show in the form (name, lastname, gender, date of birth, and then extra fields)
Here for example we have received all of these (inside there are the inputs but this is the main information you need)
<div id="nodeInitInsertion" class="row removePadd_oddEven_childs">
<div class="col-xs-12 col-sm-6 relative margin-20-t sex_container"></div>
<div class="col-xs-12 col-sm-6 relative margin-10-t dateofbirth_container"></div>
<div class="col-xs-12 col-sm-6 element-children margin-10-t"></div>
<div class="col-xs-12 col-sm-6 element-children margin-10-t"></div>
<div class="col-xs-12 col-sm-6 element-children margin-10-t"></div>
<div class="col-xs-12 col-sm-6 relative margin-10-t nationality_container"></div>
<div class="col-xs-12 col-sm-6 element-children margin-10-t"></div>
<div class="col-xs-12 col-sm-6 email_container margin-10-t"></div>
<div class="col-xs-12 col-sm-6 element-children margin-10-t"></div>
</div>
It works all fine the most of the times (fig. 1).
But when there are 9 "div childrens" or more, the design breaks because one of the div.col-xs-12 should be in the left and it is in the right. (fig. 2)
And the strange this is that: If I remove a div.col-xs-12 element before the one is "wrong placed" it goes all OK.
And the most strange this that the element has nothing weird... They have all the same height too.
Did it happen to you anytime? Like: a column of bootstrap that is totally floating left, is floating to the right? why it happens?
Thank you..

AngularJS ng-repeat, $scope variable issue and preventing infinite $digest loop

I need to find a better solution regarding ng-repeat, $scope variable and infinite $digest loop. I'm sure it's not $watch issue and I'm sure it's in the way I'm updating my $scope variable.
The issue doesn't happen in Chrome. It only happens in Safari and Firefox. This is how I'm doing it. I have a $scope.chartCollection which is dynamically populated with Google Chart objects. The $scope.chartCollection can have 1 or more google chart objects depending on my selection.
In my html template, I have this code,
<div ng-repeat="device in chartCollection">
<div class="col-md-6 padding10px">
<div class="widget enable-top-radius chartProperties">
<div class="widget-title enable-top-radius dark-gray-title">
<h4>
<span class="alignleft">
<i class="fa fa-circle" ng-style="{ color : device.dotColor }"></i><span class="padding5px">{{printerTypeName}}</span><span class="padding5px">|</span><span class="padding5px" popover="{{device.modelOrLocation }}" popover-trigger="mouseenter">{{ device.modelOrLocation }}</span>
</span>
</h4>
<span class="alignright">{{device.location | uppercase }}</span>
<div style="clear: both;" class="padding5px"></div>
</div>
<div class="widget-body">
<div google-chart chart="device.chart" on-select="seriesSelected(selectedItem, $index)"></div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12 no-padding chartInfoBox">{{dateForGraph}}</div>
<div class="col-md-12 col-sm-12 col-xs-12 no-padding">
<div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
<div class="odometerFooterFieldValue" ng-bind="device.leftCellNumber | number"></div>
<div class="odometerFooterFieldKey" ng-bind="device.leftCellText"></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
<div class="odometerFooterFieldValue" ng-bind="device.middleCellNumber | number"></div>
<div class="odometerFooterFieldKey" ng-bind="device.middleCellText"></div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4 odometerChartFooter">
<div class="odometerFooterFieldValue" ng-bind="device.rightCellNumber | number"></div>
<div class="odometerFooterFieldKey" ng-bind="device.rightCellText"></div>
</div>
</div>
</div>
</div>
so that I can display each chart in separate divs. It works really well in Chrome but not in Firefox and Safari.
I'm getting this error in Firefox and Safari
https://docs.angularjs.org/error/$rootScope/infdig?p0=10&p1=%5B%5B%5D,%5B%5D,%5B%5D,%5B%5D,%5B%5D%5D
And my situation is similar to the second example they mentioned which generates a new array. However, in my situation, it will always be a new array.
I was thinking of not using ng-repeat and use $scope.chart1, $scope.chart2 etc but the problem with this approach is that I cannot tell if there will be 1, 10 or 20 charts since everything is generated dynamically. Code will be very messy!
Update:
Here is the code that generates the chart objects
http://pastebin.com/DmQkDHjW

jQuery for disabling links based on its html content

I want to be able to disable links based on their HTML content. There are many classified sections that are available, but they are not always filled out. I would like the link to be grayed out so that end-viewers know that there is no content for that classified. My HTML structure looks like this:
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<p><a class="fancyTxt" href="Classifieds/050.html">050 Farms For Rent</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<p><a class="fancyTxt" href="Classifieds/051.html">051 Houses For Rent</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<p><a class="fancyTxt" href="Classifieds/052.html">052 Miscellaneous</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
There is an HTML file for each type of classified, because that is what our classified program outputs. If there is nothing in the classified it places a string of text as a footer, but this text is also in every classified HTML file. This is the text:
<p>www.domainname.com<BR>
Your source for local online<BR>
classifieds!</p>
That text is what I would like to search for to disable links when that is the ONLY text being shown in the classified.
Thank you!
EDIT: Example of a classified page with content.
<!-- Classification Title Here -->
004 Announcements
<!-- Begin output Ad Text <startTags> </startTags> -->
<p><FONT SIZE=3>text about classified here</FONT></p><BR><HR>
<p><FONT SIZE=3>Text about classified here </FONT></p><BR><HR>
<p><FONT SIZE=3><DIV ALIGN=CENTER>www.domainname.com<BR>
Your source for local online<BR>
classifieds!</DIV></FONT></p><BR><HR>
<!-- End output Ad Text <endTags><BR><HR></endTags> -->
Since your issue isn't with disabling the link but rather finding what containers need to be disabled, perhaps try something like:
$('.col-xs-12.col-sm-6.col-md-4.col-lg-4').each(function() {
var p = $(this).children('p');
if (p.length === 1 && p.text().match(/^www\.domainname\.com/i) !== null) {
// disable link within $(this)
}
});
This grabs all child paragraph elements and ensures there is only one and that its contents begins with the "footer" contents.
This should work, HTML :
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<p><a class="fancyTxt" href="Classifieds/050.html">050 Farms For Rent</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<p><a class="fancyTxt" href="Classifieds/051.html">051 Houses For Rent</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<p><a class="fancyTxt" href="Classifieds/052.html">052 Miscellaneous</a></p>
</div><!--"col-xs-12 col-sm-6 col-md-4 col-lg-4-->
JAVASCRIPT :
$('div p:contains("Rent")').find('a').on('click', function(evt) {
evt.preventDefault();
return false;
});
This should disable all links containing "Rent" in text.
http://jsfiddle.net/46Zky/

Categories