Develop Reference

Semantic-UI Popup - Change HTML before initializing

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

HTML input "disabled" attribute not working in Bootstrap modals

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);

form element not working in megnific popup

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

Show Interactive Html elements on top of an anchor tag

I have a area surrounded by an anchor tag and it should be directed to anchor tag href wherever user clicks on that area. And also that area should contain a textbox and button control which should allow user to type some text and submit. The problem is when I click on the textbox or button it does a redirect to the page given in anchor tag.
<a href="http://stackoverflow.com/">
<div style="border:1px solid grey;width:300px;height:100px;">
<div style="">Title</div>
<div>
<input type="text" name="name">
<button type="button" onclick="alert('button clicked');">Click Me!</button>
</div>
</div>
</a>
Please refer this jsfiddle.
I have created a simplified problem here.
However I found a solution for this by giving negative margin-top values. It is working but I am interested in a better solution. Because this solution is not scalable since the button and textbox are not inside the content div.
Each of these sections represent a item in a search result. When a user click on a search item it would navigate to single item page. At the same time users should be able to edit content from search results view by selecting edit option. When they select edit, a textbox and a button to submit should appear.

Unfortunately the HTML5 spec says about the <a> element:
Content model:
Transparent, but there must be no interactive content descendant.
What that means is, an <a> element is allowed to contain any elements that its parent is allowed to contain, except for things like <button>.
You'll need to find a way to get your <button> and <input> working outside of the <a>

Use this
<input type="text" name="name" onclick="return false;" />
Use this only if you don't want to change your markup.
The best solution is go with the semantics of HTML and style it. This way is not correct as Gareth pointed out.
In the case of your button
<button type="button" onclick="buttonClick(event);">Click Me!</button>
function buttonClick(e) {
alert('button clicked');
e.preventDefault();
}

Introduce a onclick for textfield and use stoppropagation method for a event. for ex ,
textfield.onclick = function(e) {
e.stopPropagation();
}
Another alternate is to use <div onclick="function()"> instead of <a> tag for what you think to achieve

Firefox - hiding focus highlight when not on an input control

We have a requirement whereby a page can consist of a form with several sections. Sections can be added or removed. After the user chooses to add a section the form is submitted and a new page returned with the new section added. The browser should scroll to the top of the new section. This is fine and I have a generic jquery "scroll to anchor" solution working. However, in addition to simply setting window.location(), I also need to ensure that for keyboard users, hitting tab will take them to the next field after the anchor point. I'm using the solution to this question to do this.
This works fine in IE 8/9 but in firefox(15), I'm seeing a little focus square being rendered where the anchor tag is. I would like to suppress this, I tried setting display:none but of course this stops the scroll working. I tried to create a fiddle but jsFiddle doesn't demonstrate the problem as the fddle site itself is interfering with the focus setting - but the same code in the same browser running locally does.
here's a reduced version of my code that demonstrates the problem.
<html>
<head>
<title>test scroll</title>
</head>
<body>
<form>
<div>Blah</div>
<div>
<label for="a">Section 1: <input id="a" type="text" /></label>
</div>
<a id="scrollToAnchorSection2"></a>
<div>
<label for="b">Section 2: <input id="b" type="text" /></label>
</div>
</form>
</body>
</html>
and my jquery
$(document).ready(function() {
/* Find any "scroll to anchors" that have been set */
var anchors = $('[id*=scrollToAnchor]:first');
if (anchors.length == 1) {
window.location = "#" + anchors.attr("id");
// Set tab position
anchors.attr("tabindex", -1).focus();
}
});
and css
div {
margin-left:5em;
}

As requested...
the Blur function takes care of the input lost focus.
$('input').blur(function (){...})? isn't this what you need?
The jquery documentation has this interesting comment.
"The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as . In recent browsers, the domain of the event has been extended to include all element types."