I'm new to JQuery and I can't create reusable dialog box. Here is my code
$(function () {
$("#baseDialog").dialog({
autoOpen: false,
modal: true,
width: 520,
show: "blind",
hide: "explode"
});
$("#baseDialogOpener").click(function () {
$("#baseDialog").dialog("open");
return false;
});
I use this dialog box like this:
<input id="baseDialogOpener" type="button" value="Update" />
<div id="baseDialog" title="Test Dialog" class="divClass">
<!-- here goes some ASP .NET MVC 2 code -->
</div>
The problem is that I want to reuse this dialog many times in many pages but with different html content and I have no idea how to do this, because I can't use class attribute because of styles that I need to use too. I cant use id attrubutes with the same values at the same page.
And there is no way I can use it like this? Maybe with another attribute than id (class is reserved for css)?
<input id="baseDialogOpener" type="button" value="Update" />
<div id="baseDialog" title="Test Dialog" class="divClass">
<form>...</form>
</div>
<input id="baseDialogOpener" type="button" value="Update 2" />
<div id="baseDialog" title="Test Dialog 2" class="divClass">
<form>...</form>
</div>
Looking forward to your answes.
UPDATE: I have the code above executed by using class attribute, but all dialogs appear at once when I click button. Any way to fix this?
The dialog box can load content from an .htm file from the server when it's opened.
You can use something like this :
$("#baseDialogOpener").click(function () {
$("#baseDialog").load('content.htm');
return false;
});
UPDATE: This code shows how to have the same .click() display different contents based on the button.
$("dialogButton.").click(function () {
$("#baseDialog").load($(this).data('content'));
return false;
});
<input type="button" value="first" id="button1" class="dialogButton" data-content="content1.htm" />
<input type="button" value="second" id="button2" class="dialogButton" data-content="content2.htm" />
You can use multiple class in place of your id.
For instance, instead of:
<div id="baseDialog" title="Test Dialog" class="divClass">
Use
<div title="Test Dialog" class="divClass baseDialog">
Then you can reference it in your javascript:
Where you have
$("#baseDialogOpener").click(function () {
$("#baseDialog").dialog("open");
return false;
});
Try
$(".baseDialogOpener").click(function () {
$(this).children(".baseDialog").dialog("open");
return false;
});
$(this) just grabs whatever was clicked, so you can have multiple classes of the same kind.
Related
So I've got this menu where you can choose the class in my game.
<div class="text">
<div id="story">Choose a class.</div>
<input type="button" class="knight" value="Knight"/>
<input type="button" class="mage" value="Mage"/>
<input type="button" class="archer" value="Archer"/>
</div>
How do I use jquery so that when I press any of these buttons, I'll get a new set of buttons which you can press to choose your race?
I've tried .replaceWith() but jquery won't work on the new buttons.
It will take the css.
function classChange() {
var Class = $(this).val();
$('#statsImg').text("class: " + Class);
$('.knight').replaceWith('<input type="button" class="elf value="Elf"/>');
$('.mage').replaceWith('<input type="button" class="human" value="Human"/>');
$('.archer').replaceWith('<input type="button" class="Dwarf" value="Dwarf"/>');
$('.menu').show();
};
$('.knight').click(classChange);
$('.mage').click(classChange);
$('.archer').click(classChange);
Button elf won't do anything with the next part:
$('.elf').on('click', '.elf',function () {
$('#statsImg').text('test');
});
Works with button knight/mage/archer.
So what I'd like to know is how do I get rid of this menu and get a new menu once I press a button?
Sorry if I forgot to add something that you need to know. I'll add it if you need it.
You have to bind the events to the buttons after adding them. Try with -
$('.knight').replaceWith('<input type="button" class="elf value="Elf"/>').bind('click', function() {
$('#statsImg').text('test');
});
I need to hide a datepicker when a user moves their mouse away from an input where the datepicker is active. While it works, it works a bit too well. It also hides the datepicker when I try to mouse over it. Resizing the div isn't the best idea either as this is a dynamically generated data entry form. And only date fields are being generated with the .herd-evt-date class.
I need to know what to do to have jquery check if I'm mousing away from the textbox but not the datepicker. How does one do this?
$('#herd-evt-entry-tbl').on('focus','.herd-evt-date',function() {
$(this).datepicker({
onSelect: function() {this.focus();},
onClose: function() {this.focus();},
dateFormat: 'dd-mm-yy'
});
});
$('#herd-evt-entry-tbl').on('mouseleave','.herd-evt-date',function() {
$(this).datepicker('hide');
});
HTML:
<div id='herd-evt-menu-div'></div>
<div id='herd-evt-detail-div'>
<h2><div id='herd-evt-name-div'>Mating Event</div></h2>
<button id='herd-evt-back-btn'><-Back</button>
<button id='herd-evt-columns-btn'>Column Info</button>
<button id='herd-evt-file-upload-btn'>Upload File</button>
<button id='herd-evt-save-btn'>Save Valid</button>
<input type='hidden' id='herd-load-id-hdn' value='0' />
<input type='hidden' id='herd-evt-id-hdn' value='0' />
<table id='herd-evt-entry-tbl' border=1></table>
</div>
<div class='herd-event-columninfo-display'>
<div><button id='herd-event-columninfo-close-btn'>X</button></div>
<table id='herd-evt-columninfo-tbl'></table>
<button id='herd-evt-columninfo-upd-btn'>Update</button>
</div>
<div class='herd-evt-dup'>
<button style='float: right; ' id='herd-evt-dup-close'>X</button>
<table id='herd-evt-dup-tbl'>
<thead><th></th><th>Stig</th><th>Tattoo</th><th>Ident</th><th>Herdstat</th><th>State Day</th><th>Sex</th><th>Gen Level</th><th>Transponder</th><th>French Ident</th></thead>
<tbody></tbody>
</table>
</div>
</div></td></tr></table>
<div style='clear: both'/>
</div>
</div>
You could approach it like this:
$("#herd-evt-entry-tbl").hover(function () {
// Do something on Mouse Over.
}, function () {
// Do something on Mouse Off.
});
So if the entire div is the element herd-evt-entry-tbl then when the div element is hovered on or off it will perform your task. It will also be able to rebind the display to your visible object. Which your line $(this).datepicker('hide'); is actually applying display: none;, which may need to be modified when you mouse over again.
I'm using jquery dialog popup.
I have multiple div's (dynamically created) that require the pop-up on a single page.
My current issue is when I click the .open, all (10) pop-ups are opening, how can I trigger only one?
My html is as follows:
<a class="open" href="#">
<img src="/images/someImage1.jpg" />
</a>
<div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
<a class="open" href="#">
<img src="/images/someImage1.jpg" />
</a>
<div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
My jquery is as follows:
<script type="text/javascript"> // added .dialog:disaplay:none; to desktop.css
$(document).ready(function () {
$('a.open').prop('id', function (i) {
return '' + (i + 1);
});
$(".dialog").dialog({
autoOpen: false,
draggable: false,
width: "300px",
modal: true,
buttons: {
"Close": function () {
$(this).dialog('destroy').remove()
}
}
});
$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10")
.click(function () {
alert($(this).attr("id"));
$(".dialog").dialog("open");
return false;
});
});
</script>
This should work (or a variant of it).
$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10").click(function () {
alert($(this).attr("id"));
$(this).next(".dialog").dialog("open");
return false;
});
I feel the need to tell you to just use a class as your click handler
$(".open").click(function(e) {
e.preventDefault();
$(this).next(".dialog").dialog("open");
});
There's no need for the ID's if you're not using them.
If I am reading your code correctly what you are doing is
$('.dialog').dialog('open');
i.e. you are getting hold of all elements that use the dialog class. Naturally, that opens all your dialogs all at once. If you rewrite your markup along the lines
<div class="dialog" title="Gives Dialog Title" id='diaOne'><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
and then do
$('#diaOne').dialog('open');//grab just the dialog bearing the id diaOne.
that should I suspect do the trick
I'm using bootstrap and I want to create a form in a popover. I've done this but I can't type in the textfield of the form. Does anyone know why?
*update It's inside a modal. Outside the modal it works but inside it doesn't...
*update2 Almost there I think. When I open modal and popover, I can't type in the textfield. After I close modal, popover is still open and then I can type in the textfield. So there must be some z-index between the textfield and popup. Real sloppy but I tried input{z-index:9999;} but it didn't work
<a href="#" class="add_nr" data-nummer-id="nr_1" rel="popover">
<div id="add_number" class="popover">
<div class="addnr" id="nr_1">
<form class="form-inline">
<div class="controls">
<input type="text" placeholder="Artist">
</div>
<div class="controls">
<input type="text" placeholder="Number">
</div>
cancel
<button type="submit" class="btn">add number</button>
</form>
</div>
</div>
$(function(){
$('.add_nr').on('click', function(event){
var $this = $(this);
event.preventDefault();
$('.add_nr').not($this).popover('hide');
$this.popover('show');
}).popover({
trigger: 'manual',
placement: 'bottom',
content: function(e) {
var $this = $(this),
nr_id = $this.data('nummer-id');
return $('#' + nr_id + '.addnr').html();
}
})
});
When a Modal is launched it maintains focus upon itself, preventing the elements in the form from obtaining focus. A simple workaround would be to disable the listener when the modal launches:
$('body').on('shown','.modal', function() {
$(document).off('focusin.modal')
});
For anyone coming to this issue (popovers with forms not working modals) and who are using Bootstrap 4, you can fix this by using data-modal="false" on the button/controller that opens the modal. E.g.:
<button type="button" class="btn" data-toggle="modal" data-target="#new" data-focus="false">
If you're opening your modal using JS, you can pass in a focus option. Full docs on the options here
I'm trying to do the following sort of thing in Javascript, where you click on the down arrow and it expands downward and displays options (I'll have some input fields and checkboxes and text and stuff in there).
Can anyone please help me out or point me in the right direction, I've tried google searching but I have no idea what they're even called in the Javascript world. "Javascript expanding box", "javascript drop down box", "javascript expanding modal dialog", etc. Nothing seems to hit.
Here's the example:
http://imageshack.us/f/810/examplebe.jpg/
There will be a submit button in the top section (not in the expand section), which will submit the options in the drop down menu as well as the options in the section near the submit button.
Thanks!
Set your markup something like this:
<div class="expandingBox" id="expandingBox">
<div id="expandingBoxContent">
//Content here
</div>
</div>
Expand
and in your CSS, the expandingBox class should be set to:
.expandingBox
{
height: <your initial box height here>
overflow: hidden;
// other styling here
}
Then to get it to expand, you can do something like:
$('#expandButton').bind('click', function(){
var contentHeight = $('#expandingBoxContent').height();
$('#expandingBox').animate({ height: contentHeight }, 1000);
}
a little demo. it may help you
HTML:
<input id="login_button" type="button" value="∨" />
<form name-"myForm" id="login_form" style="height:150px">
<div id="toggle" style="width:150px; height:100px;position:absolute;top:30px;left:20px;background:#9BCDFF;display:none;padding:10px">
<label for="name">Name:</label>
<input type="text" name="name" />
<label for="password">Password:</label>
<input type="text" class="password" />
</div>
<input type="submit" id="#submit" value="Submit" style="position:absolute; top:150px"/>
</form>
JQUERY:
$('#login_button').click(function(e) {
$('#toggle').slideToggle(1200,
function() {});
});
$('#submit').click(function() {
$('form[name=myForm]').submit(function() {
alert('form submit');
});
});
$('#toggleBtn').click(function(){ $("#toggleBox").toggle();});
If you're using jQuery, I think you might want to look at the jQuery UI implementation of the collapsible accordion.
THere is an inbuilt jquery effect 'SlideDown'. Check it here: http://api.jquery.com/slideDown
It should not be really difficult. You can use jQuery animation effects for that.
Some code example, just to give you direction:
// html
<div id="some-container">Click me!</div>
<div id="some-container-to-show">Hey, I'm appeared on screen!</div>
// js
$(function () {
$("#some-container-to-show").hide();
$("#some-container").live("click", function () {
$("#some-container-to-show").slideDown();
});
});