jqueryui dialog inside php while loop not opening as expected - javascript

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");
}
});
});

Related

create dynamically buttons to show dialog

I have a button (create) and when it's clicked, it creates a new button (Change coordinates) that should be able to open dialog when it's clicked.
First of all I created body of dialog window, I created this via JavaScript, this is just how it looks like in HTML:
<div id="dialog-form" title="Change coordinates">
<p class="validateTips">Both fields are required.</p>
<form>
<fieldset>
<label for="lon">Longitude (decimal)</label>
<input type="text" name="lon" id="lon" value="" class="text ui-widget-content ui-corner-all">
<label for="lat">Latitude (decimal)</label>
<input type="text" name="lat" id="lat" value="" class="text ui-widget-content ui-corner-all">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
Now when create button is clicked I crate new button able to open dialog:
$( "#create" ).button().on( "click", function()
{
var btn = document.createElement("BUTTON");
btn.id = "change_coord";
var t = document.createTextNode("Change coordinates");
btn.appendChild(t);
document.body.appendChild(btn);
});
And this is how my dialog looks like:
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons:{
"Create an account": addUser,
Cancel: function(){
dialog.dialog( "close" );
}
},
close: function(){
form[ 0 ].reset();
allFields.removeClass( "ui-state-error" );
}
});
Weird is that it works when I'm creating body of dialog and button to open it in
$(function()
{
....
});
But when I'm dynamically creating this button to open dialog it doesn't work at all.
HERE is my fiddle to show you my problem.
Per Charlietfl, who is correct "live" has been deprecated, but it does still remains a common solution to the problem. The other method I've used, which also works is:
$(document).on("mouseenter","#lsTMFmenu", function() {
However, I cannot get JQuery to work against dynamically loaded HTML using just $("#selector").on(), I must use $(document).on statement shown above.
Thanks.

Form losing value after mobiscroll selection

I have a form with two instances of mobiscroll one of which pops depending on the button clicked.
$(function(){
$('#clocklater').mobiscroll().time({
theme: 'default',
display: 'modal',
mode: 'scroller',
setText: "Save",
cancelText: "Cancel",
headerText: "Available after",
timeFormat: 'HHii',
timeWheels: 'HHii',
stepMinute:10
});
$('#later').click(function(){
$('#clocklater').mobiscroll('show');
$('[name=available]').val(2);
return false;
});
});
$(function(){
$('#clockyes').mobiscroll().time({
theme: 'default',
display: 'modal',
mode: 'scroller',
setText: "Save",
cancelText: "Cancel",
headerText: "ETA station",
timeFormat: 'ii',
timeWheels: 'ii',
stepMinute:5
});
$('#yes').click(function(){
$('#clockyes').mobiscroll('show');
$('input[name=available]').val(1);
return true;
});
});
my HTML is
<form name="response" action="" method="post" >
<input name="clocklater" id="clocklater" class="i-txt" type='hidden' onChange="document.response.submit();"/>
<input name="clockyes" id="clockyes" class="i-txt" type='hidden' onChange="document.response.submit();"/>
<div class='yes button'><input id='yes' name='available' type='button' alt="YES" value="yes" /></div>
<div class='no button'><input id='no' name='available' type='button' alt="NO" value="no" /></div>
<div class='later button'><input id='later' name='available' type='button' alt="later" value="later" /></div>
</form>
(aarrgghh can't get that to format nicely)
When I submit the form without calling mobiscroll it all works fine, however when I call mobiscroll after clicking the yes or later buttons the value of the available input isn't passed. Console is not generating any errors.
As you can see I have tried forcing the value depending on the click, that doesn't work either. If I put an alert in before the return the value is there - this is also indicates the js isn't breaking.
Any thoughts on why the value of available isn't there?
FWIW I am processing the form using PHP.
[UPDATE] I just dumped the POST array and the available key isn't even in it.
Button values are only submitted if the form is submitted by clicking the respective button.
In your case the form is submitted in the onChange event of the "clocklater" or "clockyes" inputs.
You can submit it via a hidden field, or instead of submitting in the change event, you can use button type="submit" and trigger a button click in the mobiscroll's onSelect.
E.g. (for the "clocklater"):
$(function(){
$('#clocklater').mobiscroll().time({
theme: 'default',
display: 'modal',
mode: 'scroller',
setText: "Save",
cancelText: "Cancel",
headerText: "Available after",
timeFormat: 'HHii',
timeWheels: 'HHii',
stepMinute:10,
onSelect: function () {
submit = true;
$('[name=available]').val(2);
$('#later').click();
}
});
var submit;
$('#later').click(function(){
if (!submit) {
$('#clocklater').mobiscroll('show');
return false;
}
submit = false;
});
});
HTML changes:
<input name="clocklater" id="clocklater" class="i-txt" type='hidden' />
<div class='later button'>
<input id='later' name='available' type='submit' alt="later" value="later" />
</div>

using a JS blur to bring focus to a div

Sorry I'm just getting into JS functions but we have a search box on our page and when the call is made (i think its using ajax) it populates the search data into the div. We used to use jquery live search.
Within the search query we have a number of link which have a class, this class relates to a jquery modal. The older version used to work using a blur function. I am trying to port the functionality over to the new search.
What we used to have...
The jquery search:
<form method="post" action="<? echo constructurl($platform_name,"https") ?>/process/feedbackcreateuser" enctype="multipart/form-data" class="form-right">
<input name="q" type="text" placeholder="Enter your idea or feedback ... " name="title..." style="width:100%; " value="<? echo $captchamessage ?>">
<div id="jquery-live-search" style="display:none;"></div>
<script src="<? echo $asset_url ?>/3rdparty/feedback/jquery.liveSearch.js"></script>
<script>
jQuery('input[name="q"]').liveSearch({url: '<? echo constructurl($platform_name,"https")?>/process/searchfeedbackuser/?c=<? echo $id ?>&q='});
</script>
</form>
The JS that made it work:
<script type="text/javascript"> <!-- this allows search results to have same js functions -->
$(document).ready(function() {
$("input[name='q']").blur(function() {
$("div#jquery-live-search [rel='clickover']").clickover({ html : true} );
$("div#jquery-live-search input, div#jquery-live-search textarea").placeholder();
$("div#jquery-live-search .dialog-iframe-card").dialog2IFrame( {
height:900,
closeOnOverlayClick: true,
closeOnEscape: true,
removeOnClose: true,
showCloseHandle: true,
});
$("div#jquery-live-search .dialog-iframe-report").dialog2IFrame( {
height:900,
closeOnOverlayClick: false,
closeOnEscape: true,
removeOnClose: true,
showCloseHandle: true,
});
});
});
</script>
What we have now ...
the JS search (not jQuery anymore)
<script type="text/javascript">
$(document).ready(function() {
$('#form form').submit(function(){
$('#content').load('<? echo constructurl($platform_name,"https")?>/process/searchfeedback/?c=<? echo $id ?>', { 'q': $('input[name="query"]').val()}).slideDown('500')
return false;
});
});
$(function(){
$('form').each(function () {
var thisform = $(this);
thisform.prepend(thisform.find('button.default').clone().css({
position: 'absolute',
left: '-999px',
top: '-999px',
height: 0,
width: 0
}));
});
});
</script>
<div id="form">
<form class="form">
<div class="input-group" style="margin-bottom:10px">
<input type="text" name="query" placeholder="Enter your idea or feedback ... " class="feedback-search validate[required] form-control search-main" >
<span class="input-group-btn">
<input type="submit" name="submit" value="Go!" class="btn btn-search">
</span>
</div>
</div></form>
<form method="post" action="<? echo constructurl($platform_name,"https") ?>/process/feedbackcreate" enctype="multipart/form-data" class="form" class="form-right">
</form>
<div id="content">
</div>
I have been trying something similar with no luck.
<script type="text/javascript"> <!-- this allows search results to have same js functions -->
$(document).ready(function() {
$("#form").blur(function() {
$("div#content [rel='clickover']").clickover({ html : true} );
$("div#content input, div#jquery-live-search textarea").placeholder();
$("div#content .dialog-iframe-card").dialog2IFrame( {
height:900,
closeOnOverlayClick: true,
closeOnEscape: true,
removeOnClose: true,
showCloseHandle: true,
});
$("div#content .dialog-iframe-report").dialog2IFrame( {
height:900,
closeOnOverlayClick: false,
closeOnEscape: true,
removeOnClose: true,
showCloseHandle: true,
});
});
});
</script>
You HTML has problems:
It doesn't appear that you have closed out your <form class="form"> tag at all before beginning a new one. So you have nested forms and that can't happen, so you should fix that first, since $('form').each(function () { isn't gonna do anything for you most likely. Not entirely sure why you would prepend a cloned button into the form with a width=0 and height=0 and no where on the page. Kinda seems awkward doing that. Why not use the same button to begin with? Why make a clone of it?
Also, you haven't added a semi-colon at the end of this line here:
$('#content').load('<? echo constructurl($platform_name,"https")?>/process/searchfeedback/?c=<? echo $id ?>', { 'q': $('input[name="query"]').val()}).slideDown('500')
which will give a syntax error.
You should turn javascript error reporting on in your browser to be able to see all of your jQuery/javascript errors and correct these errors one by one. After you do that, it might even fix itself.
Also, be sure to load jQuery, since you are still using it in your coding... Here's a good CDN for jQuery to use:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
I couldn't figure this one out so I just popped the working JS call into the dynamic content's page, and it worked!

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");
});

Append Jquery plugin to document

I am using a plugin called minicolors for jquery link. I am trying to appened a color picker here (in 2 places, a div and table just for testing) with a button click, it seems though that it only works on the second button click, the first simply returning an empty input box.
<script type="text/javascript">
function addPicker() {
$(document).ready( function() {
$(".colorpick").miniColors({
change: function(hex, rgb) {
}
});
});
var picker = "<input type= 'text' class='colorpick' size='6' autocomplete='on' maxlength='10' value='' />";
$("#datatable > tbody").append("<tr><td>"+picker+"</td></tr>");
$("#testdiv").append(picker);
}
</script>
<div id="testdiv"></div>
<button onclick =" addPicker();">Button</button>
No Idea why this is not working.
Try :
$(document).ready( function() {
$('.addButton').click(function(){
$("<input type= 'text' class='colorpick' size='6' autocomplete='on' maxlength='10' value='' />").appendTo("#datatable tbody").wrap('<tr><td></td></tr>');
$('.colorpick').miniColors();
});
});​
Live demo : http://jsfiddle.net/hCVpX/12/

Categories