I am creating a registration form where its contents are contained in DIV (hidden), then when the user clicks a button, the modal shows and the content is loaded through the ID of the DIV.
However, I am encountering a problem where the button of the DIV is not recognized in my script. I assigned a click event using jquery, but it doesn't work. Probably because the hidden DIV has conflicts with the DIV create in the modal (which will eventually have the same IDs).
Here is my script:
$('#addCollege').click(function(e){
modal.open({content: $('#addCollegeForm').html()});
e.preventDefault();`
});
This is the DIV
<div id="addCollegeForm" style="display:none">
<label>College:</label><br>
<input type="text" placeholder = "Enter college name here..." id = "collegeDescription" > <br>
<input type="button" value="Save" id= "addCollege">
</div>
Thanks and I appreciate your help.
I wrote a dialog plugin for bootstrap, and got a similar problem.
I want to pop up an existing dom element.
Here is solution:
$targetElement.detach().appendTo($window.find('.modal-body')) // $targetElement is an existing dom
Detach element and append it to container.
Don't forget to revert the element to old container.
Hope it helps.
Regards
Try moving the button that opens your dialog out of the dialog:
EDIT - something like this should work...
HTML...
<div id="addCollegeForm">things in your dialog</div>
<input type="button" value="open dialog" id="addCollege">
jquery...
$("#addCollegeForm").dialog({
autoOpen: false
});
$('#addCollege').click(function () {
$("#addCollegeForm").dialog("open");
});
http://jsfiddle.net/DTq6m/
http://api.jqueryui.com/dialog/#option-autoOpen
Related
I have a div "button" that opens a popup. When you click on the popup, it runs
function theFunctionAbout() {
var popup = document.getElementById("thePopupAbout");
popup.classList.add("show");
}
and it will add show, which is visibility:visible;
when you click a button in the popup, it runs
function theFunctionAboutClose(){
var popup = document.getElementById("thePopupAbout");
popup.classList.add("hide");
}
and it will add hide, which runs display:none;.
After hitting the button, the popup closes, but never opens again. How do i fix this?
I have tried switching add.("hide") to remove.("show"). This works on another popup where the popup window is part of a dive form element, and that popup is reopenable, However, my popup window here has a paragraph element. When i tried to do remove.("show") on my about popup, the button would not close the window.
My button:
<div class="aboutPopup" onclick="theFunctionAbout()">About
<p class="aboutPopupText" id="thePopupAbout">
<span class="aboutPopupInfo">
Mathalassa is a fun and educational math game that offers students from varying ages and grades to learn and perfect their math skills.
</span>
<button class="aboutPopupClose" onclick="theFunctionAboutClose()">x</button>
</p>
</div>
Another button:
<div class="oldUserPopup" onclick="theFunctionOld()">Old User
<form class="oldUserPopupText" id="thePopupOld">
<label class="oldUserPopupInfo" for="name">Please Enter Your Username:</label>
<div class="form-grp">
<input class="inputNameHere" type="text" name="username" id="user" required minlength="2" maxlength="15" size="10" >
</div>
<div class="form-grp">
<input class="inputSubmit" type="Submit" name="login-btn" id="user">
</div>
<button class="oldUserPopupClose" onclick="theFunctionOldClose()">x</button>
</form>
</div>
instead of using two differents fonctions for open/close the popup you can use element.classList.toggle("hide"); which will create less problems for the hierarchy of the css of each class
When you are using the add method you're appending a class to existent classes.
let's say you've shown and hidden the element several times your element className string would be as the following:
class="...other_classes show hide show hide show hide"
and you don't want that so replace the two function with the following so when you add hide class you'll remove show and so on...
function theFunctionAbout() {
var popup = document.getElementById("thePopupAbout");
popup.classList.remove("hide");
popup.classList.add("show");
}
function theFunctionAboutClose(){
var popup = document.getElementById("thePopupAbout");
popup.classList.remove("show")
popup.classList.add("hide");
}
I have a simple HTML button in my webpage having its HTML shown below:
<div id="submit1" style="float:left;cursor:pointer;" onclick="checkValidity();">
<input type="button" value="Finish" class="finish">
</div>
When I applied the onclick="checkValidity();" on my button it was not working but when I tried it with the container div of the input button it starts working.
I am unable to understand why it was not working while I called this function in button? Can anyone have any idea on it.
Interesting thing is that is working in another webpage on the input button too... !
First of all, checkValidity is a keyword. Stop using it. Change it to CheckIfValid or something like that.
Simple example in the jsfiddle. Check here
chck = function (obj)
{
alert('hi: ' + obj.id);
return true;
}
checkValidity is an event for input objects and returns true if the input has valid data. So, there is no scope for js event here.
It works on div because DIV is not an input element.
Let me know if you have any issues.
You have to surround that input tag inside a form tag.
<div id="submit1" style="float:left;cursor:pointer;" onclick="checkValidity();">
<form>
<input type="button" value="Finish" class="finish">
</form>
</div>
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
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
I am trying to show the submit button when I click on the search field and I also am trying to hide it when the field closes (the is form located in the main navigation bar)...
This is my code :
$(document).ready(function(){
$("#search-click").click(function(){
$(".search-form .search-submit").css("display" , "block");
});
});
It's not working at all...this is my link : http://dev.pixstreammedia.com.s150147.gridserver.com/system/
Try this:
http://jsfiddle.net/5UJ5U/1/
HTML:
<form>
<input type="search" class="searchclick" placeholder="search">
<input type="submit" class="sub" value="search">
</form>
JS:
$(".sub").hide();
$(document).ready(function(){
$(".searchclick").click(function(){
$(".sub").fadeToggle('fast');
});
});
1.You are not showing the right id : your button has id : search-submit-button and you display block the other element but not this id, so the solution is to add #search-submit-button to your display block function.
2.As for the hiding you could do an mouseleave, to class: search-form then hide the button.
It's working the button is just tucked underneath. Also in the console the $ isn't assigned to jQuery, so I had manually use your snippet with jQuery directly.
jQuery(".search-form .search-submit").css("display" , "block");
Type that into your js console to see the button is there, but you only see a small portion of it.