modal popup reopened javascript doesnt work - javascript

I have been trying to do a JS Fiddle of this but cant seem to make it happen as my javascript loads its html via PHP controller.
However.
I have a JQuery UI modal popup window contained the appropriate view which is a from. I have some JS on this form that shows and hides divs depending on a select box:
function showDiv(divName)
{
document.getElementById(divName).style.display='';
}
function hideDiv(divName)
{
document.getElementById(divName).style.display='none';
}
function toggleOpDiv(showID)
{
if (showID == '1')
{
hideDiv('plus');
hideDiv('mult');
showDiv('perc');
}
else if (showID == '2')
{
hideDiv('mult');
hideDiv('perc');
showDiv('plus');
}
else if (showID == '3')
{
hideDiv('plus');
hideDiv('perc');
showDiv('mult');
}
else
{
hideDiv('plus');
hideDiv('mult');
hideDiv('perc');
}
}
this is then triggered quite simply by:
<select id="frm_source" name="operator" onchange="toggleOpDiv(this.value)">
<option value="1">Percentage</option>
<option value="2">Plus/Minus</option>
<option value="3">Multiplier</option>
</select>
This is working as I'd expect, however when I close the box and re-open it, no JS is working at all.
I have read that this is due to Ajax firing? How can I reset this on the form load?

function showDiv(divName)
{
document.getElementById(divName).style.display = '';
}
I think you meant setting display to block like this instead:
document.getElementById(divName).style.display = 'block';
I guess there have to be some error in your code, which is the cause why something is broken with your javascript.
Try to use FireBug to check whether your site doesn't contain any errors before dialog open and thereafter.
Even if your HTML comes dynamically from outside, try to put this as static html in a jsfiddle, which will help you to track and solve your problem.
Other than that, it will be guesswork without seeing full example/jsfiddle.

Related

How to hide form fields with Jquery in Shopify

