Open div when click a another div - javascript

I have a html structure. With the following:
<div class="edit"><a class="formtri" href="#">CHANGE</a>
And:
<div id="user_adr" style="display:none">
I want, when i click CHANGE, get user_adr div on front. Ajax or other solution. I tried jQuery .load function but it's not work. How can i do this?
Demo

You can use toggle() function to show / hide html element.
Live Demo
$('.edit').click(function(){
$('#user_adr').toggle();
});

alternatively you can use toggle functionality.
$('.edit').on('click',function(){
$('#user_adr').toggle();
});
if not toggle. then alternative method of toggle is this.
$('.edit').on('click',function(){
if('#user_adr').is('visible'))
{
$('#user_adr').show();
}
else
{
$('#user_adr').hide();
}
});
//to change display to none
$('#yourDivId).attr('display','none');

you can use jquery ui. dialog() method to show a dialog box. like this. Jquery dialog
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>

if in case there is any other div with same class name edit above solutions may not be helpful so better u keep a unique id as "change"
<div class="edit"><a class="formtri" id="change" href="#">CHANGE</a>
$("#change").on("click", function(){
$('#user_adr').show();
});
$("#change").on("click", function(){
$('#user_adr').toggle();
});

Related

Create a JQuery dialog modal function with parameters

I am a bit newbie in Jquery and java scripts and a bit confuse in this matter.
Here's my code of a simple modal message alert taken from JQuery UI.
The problem is that the function is being called in the div class in the HTML code:
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog-message" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
But what i want to do is to create 2 parameters: 1 receives some text and the 2nd is when i press ok it goes to a link.
I am developing a website and i don't want to use the browsers alert, just want to use that JQuery script and do something like this:
<?php
function alerta($texto="",$redirect=""){
print("<Script language=javascript>");
if($texto!="")
print("alert(\"$texto\");");
if($redirect!="")
print("window.location=\"$redirect\";");
print("</script>");
}
?>
You can echo your text (Variable 1) inside the div modal, and then use the redirect function on 'OK' button click event:
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
window.location = "$YOUR_VARIABLE_2";
}
}
});
});

paragraph Select() doesn't work in javascript

Here is my html code
<div id="dialog" title="Basic dialog" style="display: none">
<p id="para">Copy this key</p>
<p id="key">4567887654345678</p>
</div>
<button>Open dialog</button>
The div appears as a dialog on button click, and I would like to have the "key" text selected when the dialog opens
Here is the javascript for the same, but the < p> doesn't appear to be selected
$(function() {
$( "button" ).click(function() {
$("#dialog" ).dialog();
$( "#dialog" ).show( "slow" );
$("#key").select();
});
});
How can I make the < p> be pre-selected ?
Change the key paragraph to an editable element, such as a textarea:
<textarea id="key">4567887654345678</textarea>
JSFiddle
It appears you need an editable text field to select text in.
I think you should use jQuery dialog open event:
$( "#dialog" ).dialog({
open: function( event, ui ) {
$("#key").select();
}
});
JSFiddle

Cannot close dialog on JSFiddle

I've tried the following on JSFiddle
HTML:
<div id="dialog" title="Basic dialog">
<p>Hello.</p>
</div>
Link
JavaScript
$(document).ready(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$(document.body).on('click',"a",function(event){
event.preventDefault();
$("#dialog").dialog('open');
});
});
I cannot close the dialog when I hit the close button. Why is it?
You're reopening the dialog when the close click bubbles up to the document level. The dialog close [x] is an <a> too.
Add this line to that "click" handler, at the very beginning:
if ($(this).hasClass('ui-dialog-titlebar-close')) return;
Alternatively, you could make your "open dialog" link more specific, by giving it a class or something:
<a href=# class=open-dialog>Link</a>
Then:
$('body').on('click', '.open-dialog', function(event) {
event.preventDefault();
$('#dialog').dialog('open');
});
By making the link to open the dialog distinct from the close button, you get around the ambiguity.
You must define CLOSE function:
HTML
<div id="dialog" title="Basic dialog">
<p>Hello.</p>
</div>
<a id="open" href="www.google.com">Link</a>
JavaScript
$(document).ready(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$(document.body).on('click',"#open",function(event){
event.preventDefault();
$("#dialog").dialog('open');
});
$(document.body).on('click',".ui_icon_closethick",function(event){
event.preventDefault();
$("#dialog").dialog('close');
});
});
Working solution: http://jsfiddle.net/QTqUr/1/

