I have a reusable modal code that I use to easily load multiple modals. The problem I ran into was I had the div I use to display my errors set using an id. when I tried displaying errors in the second modal, obviously it didn't work because you can't have more than one element with the same id.
I would like to adjust my jQuery code in that erases any errors when the modal window opens.
Here is my code for the modals.
function loadModal($modalNum, $modalTitle, $modalFile) {
echo '<!-- The Modal -->
<div id="'.$modalNum.'" class="modal">
<!-- Modal content -->
<div class="modalContent">
<div class="modalHeader">
<span class="close">×</span>
<h2>'.$modalTitle.'</h2>
</div>
<div class="modalBody">
<!-- Error section -->
<div class="errors"></div>
<!-- include form to show -->';
include($modalFile);
echo ' </div>
</div>
</div>';
}
The piece of above code that I'm targeting.
<!-- Error section -->
<div class="errors"></div>
Here is my script that loads the window.
$('.openModal').on('click', function(){
$('#'+$(this).data('modal')).css('display','block');
$("#form")[0].reset();
while ($('.errors').firstChild) {
$('.errors').removeChild($('.errors').firstChild);
}
})
Here is the portion of code that I cannot figure out.
while ($('.errors').firstChild) {
$('.errors').removeChild($('.errors').firstChild);
}
Prior to changing it to try and read a class it looked like this. This was also when my html for the modal had the div as an id <div id='errors'></div>.
while (errors.firstChild) {
errors.removeChild(errors.firstChild);
}
How can I change this section of code to target my error div using the class
?
You can either scope your search or find the element inside the modal, both will return the same element. Also, the empty method is more convenient. And you can use the same approach for your other elements too, like the form you are targeting:
$('.openModal').on('click', function(){
targetModal = $('#'+$(this).data('modal'));
$("#form")[0].reset();
// Both are equivalent
errors = $(".errors", targetModal);
errors = targetModal.find(".errors");
errors.empty();
targetModal.css('display','block');
});
Related
I've been searching and trying different ways to change an href attribute through Javascript. Few things have worked better than others.
The problem with this approach is that the variable on the href is not working. I guess there is a better way to include a variable within an html tag.
I'm really stuck on this so would appreciate any help.
Here is the code of the modal window:
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="modal-close">×</span>
<h1>¿Quieres seguir creando?</h1>
<a class="btn-ok" href=enlace target="_blank">OK</a>
</div>
</div>
And this the button that the user clicks on before the modal window is shown:
<script type="text/javascript">
var enlace;
</script>
<button onclick="enlace='https://cloqq.com/actividad/tu-aventura-interactiva';return false" id="" class="go-btn pink-bg">Empieza a crear
</button>
https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
You can use setAttribute to reassign the href, the way you're using javascript in html doesnt work like that.
const itemYouWantToUpdateHref = document.querySelector('.btn-ok')
function changeHref(link) {
itemYouWantToUpdateHref.setAttribute('href', link);
}
<a class="btn-ok" href="www.google.com" target="_blank">My link will change</a>
<button onclick="changeHref('www.youtube.com')">click to change href from google to youtube</button>
You can use your code itself with only some changes and without any script tag. look at code below:
<button onclick="window.enlace='https://cloqq.com/actividad/tu-aventura-interactiva'" class="go-btn pink-bg">Empieza a crear</button>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="modal-close">×</span>
<h1>¿Quieres seguir creando?</h1>
<a class="btn-ok" href="javascript:window.open(window.enlace||'defaultAddress', '_blank');">OK</a>
<!--
!! If you like to show an alert when the button is not clicked yet, try line below instead above line:
<a class="btn-ok" href="javascript:window.enlace?window.open(window.enlace, '_blank'):alert('Please click the Button first!');">OK</a>
-->
</div>
</div>
If you run above snippet and look at console, you can see all things is fine (but because Security problems this will not work with these URLs in current page and you should copy it in your project or an empty html file for seeing the result.)
Rather new to javascript, jquery and bootstrap, etc., so bear with me. I have a situation where I want to present a list of errors in a model dialog after the user hits a "validate" button. Got all the working - I am generating a list of objects that indicate to the user they need more work to the exact spot that needs additional data entry. I have the the DIV "id" that represents the field that needs more data (and each item will jump someplace different).I do not want a drop down list since there are be lots and lots of these items.
A few questions:
How do I go about jumping from the modal to the main html. I believe I have seen scrollIntoView mentioned in a few other posts as I was looking but will that hop to the DIV and also close the modal?
What construct should I use for the list? A list of scrolling button? The size of this can be quite large (hundreds) so it will need a scroll capability.
Finally, the app is "paged" with a next and prev buttons. I assume that will not be a problem from the aspect of jumping to a page not already displayed?
Here is the current modal code:
<script id="template-validation-error" type="text/x-handlebars-template">
<div id="validationErrorModal" class="modal">
<div class="message-container">
<div class="header">
Validation Errors
</div>
<div class="message">
The following fields are required:
</div>
<div class="center">
<input type="button" class="btn btn-solid-green btn-sm" onclick="fffdevice.validationErrorOk();" value="Done" />
</div>
</div>
</div>
</script>
and
showValidationError: function (fieldlist) {
settings.focusedField = $(':focus');
$("#validationErrorModal").detach();
$(".device-container").append(templates.validationerror({ fieldlist }));
$(".message-container input").focus();
},
validationErrorOk: function () {
$("#validationErrorModal").detach();
if (settings.focusedField) {
settings.focusedField.focus();
}
},
The field list is a list of objects that contain the id (field.id) of the DIV and also a description (field.fieldName) that I want to display.
Here is something I mocked up in paint...I am not sold on it but it show in a general sense what I am looking for:
I don't need a full solution rather, just want mechanisms I can use.
UPDATE
Just to help out anyone else in the future, using the info provided in the correct answer below I have a new code as follows:
<script id="template-validation-error" type="text/x-handlebars-template">
<div id="validationErrorModal" class="modal">
<div class="validation-container">
<div class="header" align="center">
Validation Errors
</div>
<div class="message">
<div class="scrolling-container" style="background-color: rgb(238, 238, 238); height:660px">
<div class="grid grid-pad">
{{#each fieldlist}}
<div class="row click-row" onclick="fffdevice.validationErrorFix('{{id}}');">
<div class="col-7-8 field-name">{{fieldName}}</div>
<div class="col-1-8">
<img class="pull-right" src="/mysite/Content/device/images/fix.png" style="width: 40px; position:relative; top: -5px;">
</div>
</div>
{{/each}}
</div>
</div>
</div>
<div><br/></div>
<div class="center">
<input type="button" class="btn btn-solid-green btn-sm" onclick="fffdevice.validationErrorOk();" value="Done" />
</div>
</div>
</div>
Then the Javascript for the onClick is:
validationErrorFix: function (id) {
$("#validationErrorModal").detach();
var x = document.getElementById(id);
x.scrollIntoView({
behavior: "smooth", // or "auto" or "instant"
block: "start" // or "end"
});
},
Which closes the dialog and jumps to the field. It looks like (I know this is ugly and I will clean it up later):
Bind the modal event to the validation code and show the modal if error(s) are found.
Display the modal with the list of errors using an html unordered list, inside the li element an anchor tag where the href attribute will have a value with the id that corresponds to the input field, all this done dynamically from your validation code.
Once an error in the list is clicked hide the modal using bootstrap $('#your-error-modal').modal('hide'); so the code would be something like this:
$('#your-error-modal').on('click', 'a.error-item', function(){
$('#your-error-modal').modal('hide');
});
I haven't tested this code, but if you're having issues with scrolling to the section of the input and closing the modal you can probably do something like this too:
$('#your-error-modal').on('click', 'a.error-item', function(e){ // use this method of onclick because your list will be created dynamically
e.preventDefault(); // prevent the default anchor tag action
var href = $(this).attr('href'); // grab the href value
$('#your-error-modal').modal('hide'); // close the modal first
scrollToDiv(href); // then take the user to the div with error with a nice smooth scroll animation
});
function scrollToDiv(location) {
$('html, body').animate({
scrollTop: $(location).offset().top
}, 2000);
}
Again this is untested code, but the idea is there.
For UX reasons you might also want to create a floating div or something where users can click on it and go back to the modal to continue reading your list of errors.
I am using Materialize framework in my rails app. I have this element that launch a modal on click:
<div data-target="modal1" class="modal-trigger" data-code="<%=code%>">lalala</div>
I want to catch the data-code in js and save it to variable. I've done something like this following the official documentation:
$('.modal-trigger').leanModal({
ready: function() {
var a = $(this).attr("data-code");
},
}
The variable "a" is undefined. How I can pass data-attr in Materialize modal? What is the best way? Thanks.
Update: I'd like to then display the value of data-code in the modal. This is the code:
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<p>The Code</p>
</div>
</div>
Update1: I eventually solved it with clickOn method and append the data attr to a particular div but wondering if it is possible to pass it also through modal.
I have this code that shows contents outside of the ng-controller.
HTML
<div class="btn-group companyName">
<!-- buttons -->
</div>
<div class="col-lg-12 col-lg-md-12 col-sm-12" ng-controller="TopicsCtrl">
<div class="faq-breadcrumbs">
<!-- contents -->
</div>
</div>
JS
angular.module('sample').controller('TopicsCtrl', function ($scope) {
//how to hide first div?
};
The top div is inside the site's header, so it is shown in all pages of the site. The second div is only shown if I am in the FAQ page. Now I don't want the first div to show on the header whenever I am in the FAQ page. How can this be done? Can anyone help me? Thank you very much.
The angular way to do this would be to create a directive that manipulates the DOM and will hide the element on the page when the route is on the FAQ page. In order to do this you will have to increase the scope of your app to include the header.
If you can't do that, I would suggest just going the javascript/jquery way and hiding the companyName div when the location is at faq. Something like this could work.
$(document).ready(function() {
if(location.pathname == 'faq'){
$('.companyName').css('display', 'none');
}
}
This solution does pose the problem of potentially showing information before the document is completely loaded.
Automatic appear the popup window basen on condition like When i get the url http://localhost:81/Try/demo?result=false.
Below the sample code.I am using colorBox popup. It will show the popup window when i'm click the link Inline HTML.
I need automated popup if ($_REQUEST['result']==false) in PHP
<script src="../jquery.colorbox.js"></script>
<script>
$(document).ready(function(){
$(".inline").colorbox({inline:true, width:"50%"});
});
</script>
</head>
<body>
<h1>WELCOME</h1>
<p><a class='inline' href="#inline_content">Inline HTML</a></p>
<!-- This contains the hidden content for inline calls -->
<div style='display:none'>
<div id='inline_content' style='padding:10px; background:#fff;'>
<p><strong>This content comes from a hidden element on this page.</strong>
</p>
<p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>
Click here to download file</p>
</div>
</div>
</body>
I don't know what you mean by 'popup', but here is how to do something in javascript if 'result' is false.
<script>
<?php if($_REQUEST["result"]=="false") {
echo "alert('result is false')";
}?>
</script>
It is also possible to do this in JavaScript like so:
if (document.location.query.indexOf('result=false') !== -1) {
alert('result is false');
}
You would need some sort of modal implementation if you want to show a whole modal (ie Bootstrap Modal, jQuery UI Modal, custom, etc).