I'm using jQtouch to build a page where the user can enter a kind of an ID and
get information (exam result) for this ID.
Because I take the results from the server, I used a form in the first page
with a text field and a submit button, and the action of this form send the user to the next page. Or at least, supposed to...
The problem is that also I'm being transferred to page with the results, and see the results properly, the Back button do nothing! BTW, in the address bar (above) I still see the name of the first page.
How can I go back to the "form" page? Thanks
<div class="current" id="byUserId">
<div class="toolbar">
<a class="back" id="goBack" > Back</a>
<h1> Exam Results</h1>
</div> ...
where the id="goBack" has a javascript:
$(function() {
$('#goBack').click(function() {
location.href = "enterId.jsp";
});
});
Using the regular back doesn;t work either:
<a class="back" href="#"> Back</a>
I now this is pretty late, but I had a similar frustrations and finally figured it out. The problem is that jQTouch intercepts all AJAX and form submit commands and safely send them itself. This isn't a problem except for when it's expecting some sort of callback, and there isn't one. In my case, I wanted to submit a form without a callback. To do this, look in the jqtouch.js library (around line 434) and comment out the following line:
if (href != '#') {
$.ajax({
url: href,
data: settings.data,
type: settings.method,
success: function (data) {
**// var firstPage = insertPages(data, settings.animation);**
This basically just tells jQTouch to submit the AJAX call but do nothing afterwards (don't change div's, don't show any callbacks and don't do any animations). Hope this helps.
Related
I am using the following code to automatically have one checkbox in a list of many prefilled when a button is clicked in a product page for more information.
This code is taken from a previously solved question, but it does not work for me. What am I doing wrong?
PAGE A (button)
More Information
PAGE B
$(document).ready(function(){
var hash = location.hash; //
f(hash=="#myHash"){
("#checkbox1").prop("checked", !$("#checkbox1").prop("checked") );
}
});
<input type="checkbox" id="checkbox1" name="boxset" value="XXXX">
Also PAGE A is a Wordpress page which automatically reverses the href for some reason.
<a id="select-checkbox1" href="pageB.html#myHash">More Information</a>
I have tried this in two other websites with the same problem. It obviously does not like the format.
I would appreciate some help with this.
I have a delegated popup that is designed to display a modal on tablets and phones. Unfortunately, the modal appears to wait until the ajax call to #href is complete before it displays anything. From the docs it appears the modal should pop up with ajaxText filled in during the ajax call, but I see nothing until the popup suddenly appears. The call is predictably long enough (~5sec in development) that I know there isn't a chance that the loader isn't appearing for a split-second.
$('a.word').on(touchstart: touchWordPopup)
The following is in CoffeeScript, but follows convention from the official docs.
touchWordPopup: (event) ->
event.preventDefault()
// another function handles mouse hover popups,
// so let's disable that stuff.
$(this).off('mouseover mouseenter mouseleave')
$('#popup').jqm(
closeClass: 'close'
ajax: #href
ajaxText: '<h2>Loading...</h2>'
modal: true
).jqmShow()
HTML:
<html>
<head>...</head>
<body>
<div class='subscription'>
<a href="/words/foo" class='word'>Foo</a>
<!-- several more words... -->
</div>
<div id='popup' class='jqmWindow'></div>
</body>
</html>
I'm wondering whether delegation or CoffeeScript could be to blame, but I can't tell where the problem might be fixed.
The CoffeeScript is not to blame.
I've released jqModal 1.3.0, which immediately shows (displays) ajax enabled modals.
Documentation has been updated, and I've included an example (#5) to test for slower remote responses.
Because the equivalent of jqmShow() is now triggered immediately, if your ajax response includes elements that match closeClass, they will never attach. This is best corrected by patching jqModal and binding the event handler to the modal iteself, but for now you can use onLoad:
onLoad: function(hash){
var modal = hash.w;
$(hash.o.closeClass, modal).click(function(){
modal.jqmClose();
return false;
});
}
I've just recently implemented the 'Magnific Popup' and the popup comes up fine, however when I click an input box the entire popup disappears back to the parent page. On the examples shown on the plugin website, the entire dialog box is clickable until you click outside of that box.
I'm hoping its just something extremely simple I've missed, but it's still doing my head in.
I really appreciate any help I can get!
Thanks :)
If you're using "ajax" content type, you need to make sure that you've got only one root node.
http://dimsemenov.com/plugins/magnific-popup/documentation.html#ajax_type
E.g., this is correct contents of ajax file:
<div>
html content
<script src="something.js"></script>
</div>
Incorrect:
<script src="something.js"></script>
<div>
html content
</div>
Incorrect:
<div>
html content
</div>
<div>Another content</div>
Also make sure that closeOnContentClick is set to false http://dimsemenov.com/plugins/magnific-popup/documentation.html#closeoncontentclick
If, for whatever reason, you can't change the contents of ajax file, you may parse content in parseAjax callback, like described here (so the mfpResponse.data contains only one root node).
I can't reply yet (too low rep..) so adding it like this:
seems that this also counts for type: 'inline'. Safe to always wrap content by a div..
$.magnificPopup.open({
items: {
src: '<div>'+ html +'</div>'
},
type: 'inline',
closeOnContentClick: false
}, 0);
I had the same error.
Turned out to be a dumb mistake from my side, i had the same class on my opener and my inline div.
Open
<div id="popup" class="dialog mfp-hide"></div>
Of course they needed to be different classes like so:
Open
<div id="popup" class="dialog-box mfp-hide"></div>
Dmitry explains the problem here https://github.com/dimsemenov/Magnific-Popup/issues/34
Add modal:true in the magnificPopup:
$('.your_class').magnificPopup({
type: 'ajax',
modal:true
});
I am using wordpress for my website and I am trying to set up my pages so that a user has to click a button to view the content. Yes, very simple with show/hide etc but the button I Want the user to click is this http://www.facebook.com/plugins/like.php
To display that in my page i need to use an iframe which is where it gets tricky. I have set up the show/hide code so that when a user clicks the like button (or anywhere in the iframe) it will display the content. But, no such luck!
This is my code
<div id="imagebox" style="display:none;"><?php $image = wp_get_attachment_image_src(get_field('image'), 'full'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php get_the_title(get_field('image')) ?>" /> </div>
<div onclick="ShowDiv()"><iframe src="http://www.facebook.com/plugins/like.php? href=http://www.facebook.com/BrandBang&" allowTransparency="true">
</iframe></div>
<script language="javascript">
function ShowDiv()
{
document.getElementById("imagebox").style.display = '';
}
</script>
I know that it is hard to use iframes to do what I am trying to do, but i am a total newbie when it comes to this stuff. Any help would be great!
Have tried giving your div an id="imagebox"?
EDIT:
This was already answered here.
But, I didn't realize at first sight that you're loading something in the iframe that is not coming from your own domain, so you're going to fall in a cross site scripting event, which is not allowed.
Afaik, you have to redesign some way your implementation.
For instance, you could retrieve the generated html from facebook using curl and then outputting in your own div. Something like that should work.
The code I use to render share button is:
<a name="fb_share" share_url="http://www.XYZ.com" type="button_count"></a>
<script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"
type="text/javascript">
</script>
The above code exists in the page and works fine and when users clicks a button, that action will add the above code (with a different url) to the dom and My goal is to render another facebook button with count. However the problem is that the FB.Share js seems to somehow know it has already did the job and will not render again.
After poking around with the FB.Share script a bit I found this methoe FB.Share.renderAll() can force a re-render but without count numbers.
Anyone has any insights? Thanks!
try calling the JavaScript SDK's FB.XFBML.parse();
See: http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
When you re-add facebook share script, it renders again the share button.
for example: $.getScript("http://static.ak.fbcdn.net/connect.php/js/FB.Share");