How do I prevent a modal from removing a DOM element? - javascript

I am new to JavaScript, so I apologize if I am asking a dumb question.
I am building an automatic quote generator tool, in which there is an element created by DOM where I inject an HTML line with each service the client has selected (let's call this the "services cart"). This cart can be seen constantly on the screen right below the services selector, although it appears for the first time once the client has selected the first service.
I have added a Bootstrap modal that appears whenever the client has selected a specific service that we are not providing at the moment, showing an error message. However, when this modal appears on screen, the services cart with the rest of the services that the client has selected gets hidden for some reason that I can't understand. Here is my code:
function addToCart() {
let serviceLine = "";
if (isNaN(totalAmount)) {
modal.style.display = "block";
modalBody.innerText = "Unfortunately, we are not offering this service at this moment.
Please contact us directly through our Contact Us Form to see if we can accomodate your request."
totalAmount = 0;
} else {
finalTotalAmount = totalAmount + finalTotalAmount;
selectedService.push(listOfServicesSelected);
for (i = 0; i < listOfServicesSelected.length; i++) {
serviceLine = serviceLine + `
<li>Service selected: ${selectedService}</li>`;
}
}
container.innerHTML = serviceLine;
}
I realized that, even after the cart gets hidden, the services selected are still saved in the program as the cart reappears when I select another service. I am guessing this has something to do with the "else" block of code which is not running. I tried to fix it by placing this line "container.innerHTML = serviceLine;" inside the if block, but it didn't work.
Thank you in advance for your help.

Related

Function to hide form fields from external script

I'm using a web page which contains a form loaded with an external script using the command 'script src'.
I created a function to populate some fields from url parameters and also hide some of them.
Here is the code.
<script type="text/javascript">
<!-- Hide Form Field -->
function hideFormField(name) {
var list = document.getElementsByName(name);
for (i = 0; i < list.length; i++) {
list[i].style.display = 'none';
list[i].style.visible = 'false';
list[i].type = 'hidden';
}
}
<!-- Customize form -->
function CustomizeForm()
{
// Set Field Value
hideFormField('custom_11');
hideFormField('custom_12');
hideFormField('custom_13');
hideFormField('custom_14');
hideFormField('custom_15');
}
// call it
CustomizeForm();
</script>
The fields are populated but not hidden.
When I debug, the form fields appear to disappear briefly but then they reappear.
It looks like the form is being refreshed afterwards.
To hide fields, which specific command is best and should I use out of those three? I'm tried them separately but it didn't seem to solve my problem.
field.style.display = 'none';
field.style.visible = 'false';
field.type = 'hidden';
Where should I put the call to the function to hide fields?
Assuming I don't control where the code is being added exactly in my designer (only in which section: header, body or footer), is there another alternative that would work every time? For example, can I attach to an event (which one) that might get called after all the loading and refresh is done.
Can I somehow debug or trace what is happening and why the fields do reappear?
Thank you in advance!
it's visibility not visible, try:
list[i].style.visibility = "hidden";

How to correct javascript button's redirect?

I'am trying to add some js to my page, I create from it's a button and the aim of creating it is to redirect to another page but it is not working. Can you help me to solve it?
The situation is: the button is visible on my front-end (.jsp in Java EE), but there is no redirect. No matter what I write in URL simply no action is being made form click.
buttonAbort.innerHTML = 'Anuluj';
buttonAbort.style.cssFloat = 'left';
buttonAbort.style.width = '70px';
buttonAbort.style.height = '30px';
buttonAbort.style.backgroundColor = 'red';
button.setAttribute("id","buttonAbort");
let buttonAbortById = document.getElementById("buttonAbort");
buttonAbortById.onclick = function href() {
location.href="/projekt/edytujStatus";
}
You most likely have a mistake in your code.
You probably want to do
buttonAbort.setAttribute("id","buttonAbort");
instead of
button.setAttribute("id","buttonAbort");

How can I show content on a page based on query string?

I'm working with a team that is using a vendor's web based application. When people log out, they are redirected to the login page, where we would like to add a message. We don't have access to change the code (it's cloud hosted) but we can pass a query string parameter in the URL.
We can do something like:
http://our.site.com?logout=true
From there, I'd like to display a message in an h2 or something.
We can customize the HTML, CSS and JS of the page, but we don't have access to the source of the application (otherwise I would do this in PHP).
I presume I can use JS to change some CSS, but in all my trials I cannot get the CSS to actually change.
Check this answer: Get url parameter jquery Or How to Get Query String Values In js
var logout = getUrlParameter('logout');
if(typeof logout !== "undefined")
{
// show some div with display: none
// or put some content to the existing div
}
From your question above, I am just understanding that you need a piece of code to show some message on your login page on the basis of the query string received.Following is the piece of code you can add in the footer of your login page html(as you have the access to html).
<script type="text/javascript">
function getParamValue(querystring) {
var qstring = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for (var i = 0; i < qstring.length; i++) {
var urlparam = qstring[i].split('=');
if (urlparam[0] == querystring) {
return urlparam[1];
}
}
}
if(getParamValue('logout')=='true'){
var messageDiv = document.createElement("div"); // Creating a div to display your message
var message = document.createTextNode("You have successfully logged out."); // Preparing the message to show
messageDiv.appendChild(message); // Appended the message in newly created div
var addIn = document.getElementById("login"); //just presuming there is a div having id="login" in which you want to prepend the message
addIn.insertBefore(messageDiv, addIn.childNodes[0]); //just appended the message on top of login div
//setting style in your message div
messageDiv.style.backgroundColor ="#FF0000";
messageDiv.style.width ="100%";
}
</script>
Then change the link of login page like this:
http://our.site.com/login.php?logout=true
Note :Read the code comments carefully to edit the code as per your html structure.
Try !important to change CSS? Just a temporary solution until you can edit the actual code.

