We Keep Coding

jqueryui dialog inside php while loop not opening as expected

i want to show jquery dialog on link click but when i click multiple dialog are opening instead of one.
i tried this but still not working.
if i use next() method then no dialog is opening as you can read in link above.
i think i should use data attribute but i don't know how to use it.
Here is my jqueryui dialog div content inside a php while loop:
while ($rows8 = $sql8->fetch_assoc()){
echo "<div id='view-reply'>
<span class='report_link'><a data-myid='$rows8[reply_id]' class='rp' href='javascript:void(0);'><img src='img/admin.png' alt='report to admin' title='report to admin'/></a></span>
<div style='display: none;' class='post_reply_report_win'>
<h4><span>Report to Admin</span><hr/></h4>
<form class='reportForm' method='post' action='report_process.php?uid=".urlencode(base64_encode($rows8['reply_by']))."&p=".urlencode(base64_encode($rows8['reply_to_post']))." '>
<p><span>Subject</span><br/>
<input type='text' name='reporttxt' maxlength='100' required autofocus /></p>
<p><span>Details</span><br/>
<textarea name='reportarea' maxlength='500' required ></textarea></p>
<p><input type='submit' name='reportsub' id='sub' value='Submit'/></p>
</form>
</div>
</div>
}
and i am displaying it like this:
$(document).ready(function(){
$(".post_reply_report_win").dialog({
modal : true,
draggable : false,
resizable : false,
autoOpen : false,
buttons: [
{
text: "Cancel",
click: function () {
$(this).dialog("close");
},
style: "outline: none;"
}
],
close : function(event, ui){
$(this).dialog("close");
}
});
$("#view-reply .report_link a").click(function() {
$(".post_reply_report_win").dialog("open");
return false;
});
});

Your click listener simple opens them all as they do all have the class!
$(".post_reply_report_win").dialog("open");
You need to have unique identifiers for opening the dialog. Assignment can be done by class.
So I would go like this:
Give this line <div style='display: none;' class='post_reply_report_win'> a unique id like so <div style='display: none;' class='post_reply_report_win' id='post_reply_report_dialog_<?echo $i;?>';
$i would start at 1 and $i++ at the end in your loop.
your listener should then use .closest() from jquery to find the closest .post_reply_report_win element and get the id from that.
that id is the one you pass to your .open call of the dialog.
$('#'+$(this).closest('.post_reply_report_win').attr('id')).dialog("open");

The id should be unique. id='view-reply' is inside while loop and it is repeating.
Try below code:
$(".report_link a").click(function() {
$(this).parent('.report_link').next('.post_reply_report_win').dialog("open");
return false;
});

