I'm opening a simple modal and making an Ajax call with the following function.
function TransactionModal($id, $s) {
jQuery("#dialog").load("/chat/rejoin", { 'id': +$id, 's': +$s }, function()
{
jQuery("#dialog").modal({
overlay:80,
autoResize:false,
containerCss: {width: "490px", height: "538px"},
overlayCss: {backgroundColor:"#000"}
});
});
}
Because I have some Javascript running in the page I want to load, I need to use iframes, so the rejoin page has the following in it.
<IFRAME SRC="/chat/join/id/<?php echo $id; ?>/cid/<?php echo $cid;?>" width="500" height="535">
<!-- Alternate content for non-supporting browsers -->
Upgrade Browser to support iframes
</IFRAME>
That all works great.
The problem that I'm having is that when I click on the close button, it is resubmitting form data.
I have no idea why but it's driving me nuts.
If I refresh the page the modal goes away and doesn't resubmit.
If I click the X image to close it it does resubmit.
Please help if you have any idea why it's doing this!
function rejoinModal($id) {
var src = '/chat/join/id/'+$id ;
jQuery.modal('<iframe src="' + src + '" height="555" width="510" style="border:0">', {
containerCss:{
backgroundColor:"#000",
height:555,
width:510,
overFlow: "hidden",
},
});
}
i solved it by not calling the iframe from withing the ajax call.
it is working now.
Related
After clicking an element on my webpage, I get the expected behavior from Response.Redirect in the trace, the break point on the expected page gets hit and proceeds to process normally. However when I'd expect the new page to be loaded, the display in the browser is not changed. It looks and behaves like the click brought you back to the same page.
I've moved the redirect call out of a try-catch block, and have tried different combinations of true/false as the second parameter with HttpContext...CompleteRequest()
What might prevent a page from being loaded after a call from Response.Redirect and the Page_Load sub completes?
Edit:
The site uses css and javascript to create a hoverable dropdown menu containing self referencing links, see below. I have tried using Chrome's dev tools to see what the network was processing. As far as I can tell from reading the Network Tab the click was creating the correct call; status 200, type xhr. xhr was the only thing that I found odd, but it looks like this is simply a reference to ajax? This leaves me in the same position. I am telling the site to redirect to new url, and I see the network take a request for that url, but the url in the address bar doesn't change; not the displayed page.
$(document).on('click','.navigation', function () {
loadItems($(this).attr('id'), $(this).attr('itemName'));
return false;
}
);
var loadItems = function (id, itemName) {
var editInfor =
{
"method": "getChildItems",
"id": id
};
$.ajax
(
{
type: "POST",
url: $.url,
dataType: "json",
data: JSON.stringify(editInfor),
success: function (jsonReply) {
$("#chkEnabled").attr('checked', jsonReply.enabled)
if (jsonReply.method == 'getChildItems') {
$("#childrens").html('');
var html = '<table>'
if (jsonReply.successfull) {
$.each(jsonReply.children, function (i, item) {
html += '<tr><td><span class="children">' + item.text + '</span></td><td><a class="moveItemUp btn" href="#" id="moveItemUp' + item.id + '">Move Up <i class="icon-circle-arrow-up"></i></a> <a class="moveItemDown btn" href="#" id="moveItemDown' + item.id + '">Move Down <i class="icon-circle-arrow-down"></i></a></td><td>Remove</td></tr>'
});
}
html += '</table>'
$($.childrens).html(html);
}
}
}
);
Please try this:
$.mobile.changePage( "/Exmaple.aspx", {
transition: "pop"
});
I know that InfiniteScroll and Masonry work well together. But I am using the Infinite Scroll Extension of Yii (called yiinfinite-scroll) and tried to apply Masonry on it. Infinite Scroll for itself works perfectly, Masonry for itself too. But after InfiniteScroll tries to load a new set of images (I've got an image page), the callback part of InfiniteScroll doesn't seem to fire, because the newly appended elements don't have any masonry code in it and appear behind the first visible items. (I know that this bug is reported often, but the solutions I found so far didn't work for me).
My structure for showing the picture looks like this:
<div class="items">
<div class="pic">...</pic>
<div class="pic">...</pic>
...
</div>
The first page load looks like this
<div class="items masonry" style="...">
<div class="pic masonry-brick" ...></div>
<div class="pic masonry-brick" ...></div>
...
</div> // everything's fine, masonry is injected into the code
After infinite scroll dynamically loads new images these look like this:
<div class="items masonry" ...></div>
<div class="pic masonry-brick" ...></div>
...
// appended pics:
<div class="pic"></div>
<div class="pic"></div>
</div> // so no masonry functionality was applied
My Masonry Code:
$(function (){
var $container = $('.items');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.pic',
columnWidth: 405
});
});
});
$container.infinitescroll({
// normally, the options are found here. but as I use infinitescroll as a Yii extension, the plugin is already initiated with options
}
},
// trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
});
});
I also tried to copy and replace the current InfiniteScroll-min.js file in the extension folder by the newest one. Same effect...
Best regards,
Sebastian
Okay I found a solution. I post it here if somebody else has the same issue:
I just modified the YiinfiniteScroller Class from the Yiinfinite Scroll Yii Extension and added the callback part for Infinite Scroll which was missing:
private function createInfiniteScrollScript() {
Yii::app()->clientScript->registerScript(
uniqid(),
"$('{$this->contentSelector}').infinitescroll(".$this->buildInifiniteScrollOptions().", ".$this->callback.");"
);
}
At the beginning of the class I added the line
public $callback;
to use it later in the method.
Then you can call the Widget with an additional option callback, for example like this:
'callback' => 'function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now theyre ready
$newElems.animate({ opacity: 1 });
$(".items").masonry( "appended", $newElems, true );
});
}',
Works like charm.
So I am using the Disqus Plugin v2.65. I am trying to edit the dsq-global-toolbar at the top of the Disqus comments.
The following tags are in disqus-comment-system/comments.php
<div id="disqus_thread">
<?php if (!get_option('disqus_disable_ssr')): ?>
<?php
// if (is_file(TEMPLATEPATH . '/comments.php')) {
// include(TEMPLATEPATH . '/comments.php');
// }
?>
<div id="dsq-content">
<ul id="dsq-comments">
however on my site there are mulitple tags (the disqus-global-toolbar div) that seem to be dynamically appended between the dsq-content div and the dsq-comments ul. Where is this coming from and where can I edit this? Any help would be greatly appreciated.
I think it is coming somewhere around line 3140 in disqus.js
You can use this code to wait for the document to finish loading completely then do your changes (client side):
$(document).ready(function() {
window.disqus_no_style = true;
$.getScript('http://sitename.disqus.com/embed.js', function() {
var loader = setInterval(function() {
if($('#disqus_thread').html().length) {
clearInterval(loader);
disqusReady();
}
}, 1000);
});
function disqusReady() {
//whatever you can imagine
}
});
window.diqus_no_style can be deleted as well as the $.getsript wrapper.
Is that what you are looking for?
Something like this (use livequery instead of live):
function disqusReady() {
$('#dsq-global-toolbar').livequery(function() {
//$(this) will refer to object
});
}
Not sure what plug-in you're talking about, but if it's WordPress, I've done the same thing. Modify wp-content/plug-ins/disqus-comment-system/comments.php by adding an event handler for 'afterRender' (fires when the content ready in the DOM, but still hidden), eg. around line 70:
config.callbacks.afterRender.push(myFunctionToModifyDisqusOutput);
I made a custom basic lightbox with Dojo to be used with forms and data. Not really dealing with images or such.
The problem that I seem to be facing is this. When Dojo makes a call via AJAX to ajaxtb.php with specific code for example; ?f=login or ?f=register the page is loaded. When you I close the lightbox and try to view something different say ?f=stuff the lightbox will show what ever was before it be it ?f=login or what ever, it will show it until ?f=stuff is fully loaded.
Here is the code for the lightbox, also can some one tell me how to optimize it since its pretty redundant at the moment and very basic.
dojo.ready(function(){
#loads logout confirmation
dojo.query("#jsLogoutPromp").connect("onclick", function(){
dojo.byId("qpbox-title-text").innerHTML = "Logout Confirmation";
dojo.query("#qpbox-content").style("display", "block");
dojo.query("#qpbox-overlay").style("display", "block");
dojo.xhrGet({
url: "ajaxtb.php?f=logout",
load: function(newContent) {
dojo.byId("utm").innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});
});
#loads options to upload profile photo
dojo.query("#jsUserPhotoPromp").connect("onclick", function(){
dojo.byId("qpbox-title-text").innerHTML = "Upload Photo";
dojo.query("#qpbox-content").style("display", "block");
dojo.query("#qpbox-overlay").style("display", "block");
dojo.xhrGet({
url: "ajaxtb.php?f=display_pic",
load: function(newContent) {
dojo.byId("utm").innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});
});
#closes everything when clicked well technically hides everything
dojo.query("#qpbox-close").connect("onclick", function(){
dojo.query("#qpbox-content").style("display", "none");
dojo.query("#qpbox-overlay").style("display", "none");
});
#shows up for logout only, same as above code, but does not work since the original id is included in ajax.php?f=logout
dojo.query("#qpbox-stay").connect("onclick", function(){
dojo.query("#qpbox-content").style("display", "none");
dojo.query("#qpbox-overlay").style("display", "none");
});
});
The functions responsible for closing everything is qpbox-close and qpbox-stay. Technically both only hide the lightbox not close. The other problem is with qpbox-stay. qpbox-stay id is located in ajax.php?f=logout and when clicked it does not close the lightbox so not sure whats the problem with it.
here is the code for ajax.php
if($_GET['f'] == 'logout') {
echo '
<p>Are you sure you want to exit right now?</p>
<br>
<button type="submit">Logout</button> No, I wana Stay
';
}
Thanks
You can use dojo.empty(dojo.byId('utm')) before showing the lightbox to delete all the contents.
Also, you can refactor your code quite a bit. Both click handlers do basically the same thing. So why not refactor them in a function?
dojo.ready(function() {
function showLightBox(title, url) {
var utm = dojo.byId('utm');
dojo.empty(utm);
dojo.byId("qpbox-title-text").innerHTML = title;
dojo.style(dojo.byId("qpbox-content"), "display", "block");
dojo.style(dojo.byId("qpbox-overlay"), "display", "block");
dojo.xhrGet({
url: url,
load: function(newContent) {
utm.innerHTML = newContent;
},
// The error handler
error: function() {
// Do nothing -- keep old content there
}
});
}
function hideLightBox() {
dojo.style(dojo.byId("qpbox-content"), "display", "none");
dojo.style(dojo.byId("qpbox-overlay"), "display", "none");
}
dojo.connect(dojo.byId('jsLogoutPromp'), 'onclick', function() {
showLightBox("Logout Confirmation", "ajaxtb.php?f=logout");
});
// ...
dojo.connect(dojo.byId('qpbox-close'), 'onclick', hideLightBox);
});
You can try and connect to #qpbox-stay after you've loaded the content, or if using Dojo 1.6, you can use NodeList.delegate like:
dojo.require('dojox.NodeList.delegate');
dojo.query('#utm').delegate('#qpbox-stay', 'onclick', hideLightBox);
That will connect to #utm which is already loaded, but work for #qpbox-stay only. It works with event bubbling, similar to jquery.live(). See http://davidwalsh.name/delegate-event
I'm using jCaptcha (http://jcaptcha.sourceforge.net/) on our website. The problem is sometimes it's very difficult to read the image. So, we are planning to provide a button named 'REFRESH' next to the jcaptcha image and upon clicking REFRESH button, it has to refresh only the jcaptcha image not the entire page/portlet. How can we do that?
This is how I solved it using JQuery, it will replace the image. The alert() is just there to show off the new filename and can of course be removed. The code is using the jquery plugin in grails but shows what to do in jquery to refresh the image.
<div>
<jcaptcha:jpeg name="captchaImage"/>
Refresh captcha
<jq:jquery>
$("#refreshCaptcha").click(function() {
$("#captchaImage").fadeOut(500, function() {
var captchaURL = $("#captchaImage").attr("src");
captchaURL = captchaURL.replace(captchaURL.substring(captchaURL.indexOf("=")+1, captchaURL.length), Math.floor(Math.random()*9999999999));
alert(captchaURL);
$("#captchaImage").attr("src", captchaURL);
});
$("#captchaImage").fadeIn(300);
});
</jq:jquery>
</div>
Make this changes in JSP :
<img src="jcaptcha" id="captcha_image"/> Refresh
Add the Javascript function like :
function reloadCaptcha(){
var d = new Date();
$("#captcha_image").attr("src", "jcaptcha?"+d.getTime());
}
You would have to load the image and the refresh button into . Than you should be able to refresh just the iframe. But the I don't know how you are performing your validation so.
Set an id for the img tag and let it call a javascript function:
<img src="jcaptcha.jpg" id="captchaImage"/>
javascript function:
<script type="text/javascript">
function refresh()
{
var captchaImage=document.getElementById("captchaImage");
captchaImage.src="jcaptcha.jpg";
}
</script>
this works fine because i implemented this one in my project just create one button on clicking that button it will come to below menctiond block of code like that you do
<script type="text/javascript">
function refresh()
{
var image=document.getElementById("kaptchaImage");
image.src="<%=request.getContextPath()%>/kaptcha.jpg?"+Math.floor(Math.random()*100)
}
</script>