Loading...

Search jQuery

Search

jQuery Forum

Screen name:
a.koolen

a.koolen's Profile

2 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

showing one modal at a time
[1Reply]
- 04-Feb-2013 08:58 AM
- Forum: Using jQuery UI
Hello,

I have a list of cd track. I want to use a modal for showing the songtext of every track.
I used the following code based on the jquery dialog example.

<script>
$(function() {
$( "#dialog0101" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});

$( "#dialog0102" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});

$( "#opener0101" ).click(function() {
$( "#dialog0101" ).dialog( "open", "modal", true );
});

$( "#opener0102" ).click(function() {
$( "#dialog0102" ).dialog( "open", "modal", true );
});
});
</script>
<div id="dialog0101" title="Basic dialog">
<p>Text cd 1 track 1</p>
</div>

<div id="dialog0102" title="Basic dialog">
<p>Text cd 1 track 2</p>
</div>

<td><button id="opener0101">Text</button></td>
<td><button id="opener0102">Text</button></td>

When a modal is activated the background is not disabled. When another button is clicked this modal and the already activated modal is also display on the same spot as the other. How can I disable the background?
Is it also possible to shorten the above code?

Update table cell after link click
[2Replies]
- 26-Mar-2011 06:49 PM
- Forum: Getting Started
Hello,

I have a table with rows and in each row there is a cell which shows the status of the row item.

<a href="#" id="<?php id ?>" class="status_button">Online</a>

When I click the link in a row the next code is activated (found it somewhere on the net).

$(".status_button").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent();

$.ajax({
   type: "POST",
   url: "toggle_ajax.php", //updates the database
   data: dataString,
   cache: false,

   success: function()
   {
    if(id % 2)
    {
    parent.fadeOut('slow', function() {$(this).remove();});
    }
    else
    {
    parent.slideUp('slow', function() {$(this).remove();});
    }
}

});

The effect is that the status is changed in the database (toggle_ajax.php) and the table cell is removed (cell's on the right of this cell are moved 1 place to the left).

The effect that I want to get is that the cell is update with the new status.

How can this be accomplished?

«Prev
Next »