OK, I've been struggling with trying to pass parameters from the page to the popup div (within the same page) using jquery mobile. I'd just like to be able to edit or items from the database within a popup.
Here's the array of items I'm trying to update:
<div class="ui-block-c">
<?php
$fam_mem = $_db->rows('SELECT * from family_member', array());
foreach($fam_mem as $f)
{
echo "<a href='?id=$f[member_ID]#edit_fam_mem' data-mini='true' data-theme='d' data-inline='true' data-role='button' data-rel='popup' data-position-to='window' data-transition='pop' data-icon='gear' data-iconpos='notext'>Edit</a>";
echo "<a href='?id=$f[member_ID]#delete_fam_mem' data-mini='true' data-theme='d' data-inline='true' data-role='button' data-rel='popup' data-position-to='window' data-transition='pop' data-icon='delete' data-iconpos='notext'>Delete</a>";
}
?>
</div> <!--End ui-block-c-->
Here's the code for the popup div:
<div data-role="popup" id="delete_fam_mem" data-theme="d" data-overlay-theme="b" class="ui-content" style="max-width:340px;">
<?php //include_once("./delete_fam_mem.php");?>
<h3>Delete Family Member</h3>
<?php
echo "id is ", $_GET[id]; exit;
$del = $_db->query("DELETE FROM family_member WHERE member_ID = ", array($_GET[id]));
if ( $del )
echo "Chore $_GET[title] deleted successfully.";
else "Could not be deleted, maybe you should go to counseling.";
?>
<button class="button" onclick='closefancy()'>OK!</button>
</div> <!--End Delete Family Member-->
Some reason it will not pass the id from the page to popup. Any help would be greatly appreciated! Thanks!
just submitted a proposal which suggests how one could take parameters from the opener-button into the popups beforeposition event, see https://github.com/jquery/jquery-mobile/issues/7136
Put in your tag id property. Like 'id'.
And put one element to recive the value in your page. Like:
<input type="hidden" name="recivedId" />
So you can do something like that using jquery:
$('#a').on('click',function(){
$('#recivedId').val($(this).attr('href'));
})
Related
I have a query that returns a row of values
<?php
$chapter_title = $story_data['chapter_title'];
and i have an href link that shows a modal when clicked
echo "<a href='#deleteModal' name='$chapter_title' >delete chapter</a>";
which shows
echo "<div id='deleteModal' class='modalDialog'>
<div>
<h3>Delete Chapter Confirmation </h3><h3 style = 'color:red'> $chapter_title</h3><hr>
<div style='display:inline-block;width:auto%'>
<text>You are about to delete this chapter. <br />It cannot be restored at a later time! <br />Do you still want to continue?</text>
<br><br>
<div id='create_btn'><a href=''>Delete</a></div>
<div id='cancel_btn'><a href=''>Cancel</a></div>
<br><br>
</div>
</div>
</div>";
?>
but i am having a problem in displaying the correct $chapter_title. Even when i click the delete button of the second row, it still shows the title of the first row. Please help me on what to do.
Instead of
<h3 style = 'color:red'> $chapter_title</h3>
Try echoing the content
<h3 style = 'color:red'><?php echo $chapter_title; ?></h3>
Correction
<a href='#deleteModal' name='<?php echo $chapter_title; ?>' >delete chapter</a>
I have a div that includes shoutbox posts. I'm using jQuery and ajax to change the pages within the div. However, when the page changes, it loses the link to the javascript file so that the next time I try to change the page it actually continues with the link action instead of doing the ajax in the background. Then after that it's back to normal and it alternates back and forth between being linked to the file and not.
Also before, it was rendering the whole page so that my layout was being displayed on the refresh instead of just the shoutbox posts. I'm guessing that finally getting it to refresh without re displaying the whole layout again is what's causing it to lose the connection to the javascript file.
This is the code for the posts. The shoutbox_arrows contains the links to change the page. refresh_me is what I'm loading into my div to refresh the content.
<div id="shoutbox_arrows">
<?php $current_page=s tr_replace( '?', '#', getURI(fullURL())); ?>
<ul class="no_dots">
<li id="first_page"><<
</li>
<li id="previous_page"><
</li>
<li><strong>Pg#<?php if ($page > $last_page) {echo $last_page;} else {echo $_SESSION['shoutbox_page'];} ?></strong>
</li>
<li id="next_page">>
</li>
<li id="last_page">>>
</li>
</ul>
</div>
<div id="shoutbox" class="custom_scrollbar">
<div id="refresh_me">
<?php if (sizeof($shouts)==0 ) { ?>
<p>There are no posts.</p>
<?php } foreach ($shouts as $shout) { foreach ($shout as $k=>$v) { $shout[$k] = utf8_encode($v); if ($k == 'guest') { $shout[$k] = ucwords($v); } } ?>
<div class="post_info">
<div class="left">
<?php if ($shout[ 'user_id']==n ull) {echo $shout[ 'guest'];} else { ?><?php echo ucwords(userinfo($shout['user_id'])->username); ?>
<?php } ?>
</div>
<div class="right">
<?php time_format($shout[ 'created_at']); ?>
</div>
</div>
<p class="post_comment" id="shoutbox_comment_<?php echo $shout['id']; ?>">
<?php echo $shout[ 'comment']; ?>
</p>
<?php if (!$shout[ 'last_edited_by']==n ull) { ?>
<p class="last_edited">Edited by
<?php echo ucwords(userinfo($shout[ 'last_edited_by'])->username); ?>
<?php time_prefix($shout[ 'updated_at']); ?>
<?php time_format($shout[ 'updated_at']); ?>.</p>
<?php } ?>
<?php if (current_user()) { if (current_user()->user_id == $shout['user_id'] or current_user()->is_mod) { ?>
<p class="post_edit"> <span class="edit" id="<?php echo $page; ?>">
<a id="<?php echo $shout['id']; ?>" href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
edit
</a>
</span> | <span class="delete" id="<?php echo $page; ?>">
<a href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
delete
</a>
</span>
<span class="hide" id="<?php echo $page; ?>">
<?php if (current_user()->is_mod) { ?> | <a href="<?php $post_to = '?id=' . $shout['id']. '&uid=' . $shout['user_id']; echo $post_to; ?>">
hide
</a><?php } ?>
</span>
</p>
<?php }} ?>
<?php } ?>
</div>
</div>
This is the page that my ajax request is going to.
<?php
if (isset($data['page'])) {
$_SESSION['shoutbox_page'] = intval($data['page']);
}
$redirect = ltrim(str_replace('#', '?', $data['redirect']), '/');
redirect_to($redirect);
Div that contains the content to be refreshed.
<div id="shoutbox_container">
<?php relativeInclude( 'views/shoutbox/shoutbox'); ?>
</div>
jQuery
$('#shoutbox_arrows ul li a').click(function (event) {
event.preventDefault();
$.post('views/shoutbox/' + $(this).attr('href'), function (data) {
$('#refresh_me').load(location.href + " #refresh_me>", "");
$('#shoutbox_arrows').load(location.href + " #shoutbox_arrows>", "");
});
});
So I guess to clarify the issue:
The shoutbox_container displays posts for the shoutbox. The page is controller by a session that gets passed as a variable to get the correct chunk of posts to show. Clicking on the links in shoutbox_arrows sends an ajax request to a page which changes the session variable. The div that contains the post itself (refresh_me) as well as the arrows (for the links) get refreshed. After changing the page once, the shoutbox is no longer connected to the javascript file so when you click to change the page again, instead of an ajax request, the page itself actually changes to the link.
Any ideas how I can fix this? I've spent a lot of time on this and it's getting rather frustrating. I feel like I could just settle for it as it is now but it's bugging me too much that it's not working exactly how I intend (although generally it works in terms of changing the pages).
Also just a note, I used jsfiddle to tidy up the code but it looks like it did some funky stuff (looking just at $current_page=s tr_replace). lol. So there aren't any syntax errors if that's what you're thinking. ><
Also I was going to set up a fiddle but I don't really know how to handle links in it so it would have been useless.
The issue is that you bind the click handler to the a tags on document ready (the jQuery code you provided). So when you replace the content of #shoutbox_arrows you remove the click handler you previously attached since those original handlers are removed from the DOM along with the original elements.
You need to use the jQuery .on() method and event bubbling. This will attach the handler on a parent element that will not be removed in your content replace and can continue to "watch" for the event to bubble up from it children elements.
Try replacing your jQuery code with this:
$('#shoutbox_arrows').on('click', 'ul li a', function (event) {
event.preventDefault();
$.post('views/shoutbox/' + $(this).attr('href'), function (data) {
$('#refresh_me').load(location.href + " #refresh_me>", "");
$('#shoutbox_arrows').load(location.href + " #shoutbox_arrows>", "");
});
});
For performance, you should add a class to the a, and targeting it directly with $('a.aClass')
Good ways to improve jQuery selector performance?
I have this While loop in my php code where I echo rows inside one div that acts like a button and when I press that "button" I want to hide/show the connected div with the jQuery function "toggle". I only get it to work so that when I click any of the "buttons" it opens all divs and not just that one that's connected.
<script>
$(document).ready(function(){
$(".scorec").click(function(){
$(".scorematcho").slideToggle('slow');
});
});
</script>
That's the jQuery I'm using at the moment.
<?php $RM = mysql_query("SELECT * FROM score ORDER BY ScoreID DESC LIMIT 3");
while ($ScoreD = mysql_fetch_assoc($RM)) {
$a = $ScoreD["ScoreOne"]; $b = $ScoreD["ScoreTwo"];?>
<div class="scorec" >
<?php if($a>$b){;?><font color="green"><?php }else{?><font color="red"><?php }?>
<div class="scorel"><img src="flags/<?php echo $ScoreD["FlagOne"]; ?>.png" style="float:left;">
<?php echo $ScoreD["TeamOne"]; ?> | <?php echo $ScoreD["ScoreOne"]; ?></div>
<div class="scorem">-</div>
<div class="scorer"><?php echo $ScoreD["ScoreTwo"]; ?> | <?php echo $ScoreD["TeamTwo"]; ?>
<img src="flags/<?php echo $ScoreD["FlagTwo"]; ?>.png" style="float:right;"></div></font>
</div>
<div class="scorematcho" >
<div class="scorematch">
de_dust2
16-2
</div>
<div class="scorematch">
de_nuke
16-2
</div>
<div class="scorematch">
de_dust
16-2
</div>
</div>
<?PHP } session_destroy()?>
That's the HTML/PHP I'm using. The div "scorec" is the "button" and "scorematcho" is the div I wan't to toggle.The text inside "scorematcho" shall be PHP also, just haven't changed it yet. I have searched and tested some things but can't get anything to work properly, I have noticed that some put all their PHP code inside an "echo", why is that and could that be the problem? Hope that's enough information, please tell if not. Also, if you have some other improvements you think I should make to the code, please tell.
I have added this jfiddle Hope it helps!! http://jsfiddle.net/H77yf/
$(".scorec").click(function(){
$(this).next().slideToggle('slow');
});
This is my first serious foray into javascript/ajax.
Overview:
I have an index page listing multiple records, each on different rows. For each record I have a link which pops open a small javascript window which contains a symfony form. All goes well, with the exception that I can't figure out how to pass the popup javascript the object Id of each record. Here's what I have:
Starting with the Action:
public function executeTrackReferrals(sfWebRequest $request){
$userId = $this->getUser()->getId();
$this->pager = new sfDoctrinePager('referral', sfConfig::get('app_pager'));
$this->pager->setQuery(Doctrine_Core::getTable('Referral_submissions')->getUsersSubmissions($userId));
$this->pager->setPage($request->getParameter('page', 1));
$this->pager->init();}
Main index page:
<?php
include_partial('<a bunch of other includes >');
include_partial('referral/rtsIndex', array('pager' => $pager));
?>
_rtsIndex partial:
<table>
<?php foreach ($pager->getResults() as $r => $referral): ?>
<?php
$referralObject = Doctrine_Core::getTable('referral')->getReferralObjectById($referral->getId());
$submissionObject = Doctrine_Core::getTable('referral_submissions')->getObjectByReferralId($referralObject->getId());
?>
<TR VALIGN=TOP>
<td WIDTH=10% ALIGN="center" class="_7">
<P ALIGN=CENTER>
<script type='text/javascript'>
$('.popup_changestatus').click(function(){
// put the row id into the hidden field in the popup
var rowId = $(this).parent().find('span.row_id').html();
$('test').val(rowId);
fg_popup_form("fg_formContainer","fg_form_InnerContainer","fg_backgroundpopup");
return false;
});
</script>
<a href="#" class="popup_changestatus">
<?php echo utilities::getStatusCode($submissionObject->getCandidateStatus()); ?>
</a>
<span class="row_id" style="display: none">
<?php echo $referral->getId() ?>
</span>
</P>
</td>
</TR>
</table>
the Javascript popup form code mentioned above, includes this line:
<?php include_partial('referral/changeStatusCodeForm'); ?>
The above line renders the actual symfony form:
_changeStatusCodeForm partial:
<?php
$object = new referral_submissionsForm(<this is where I need to pass an ID for each popup form>);
echo $object;
?>
Can anyone steer me in the right direction?
If interested in the actual javascript code, it's a pretty nifty open source popup:
http://www.html-form-guide.com/contact-form/simple-modal-popup-contact-form.html
EDIT:
Here is the contents of contactform-code.php:
<script type='text/javascript' src='/project/misc/simple-popup-form-1/scripts/gen_validatorv31.js'></script>
<script type='text/javascript' src='/project/misc/simple-popup-form-1/scripts/fg_ajax.js'></script>
<script type='text/javascript' src='/project/misc/simple-popup-form-1/scripts/fg_moveable_popup.js'></script>
<script type='text/javascript' src='/project/misc/simple-popup-form-1/scripts/fg_form_submitter.js'></script>
<div id='fg_formContainer'>
<div id="fg_container_header">
<div id="fg_box_Title">Change Status</div>
<div id="fg_box_Close">Close(X)</div>
</div>
<div id="fg_form_InnerContainer">
<form id='contactus' action='javascript:fg_submit_form()' method='post' accept-charset='UTF-8'>
<input type='hidden' name='submitted' id='submitted' value='1'/>
<input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/>
<input type='text' class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' />
<div class='short_explanation'>* required fields</div>
<div id='fg_server_errors' class='error'></div>
<div class='container'>
<?php
// $form = new referral_submissionsForm();
include_partial('referral/changeStatusCodeForm');
?>
</form>
</div>
</div>
First, you shouldn't directly use Doctrine_Core into your model. The best way here, is to make a leftJoin on your 2 tables when you pass the query to the pager. Then, in your template, you just fetch the relation (like $object->getRelation()).
Regarding to your problem, you should pass the ID when building the <div id='fg_formContainer'> since it's the content of your popup. The part come from this file: contactform-code.php.
Show us where do you build this div and you will have the place where you have to pass the id.
Edit:
Well, I finally get your problem. You have one popup define on your page that can be called on each click from each row. And you want to know how to pass the row id to the global popup.
This can be done in javascript. Instead of :
<a href='javascript:fg_popup_form("fg_formContainer","fg_form_InnerContainer","fg_backgroundpopup" );'>
<?php echo utilities::getStatusCode($submissionObject->getCandidateStatus()); ?>
</a>
You can better use :
<a href="#" class="popup_contact">
<?php echo utilities::getStatusCode($submissionObject->getCandidateStatus()); ?>
</a>
<!-- use this hidden span to put the row id, to be able to retrieve it using jQuery -->
<span class="row_id" style="display: none">
<?php echo $referral->getId() ?>
</span>
And then, define an action using jQuery (for example):
$('.popup_contact').click(function() {
// put the row id into the hidden field in the popup
var rowId = $(this).parent().find('span.row_id').html();
$('#submitted').val(rowId);
fg_popup_form("fg_formContainer", "fg_form_InnerContainer", "fg_backgroundpopup");
return false;
})
I know to link to a part in the same page like :
<a href='#A'>A</a>
<a name='A'>Here is A</a>
But when I designed it with jquery and php, ı have a problem. My design is like :
There are all letters of alphabet. Under the letters, there are there are divs (item_A,item_B,item_c etc...). When the user click K letter for example, page will link to #K div and also #K div display its content.(Because when the site open first, item divs' display are none). But the problem is, although #K (K is just example) K is displayed its content, page did not redirect to #K div. You must scroll by yourself.
Here is the code :
<div class="content_letters">
<ul>
<?php $array_letter = array("A","B","C","Ç","D","E","F","G","H","I","İ",
"J","K","L","M","N","O","P","R","S","Ş","T",
"U","Ü","V","Y","Z");
for ($i=0;$i<27;$i++) {
echo "<li><a id='letter_{$array_letter[$i]}'
href='#letter_{$array_letter[$i]}'>{$array_letter[$i]} | </a></li>";
}
?>
</ul>
</div>
<?php
for ($i=0;$i<27;$i++) {
?>
<div class="content_letter_block">
<div class="text">
<div class="show_hide">
<a class="button" id="
<?php echo 'button_letter_'.$array_letter[$i]; ?>">SHOW/HIDE</a>
</div>
<a name="<?php echo "letter_".$array_letter[$i].'">';?>
<?php echo $array_letter[$i]; ?></a> starts from here</div>
</div>
</div>
<?php } ?>
<div style='display:none' id='<?php echo "item_".$array_letter[$i];?>'>
Here is item...
</div>
Here is the jquery code :
$(document).ready(function() {
// target everything with IDs that start with 'button_letter'
$("[id^='button_letter']").click(function () {
// split the letter out of the ID
// of the clicked element and use it to target
// the correct div
$("#item_" + this.id.split("_")[1]).toggle();
});
$("[id^='letter']").click(function () {
$("#item_" + this.id.split("_")[1]).show();
});
});
Don't have the time to see all your code, but can't use a scrollTop() method ?
See here.
To scroll with jQuery to a specific ID in your page, use
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
You can specify an anchor in your url as well.
<a href="your-page.html#k" />
When you click the link you will be taken to that page and the document will scroll automatically to the position of <a name="k">