jQuery UI dialog boxes won't close

I am using the following code to open a dialog box:
<li>
<input type="button" value="Preview" onclick="showPreview('EmailPreview');" />
</li>
<div id="dialog">
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false,
modal: true,
height: 525,
resizable: false,
width: 600,
dialogClass: 'timer'
});
});
//]]>
</script>
</div>
In my .js file:
function showPreview(action, id) {
$.get("/Manage/Account/" + action + "/" + id, function (data) {
$("#dialog").html(data);
$('#dialog').dialog('open');
$('#Area, #Exchange, #Number').autotab_magic().autotab_filter('numeric');
$("#dialog input[type='button'], #dialog select,#dialog input:checkbox,#dialog input:radio,#dialog input:file").uniform();
});
I use this exact code in 3 locations. In one location everything is perfectly functional. In the other 2 locations, done exactly they same, just in different views, the dialog box will open but not close. Is there something obvious that I am missing?
This is in the dialogbox-view:
<div class="top"><a onclick="$('#dialog').dialog('close'); return false"><img src="/public/images/admin/btn-close.png" /></a></div>
I don't see any dialog closing anywhere, you can close your dialog with this function:
$('#dialog').dialog('close');
More about it: jQueryUI dialog
Also any element has to have unique ID, so it should be something like #dialog-a, #dialog-b, otherwise there will be errors with id selectors etc.
Your dialog element IDs need to be unique, or jQuery won't find the right one.

jquery modal is not working

jquery modal working when code is in same page
index.jsp
<script>
function show()
{
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
}
</script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
<div id="dialog-modal" title="Demo" style="display:none">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
but, when i'm trying to separate the above code in different file, then it is not showing
index.jsp
<script>
function show()
{
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "/dialog.jsp#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
}
</script>
</head>
<body>
<input type="button" value="Demo" onClick="show()" >
</body>
dialog.jsp
<div id="#dialog-modal" title="Demo">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
thanks in advance !!
You cannot call an external resource in a jQuery selector like $("/dialog.jsp#..."). Instead you need to load the resource with an AJAX call.
First, add a node to your main HTML to receive it. I've added <div id='dialog-content'></div>. Then load the .dialog() on that node:
<script>
function show()
{
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-content" ).dialog({
height: 140,
modal: true,
// Use load function to populate the dialog:
load: function() {
$("#dialog-content").load("/dialog.jsp#dialog-modal")
}
});
});
}
</script>
</head>
<body>
<div id='dialog-content'></div>
<input type="button" value="Demo" onClick="show()" >
</body>
That's simply not going to work; jQuery is not going to load the other page fragment for you just because you reference it with that selector; it's not even valid selector syntax.
If you want to load the dialog from another file, you'll have to either do a <jsp:include> to include it server-side or else make an explicit ajax call (with jQuery .load() or .ajax() or whatever) when something happens that makes you want to show the dialog.
That's because there is not element in the dom with the id "dialog-modal'. Your selector is incorrect. Do a console log of your jquery selector result and you'll see it's empty. Make sure the element in loaded in the dom. You can also create it on the fly:
$('<div id="my-popup">').dialog({
height: 140,
modal: true
});
Adding a "path" to your jQuery selector does not put the javascript in a separate file, and I don't think I've seen a successful use of having your HMTL markup in a separate file.
Move the markup back to index.jsp and move the show() function into a seperate .js (not .jsp) file.
Link the new .js file to index.jsp:
<script type="text/javascript" src="/show.js"></script

Categories

Resources