I'm working with Semantic-UI and have a popup with an input field in it (search field). The popup is initialized/opened "on: 'click'", but I would like to set a value to the input field with javascript before the user opens the popup.
Trying to do so with
document.getElementById("sok_tekst").value = input;
only leads to
Uncaught TypeError: Cannot set property 'value' of null
When I look in the console, I see that the HTML-code contains the popup with the input field (id="sok_tekst"), but it looks like I "can't reach it" with javascript before it's initialized.
I feel I have tried everything, and it looks like I need to open the popup before adding a value to the input field.
Here is a DEMO
Do anyone have a trick up their sleeve for this??
Thanks!
For the curious: I am using the input field as a search field in a table/work plan. When the table is redrawn, by the user changing week number, the popup are redrawn as well. I'm trying to keep the search value, and put it back in the input field, in the new popup, in the new table.
In order to initialize input value you shouldn't specify popup content with data-html="..." , this won't let change the value cause the input is not yet created (this is why you're getting Cannot set property 'value' of null) , so should change it from a pre-existing HTML content , so use instead popup: $('#YourContentSelector'), in popup setting to set the content ,then and you'll be able to change input value using :$('#input_test').val('test'); like the following :
HTML:
<!-- Popup Button -->
<i class="search link icon sok"></i>
<!-- Popup Button -->
<!-- Popup Content -->
<div class='ui form popup hidden' id="content"><!-- hidden class added so it won't be shown when it's loaded -->
<div class='field'>
<div class='ui icon input'>
<input type='text' placeholder='Input' id='input_test'>
<i class='search icon'></i>
</div>
</div>
</div>
<!-- Popup Content -->
JS(jQuery)
$(document).on('click', '.search.sok', function() {
$('#input_test').val('test');
$(this)
.popup({
popup: $('#content'),
on:'click'
})
.popup('show');
});
Here is a working Demo
Docs
Related
I'm having a problem in a checkout page of my website (wordpress based).
I have two kind of products and for each one, during checkout, I created custom fields to collect specific informations. With conditional rules (by plugin) some fields show up only if a list of specific option is checked.
When they are hidden, analysing the code, I've this situation:
<div class="form-row form-row-wide thwcfe-html-field-wrapper thwcfe-conditional-field" id="stud_no_req_field" data-name="stud_no_req" data-rules="[[[[{"operand_type":"field","value":"2","operator":"value_eq","operand":["student"]}]]]]" data-rules-action="show" style="display: none;">...</div>
When they are showing up, style attribute change in "block".
At the end of the page, I also have a button to submit the order.
<button type="submit" class="button alt" name="woocommerce_checkout_place_order" id="place_order" value="Associati" data-value="Associati">Associati</button>
I'm looking for a script that hides this button if custom file above has "display:block" and viceversa (show button if div has "display:none").
I've tried with this script (in checkout page), but nothing happens:
<script>
$(document).ready(function() {
if ($("#stud_no_req_field").style.display == "block")
{
$("#place_order").style.display = "none";
}
else
{
$("#place_order").style.display = "block";
}
});
</script>
I also need that this script is automatic (no click needed) and listens to any automatic change of div style (inside html tag).
Thank you very much!!! You are my angels!
You're using the wrong code. You should do
$("#place_order")[0].style.display = 'none'; // I added [0]
Or use jQuery API (https://api.jquery.com/css/)
$("#place_order").css('display', 'none');
I have the following in a page:
<div id="js-recaptcha">
<div class="g-recaptcha" style="display: inline-block;" data-sitekey="#SiteConfig.RecaptchaV2Key"></div>
</div>
then in script I have:
<script src="https://www.google.com/recaptcha/api.js"></script>
Now on load via jquery, I add the disabled property to the #js-recaptcha div. I can see that this has been applied. However, if I click on the form below the captcha box, it will either still tick the captcha or display a set of images. So my first question is how do I truly disable captcha?.
The second issue I have with captcha is that when the set of images are shown, when you select an image it selects the image up 1 and to the left 1 of the image selected, and this also continues when you try to press the 'verify' button, it selects a bottom image.
I have a webpage with an "edit" form that appears in a modal dialog using Bootstrap.
When the form appears, I would like one of the input fields to be disabled at first, and to be enabled if the user clicks a checkbox.
The problem is, my browser (Chrome) is not reflecting the disabled attribute for any form element within the modal dialog. Any form element outside the modal works fine.
This also works fine on another webpage I have with the exact same logic. It is only misbehaving on this page.
I have run the entire page source through the W3 Validator for HTML5 and get no errors back.
Code for the input element:
<form role="form" id="frmEdit" action="group_edit.php" method="post">
<!-- ... -->
<input type="text" id="txtEditAlternate" class="form-control" name="alternate" disabled />
<!-- ... -->
</form>
I even tried to brute force disable it with jQuery on document ready; this does not work:
$(document).ready(function() {
$("#txtEditAlternate").attr("disabled", true);
// ...
});
The only thing that does work when it comes to disabling the text field is when the checkbox is checked and then unchecked:
$("#chkbox").click(function() {
$("#txtEditAlternate").attr("disabled", !$(this).prop("checked"));
});
Although that kind of defeats the purpose, since the text field is supposed to be disabled until the checkbox is checked.
I have read that simply including disabled with no value is valid HTML5 (the validator did not even warn about this), and it works elsewhere.
I have tried everything I can think of, and can only speculate that it has something to do with the Bootstrap modal functionality. But like I said, the same logic works perfectly on another webpage I have.
And yes, I know Chrome likes to cache things. I have "hard-refreshed" many times, does not change anything.
Any suggestions?
try to use disabled="disabled":
<input type="text" id="txtEditAlternate" class="form-control" name="alternate" disabled="disabled" />
Use readonly attribute instead of disabled.
use prop instead of attr
$("#txtEditAlternate").prop("disabled", true);
I want to be able to add arbitrary text as link hrefs using wysihtml5. For example: I want to generate this link
I have worked out how to do this -- here's a simplified example of what I'm doing:
editor = new wysihtml5.Editor("text_area_content", {toolbar: "wysihtml5-toolbar"})
editor.composer.commands.exec("createLink", { href: "[~"+55+"~]" })
The problem I now have is that, after creating a link, when this link is selected in the editor, the dialog box shows the link as "http://current_url/[~55~]". I want it to show just "[~55~]".
I have tried to bind a new event to links within the editor, but I couldn't work out how to do that (since they are in an iframe).
How can I get the wysihtml5 link dialog to show the link address without displaying the current url?
In wysihtml5/src/toolbar/dialog.js a method _interpolate is called on the link which takes the link's attributes and displays them in the dialog. So whatever is in the href="..." is displayed in the input element of the dialog.
Example from the inline documentation:
https://github.com/xing/wysihtml5/blob/master/src/toolbar/dialog.js
<!-- original link -->
foo
<!-- dialog: -->
<input type="text" data-wysihtml5-dialog-field="href" value="">
<input type="text" data-wysihtml5-dialog-field="target" value="">
<!-- after calling _interpolate() the dialog will look like this -->
<input type="text" data-wysihtml5-dialog-field="href" value="http://www.google.com">
<input type="text" data-wysihtml5-dialog-field="target" value="_blank">
So if you can extend the method _interpolate in your application you could check when the attribute name is href and then just display the relative part (without the server name).
i have small-image class when i click on it megnefic popup open. in my megnific popup there is big image of clicked image and one button with other-form-opener class when i click on button other-form-div class with form comes up with my custom popup in this part when i click on form element they dont work as default.
<div class="megnific_opener"><img class="small-image" ></div>
<div class="megnific_popup_div">
<img class="big-image">
more-info
</div>
<div class="other-form-div">
<form>
<input type="text">
<input type="text">
<input type="text">
</form>
</div>
i give stucture of my html and i already cheked that there is not a z-index problem.
so please help me thank you.
here is my demo in jsfiddle : http://jsfiddle.net/QHh7W/
Please use Magnific popup callbacks and move your custom html inside Magnific popup when opened and move it inside body when closed. You can check below working demo.
jsFiddle demo
Although i cannot get this working as per your that is opening both popups one above another in same window.
but in case you need it like this : open second after clicking from one.
http://jsfiddle.net/yDvvQ/5/
I have added different instance of megnific for both divs.
It is working for both popups, content and form both.
You can later amend it to add more popups or return to first from second.
Please review once and comment.
Regards