i have solved it myself after a long research.
i am posting my solution here just to help others that are also searching for the solution :)
So here is the solution:
php:
while ($rows8 = $sql8->fetch_assoc()){
echo "<span class='post_reply_report_link'><a data-myid='$rows8[reply_id]' class='rp' href='javascript:void(0);'><img src='img/admin.png' alt='report to admin' title='report abuse'/></a></span>
<div class='post_reply_report_win_$rows8[reply_id]' id='post_reply_report_win' >
<h4><span>Report Abuse</span><hr/></h4>
<form class='post_reply_report_form' method='post' action='report_process.php?uid=".urlencode(base64_encode($rows8['reply_by']))."&p=".urlencode(base64_encode($rows8['reply_to_post']))." '>
<p><span>Subject</span><br/>
<input type='text' name='reporttxt' maxlength='100' required autofocus /></p>
<p><span>Details</span><br/>
<textarea name='reportarea' maxlength='500' required ></textarea></p>
<p><input type='submit' name='reportsub' id='sub' value='Submit'/></p>
</form>
</div>";
}
javascript:
$(document).ready(function(){
$(".post_reply_report_link a").click(function() {
var myID = $(this).attr("data-myid");
$(".post_reply_report_win_"+myID).dialog({
modal : true,
draggable : false,
resizable : false,
buttons: [
{
text: "Cancel",
click: function () {
$(this).dialog("close");
},
style: "outline: none;"
}
],
close : function(event, ui){
$(this).dialog("close");
}
});
});

how to find the last dynamic button clicked

I have created a dynamic buttons each button is the same:
<input type="button" id="editBtn" value="Edit" style="float: right" />//each button has its id ofcourse
When one button is pressed it shows a table.
I am looking for a way to 'click last button'/'hide the table' if an other button on page is clicked.
Using Jquery, is it possible ? or is there a better way to do it?

If u want to display content using button(hide/show)
You can accomplish this using jquery toogle function
$(document).ready(function()
{
$("#button").click(function()
{
$("#table").toggle();
});
});
link to fiddle

Simply hide all siblings of the selected table...
So for example, if you have (Pseudo code)
<input type="button" id="editBtn1" value="Edit" onclick="showTable(1)" />
<input type="button" id="editBtn2" value="Edit" onclick="showTable(2)" />
<input type="button" id="editBtn3" value="Edit" onclick="showTable(3)" />
<table id="table1">...</table>
<table id="table2">...</table>
<table id="table3">...</table>
JS would be :
function showTable(tableid) {
$("#table" + tableid).show().siblings().hide();
}
But of course, this is all very hard coded & hence an avoidable practice.
Or as discussed in comments :
function showTable() {
var tableId = $(this).index();
$("table").hide().eq(tableId).show();
}

I think this is what you want: http://jsfiddle.net/BY27P/9/
This will remember the tables you have viewed and let you view all previous ones using basic JavaScript array push/pop.
Here is the JavaScript (view fiddle for full code):
var viewedTableHistory = [];
hideAllTables=function(){
$('table[id^="table"]').hide(); //hide all tables
}
loadTable=function(id){
viewedTableHistory.push(id);
$('#history').text(viewedTableHistory);
hideAllTables();
showCurrentTable();
};
hideCurrentTable=function()
{
$('#table'+viewedTableHistory[viewedTableHistory.length-1]).hide();
};
showCurrentTable=function()
{
$('#table'+viewedTableHistory[viewedTableHistory.length-1]).show();
};
viewPrevTable=function()
{
hideAllTables();
viewedTableHistory.pop();
$('#history').text(viewedTableHistory);
if(viewedTableHistory.length===0) alert('You are back to the beginning.');
showCurrentTable();
};

I think I solved your problem try this fiddle ...
See output on below fiddle
Js fiddle
Style:
.tbl{
display:none;
}
Jquery:
$(".btn").click(function(){
var $this = $(this).next("table");
$( this ).next("table").removeClass("tbl");
$(".btn").next("table").not($this).addClass("tbl");
});
Html:
<div class="tble">
<input type="button" value="Button1" class="btn"/>
<table class="tbl"><tr><td>test1</td></tr></table>
</div>
<div class="tble">
<input type="button" value="Button2" class="btn" />
<table class="tbl"><tr><td>test2</td></tr></table>
</div>

Disabled button on click with jquery mobile

html:
<script src="http://zurb.com/playground/javascripts/plugins/jquery.textchange.min.js"></script>
<form>
<input type="text" name="comment" id="comment" placeholder="Comment" maxlength="140" value=""/>
<div id="charactersLeft"></div>
<input type="submit" id="commentButton" data-icon="edit" data-inline="true" data-mini="true" data-theme="b" value="Send" disabled="disabled"/>
</form>
<div id="actionList">
</div>
js:
$('#comment').bind('hastext', function () {
$('#commentButton').button('enable');
});
$('#comment').bind('notext', function () {
$('#commentButton').button('disable');
});
$('#comment').bind('textchange', function (event, previousText) {
$('#charactersLeft').html( 140 - parseInt($(this).val().length) );
});
$('#commentButton').click(
function(){
$('#actionList').prepend('<p class="item">' + $('input[name=comment]').val().trim() + '</p>');
$('#commentForm').each (function(){ this.reset(); });
//document.getElementById('commentForm').reset();
$(this).button('disable');
}
);
On Fiddle its works another, that on my machine. So, test local. The problem is: when I write a comment, than I click on the button, comment apears in #actionList, the button blocked. Nice. But. If I want to write a new comment, the button will be disabled. I have text in input, but I cant click button. I deleted my new text in input, and than I can write something and button finally enabled.
Its very strange, how to fix it? Thanks.

I added the line, to remove comment once posted:
$('#comment').val("");
I also replaced your hastext and notext functions with this code, added in the textchange function:
var tb_value = this.value;
if (tb_value == "") {
$('#commentButton').button('disable');
} else {
$('#commentButton').button('enable');
}
See the Fiddle.

window.prompt multiple line input JavaScript CSS

I am trying to find a way to make something equivalent to window.prompt, but which allows multiple lines of input.
I could create my own using a div with z-index containing a textArea, but I am hoping there is something out there in jQuery or a plugin that would be more elegant.
Any ideas?

You can use the jQuery Dialog to do that.
Here's an example: http://jsfiddle.net/RBKaZ/
Using this HTML
<div id="dialog">
<p>Please enter your name</p>
<textarea id="name"></textarea>
</div>
<label>Name entered: </label>
<label id="nameentered"></label>
<br />
<input type="button" id="open" value="Open Dialog" />
And this jQuery:
$("#dialog").dialog({
autoOpen: false,
buttons: {
Ok: function() {
$("#nameentered").text($("#name").val());
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#open").click(function () {
$("#dialog").dialog("open");
});

Control Radio Buttons with a Checkbox

I'm using a CMS that hides form elements behind tags, because of some system quirks I've had to set up a checkbox that controls the radio buttons so if the checkbox is ticked the "yes" radio button is selected if not the "no" is selected. I also want the radio buttons to have option "no" checked by default but I don't have control over the line of code for the radio buttons.
I found some Javascript that does a small part of this but I want to integrate it into the jQuery that displays and hides content when the box is ticked.
Here's what I have so far:
$('#checkbox1').change(function() {
$('#content1').toggle("slow");
});
The Javascript I have is this:
function ticked(){
var ischecked = document.getElementById("checkbox").checked;
var collection = document.getElementById("hideradio").getElementsByTagName('INPUT');
if(ischecked){collection[0].checked = true;}else{collection[0].checked = false;}
}
Can you please help write a version of the Javascript but integrate with my jQuery?
Thanks,

You can try this, I assume your html as like this.
<input type="checkbox" id="checkbox1" /> Check Box
<div id="content1" >
Some Content <br />
Some Content <br />
Some Content <br />
Some Content
</div>
<div id="hideradio">
<input type="radio" name="rgroup" value="yes" /> Yes
<input type="radio" name="rgroup" value="no" /> No
</div>
JQuery
$(function(){
$('#hideradio input[type=radio][value=no]').attr('checked',true);
$('#content1').hide();
});
$('#checkbox1').on('change', function() {
$('#content1').toggle("slow");
var self = this;
if(self.checked)
$('#hideradio input[type=radio][value=yes]').attr('checked',true);
else
$('#hideradio input[type=radio][value=no]').attr('checked',true);
});
A Quick DEMO

Try this code
​
$(function(){
$('#checkbox1').on('click' , function() {
var isChecked = $(this).is(':checked');
if(isChecked){
$('#radio1').attr('checked' , true);
$('#content1').toggle("slow");
}
else{
$('#radio1').attr('checked' , false);
}
});
});​
Check [FIDDLE]

If I don't understand correctly then let me know.
I don't know your HTML code so I provide one
<form>
<input type="checkbox" name="test_ck" id="test_ck" />
<br/>
<input type="radio" name="test_radio" id="test_radio" />
</form>
<div id="content"> A content !!! </div>
and javascript jquery
$(function(){
$("#test_ck").on("change", function(){
$("#test_radio").prop("checked", $(this).is(":checked"));
$("#content").toggle("slow");
});
});
Example -> jsfiddle
UPDATED jsfiddle
http://jsfiddle.net/6wQxw/2/

jsfiddle
$(document).on('change', '#checkbox', function() { toggle(this); });
var toggle = function(obj) {
var checked = $(obj || '#checkbox').is(':checked');
$(':radio[value=no]').prop('checked', !checked);
$(':radio[value=yes]').prop('checked', checked);
$('#content').toggle(checked);
}
toggle();

This is a pure JavaScript solution, no need to use jQuery:
<body>
<label for="a">Male</label>
<input type="radio" id="a">
<br/>
<label for="b">Female</label>
<input type="radio" id="b">
<script type="text/javascript">
var nodes = document.querySelectorAll("input[type=radio]");// get elements
var arr = Array.prototype.slice.call(nodes); // convert nodes to array for use in forEach
arr.forEach(function(obj){
obj.addEventListener("change",function(e){
arr.forEach(function(obj){
obj.checked = false;//make other radio false
});
this.checked = true;// make this radio ture
});
});
</script>
</body>