jQuery Image load error not being called after page load

Hello Stack Overflow community, recently, I've been working on a quick image display using jQuery. It has a list of possible images that can be picked and displayed at random. The issue is, after the page has finished loading, jQuery ceases to detect image load errors for if the image is invalid.
My current method of finding and fixing errors is as follows:
$('img').error(function() {
$(this).attr('src',getImgUrl());
});
This, in normal circumstances such as the page being loaded, picks a valid image, even if multiple invalid images are specified in a row. However, after the page is finished loading, if an invalid image is picked, and fails to load, this function is not even called. Strangely enough though, if I add an onerror attribute to all images, they are always called from the onerror no matter if the page was freshly loaded or not, so why is jQuery having this issue? Any help is appreciated, thanks.
UPDATE:
It also appears this is happening to other jQuery functions as well, such as click.
UPDATE:
It would appear to be an issue with jQuery recognizing new elements on a page, such as newly created images.
UPDATE for those asking getImageUrl:
function getImgUrl()
{
var text = (Math.round(Math.random() * 3)).toString();
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for(var i=0; i < 4; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return '/' + text;
}
All this does is pick a random URL, which matches occasionally to an image on my web-server that has many many images.
It would appear that jQuery has issues recognizing new elements on the page, so the way I fixed this was instead of deleting and adding images to the page, I just edited the existing SRC of images when doing changes, which strangely enough, the jQuery error function responds perfectly to.
Here's the refresh function I ended up coming up with for all interested:
function refreshImages()
{
var images = 10;
for(var i = 0;i < images;i++)
{
var url = getImgUrl();
$('#thumb' + i).attr('src',url);
if(i == 0)
{
$('#fullimage').attr('src',url);
$('.thumb').css('border','2px solid white');
}
}
resize();
}

sharepoint breadcrum trail editing on the fly

I have been searching for hours now and have found some code that claims to be able to do what i want however...it doesn't.
I am currently trying to remove Pages and .aspx off the end of my page name in the breadcrumb trail in sharepoint. Currently it look like....
mysite > myarea > pages >mypage.aspx
I have tried changing the SiteMapProvider and this takes away the pages link as well as the current page. It then looked like..
mysite > myarea.
I would like to have
mysite > myarea >mypage
I have tried using this snippet of code...I do not claim to own or to have developed this code.
var breadCrumbs = document.getElementById('ctl00_PlaceHolderTitleBreadcrumb_ContentMap')
if (breadCrumbs != null) {
if (breadCrumbs.childNodes.length >= 3) {
if (breadCrumbs.childNodes[2].innerHTML.indexOf('Pages') > 0) {
breadCrumbs.childNodes[1].innerHTML = "";
breadCrumbs.childNodes[2].innerHTML = "";
}
}
}
I put some document.writes in to see where the code was getting to and the breadCrums variable seems to be null therefore the code never gets to the juicy part :P
Any ideas hints tips would be hugely appreciated
Truez
I have run your code on a SharePoint site and was able to get the breadCrumbs element just fine. Have you verified that that is the correct ID of your breadcrumbs object. The ID you use is the default, but you should check. Just view source on the page and do a quick Ctrl-F and search for "Breadcrumb".
Too see if it is just a matter of placement, do this: On a target SharePoint page using IE, open the Web Developer tool (Tools > Developer Tools). Switch to the Script tab and press the Multi Line Mode button at the bottom of the script pane. Paste this code:
var breadCrumbs = document.getElementById('ctl00_PlaceHolderTitleBreadcrumb_ContentMap')
if (breadCrumbs != null) {
if (breadCrumbs.childNodes.length >= 3) {
if (breadCrumbs.childNodes[2].innerHTML.indexOf('Pages') > 0) {
breadCrumbs.childNodes[1].innerHTML = "";
breadCrumbs.childNodes[2].innerHTML = "";
} else {
alert('Pages node NOT found!');
}
} else {
alert('breadCrumbs only has ' + breadCrumbs.childNodes.length + ' children!');
}
} else {
alert('breadCrumbs NOT found!');
}
Then press the Run Script button. This code is just yours with some alerts added to help you see if/where it fails. If you get no alerts and the breadcrumbs element changes as you expect then yes it is placement. Otherwise, it depends on which alert you get. Let me know the results and I can help you correct the issue.

Categories

Resources