I am trying to write a simple script which follows the logic below but I am having difficulties.
If "Name" field = blank
Then Hide "Comment" field
Else Show "Comment" field
$(document).ready(function() {
if ($('#ContactForm-name').value() == "") {
$('#ContactForm-body').hide();
} else {
$('#ContactForm-body').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Can someone please help me? I provided a screen shot of the form and its HTML.
The shopify store is https://permaink.myshopify.com/pages/contact with the store PW = "help".
Taking a look at the example link you provided w/ 'help' password, it doesn't look like jQuery is actually loaded on the site, after running the following in console: console.log(typeof window.jQuery) returns undefined.
You may need to use vanilla JS to achieve what you're trying to do (or side load jQuery, if you have permissions to do so and really need to use it).
Using JS without jQuery, you can try doing something like:
window.addEventListener('load', function() {
if (document.getElementById('ContactForm-name').value === '') {
document.getElementById('ContactForm-body').style.display = 'none';
} else {
document.getElementById('ContactForm-body').style.display = 'block';
}
});
Note, that just hiding the ContactForm-body textarea will still leave a border outline and the label Comment showing, so you may need to do more than just hiding the textarea (find the parent <div> in JS and hide whole block).

Does jQuery fadeIn() automatically check if element is visible? | Coding Efficiency

I have jQuery loading data for my web app. Being a web app, all my code is being compiled into one file. It's reused often. Filesize and inefficiencies could seriously slow down my website performance and load time.
My question is: Does jQuery have built-in handlers for redundancies?
My example concerns the .fadeIn() function. I don't want $('.search-output') to "fade in" every single time a key is pressed, however, I don't want to add unneeded code that jQuery already handles on its own.
I'm assuming that jQuery does handle these redundancies on its own because no animation is present when running this without my 'if visible' statement. Still, it might run other code that slows down my web app. Is it better/efficient coding practice to code in my own handlers for everything or to let jQuery handle it on its own?
I know I could look at the jQuery code but you guys might have more valuable input than just a yes or a no.
$this.find('.search-input input').keyup(function() {
if ($(this).val() == '') {
$(this).parent().parent().parent().parent().find('.search-output').fadeOut(150)
} else {
if (!$(this).parent().parent().parent().parent().find('.search-output').is(':visible')) {
$(this).parent().parent().parent().parent().find('.search-output').fadeIn(150)
}
formData.append('request', 'req_search_users')
formData.append('searchString', $(this).val())
xhr_request(formData, open)
function open($status, $_rtn) {
if ($status == 200) {
$output = $this.find('.search-output')
$_rtn = $_rtn.split('|,')
if (parseInt($_rtn[0]) > 0) {
$output.append($_rtn[1]).ready(function() {
link_user_click($(this))
})
}
if (parseInt($_rtn[0]) < 3) {
$this.addClass('eof')
$this.find('.auto-loader').hide();
}
} else {
console.log('XHR POST: 404 Error')
}
}
}
})
This is the specific section of code we are looking at:
if (!$(this).parent().parent().parent().parent().find('.search-output').is(':visible')) {
$(this).parent().parent().parent().parent().find('.search-output').fadeIn(150)
}
This is my first stack-overflow post. Thanks for any input you can provide!
The answer is yes. jQuery does apply fade-in animation to all visible elements (elements with the CSS property display not equal to hidden). All jQuery methods which animates visibility are an "extension" of the <collection>.toggle() method, which automatically switches between hidden and inline states, see https://api.jquery.com/toggle/

Hiding a div container including php generated content with a script

I'm currently working on a website which has a search engine including advanced search options with filters. I want to hide the filters until a category has been chosen. I'm not sure if that script would even work within the php file, because I also tried the script with simple alerts but it didn't work. I positioned this script at the end of the php file of the advanced search options.
<script>
if (document.getElementById("main_cat").value == "-1")
{
document.getElementById("custom_fields").style.display = "none";
}
else
{
document.getElementById("custom_fields").style.display = "inline";
}
</script>
custom_fields is the id of a div container which displays all the filters with php generated content. main_cat is the id of the category, if the value is -1, no category is chosen.
I'm working on a website with wordpress if that is important to know.
Thanks for your help!
I think you have a minor semantic error that's causing your script to not function as expected. Also, to achieve the functional behaviour for the <select> you will need to do a few extra things, namely, to listen to the change event:
<script>
// Store variables to elements we want to work with
var mainCat = document.getElementById("main_cat")
var customFields = document.getElementById("custom_fields")
// When the website first loads, hide "custom_fields" by default
customFields.style.display = "none";
// When the user changes the main_cat select, check it's value. If
// value == "-1" then hide custom_fields. Otherwise display custom
// fields as inline
mainCat.addEventListener("change", function() {
if (mainCat.value == "-1")
{
customFields.style.display = "none";
}
else
{
customFields.style.display = "inline";
}
})
</script>
As a final note, I saw that the script was actually commented out on your website. Just below the <!--Script Custom Fields-->, the script was enclosed in /* ... */ - remove those to ensure that the script does run, rather than be ignored by the browser.
Hope this helps!

Attach handle on every onhide method of bootstrap3-dialog

I'm using bootstrap3-dialog library from https://nakupanda.github.io/bootstrap3-dialog/
The problem is, everytime the dialog shows (alert, confirm or custom dialog), the body's scrollbar is gone and never come back when dialog closed. I could add this line on every dialog's onhide property, but that would be time consuming:
$('body').css('overflow','scroll')
Is there any other way to trigger that function every time the modal closes?
I was going through the code of bootstrap modal and they have this:
resetScrollbar: function() {
var openedDialogs = this.getGlobalOpenedDialogs();
if (openedDialogs.length === 0) {
this.$body.css('padding-right', BootstrapDialogModal.ORIGINAL_BODY_PADDING);
}
},
Which is called on:
hideModal: function() {
this.$element.hide();
this.backdrop($.proxy(function() {
var openedDialogs = this.getGlobalOpenedDialogs();
if (openedDialogs.length === 0) {
this.$body.removeClass('modal-open');
}
this.resetAdjustments();
this.resetScrollbar();
this.$element.trigger('hidden.bs.modal');
}, this));
}
I can't seem to figure out what would cause this code to not bring the scrollbar back. It seems to be working fine on their website.
If you are comfortable, I would suggest debugging the hideModal function of the api itself and figure out why it is not working and maybe put the above css snippet in there as a work around.
Or maybe post your code on plunkr, jsfiddle so we can look at what is going on.

Hiding and showing dividers using javascript - Works in JSFiddle, doesn't work on site

I have made a small javascript to hide dividers when the value of a dropdown menu has changed.
But for some reason the script doesn't work on my own site.
document.getElementById("type").onchange = function () {
var v = this.options[this.selectedIndex].value;
if (v == 1) {
document.getElementById("CostDiv").style.display = "block";
} else {
document.getElementById("CostDiv").style.display = "none";
}
}
Here's a link: http://jsfiddle.net/WeHv3/
is there more than one element in the html document called CostDiv ?
Please give us the source of the html document as that is only difference at the moment I can see.
I think problem is your listener are unable to attach with your element.
Just add your JavaScript at the bottom of page and your problem is solved.

Categories