Is it possible to "redirect" users from a subpage ie. index.htm#sub-page to index.htm#home with the mobileinit function?
$(document).bind("mobileinit", function(){
$.mobile.changePage("/index.htm#home");
});
And why not
$(document).bind("mobileinit", function(){
document.location.href="whereever";
});
or just
<script>
document.location.href="whereever";
</script>
or even with a metatag?
$.mobile.changePage('#page_two');
This one worked for me.
Yes. If you use redirect, the non-ajax web page must reload more than 100KB of JQuery JS....
I still don't want to, but in some cases it must be done by page reload (to handle the PHP Session carefully).
Related
I am using Google Tag Manager and it just stopped working on the landing page that client's are redirected to after filling out a form. It works if you refresh the page, but doesn't work on redirects.
I know this smells like turbolinks, so I've modified the javascript function like so many articles have recommended:
<script>
document.addEventListener('turbolinks:load', function(event) {
console.log(event, dataLayer)
var url = event.data.url;
dataLayer.push({
'event':'pageView',
'virtualUrl': url
});
});
(function(w,d,s,l,i){
console.log("getting it")
w[l]=w[l]||[];w[l].push({
'gtm.start': new Date().getTime(),event:'gtm.js'
});
var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})
(window,document,'script','dataLayer','GTM-######');
</script>
In my console, I see the console.log(event, dataLayer) but there is no request to: https://www.googletagmanager.com/gtm.js?id=GTM-######
When I refresh the page, I see the same things logged to my console, but there IS a request to https://www.googletagmanager.com/gtm.js?id=GTM-######.
Does anyone know how to make this request fire or understand what might be going wrong?
On click of anchor tag I want to close the current tab and redirect to a new URL in new tab. I want this functionality to work for IE,mozilla,firefox and safari .Can anyone please provide me the javasciprt for the same . The reason i am trying something like this because i donot want users to click back button of the browser and get back into the site . Thanks
This code utilizes jquery to accomplish the task; it can be done in plain vanilla javascript as well. It should work across all (at least the more modern) browsers.
<script>
$(function(){
$("#open").click(function(){
window.open(window.location.href);
});
$("#openandclose").click(function(){
window.open(window.location.href);
window.close();
});
});
</script>
<a id="open">Open New Window</a><br />
<a id="openandclose">Open New Window and Close Old Window</a>
I didn't find an answer to my question anywhere and I know nothing about javascript, so I can't figure it out myself.
If I have jQuery mobile website built so that every single page is in separate html file (single page template). May I use standard asynchronous Google Analytics code with it, or do I have to make modifications similar to those used in multi page template?
Would be very thankful if someone could answer this question.
Yes, you can use the standard Google Analytics code. You will however, need to "push" certain page views to Google Analytics because of the way jQuery Mobile handles page navigation.
For example, if you have a Contact form on your site at contact.html that, once submitted, goes to a process.php page, and then after completing, the user arrives at thank-you.html, you will need to call some JavaScript to "push" the pageview to Google Analytics.
For example, if your jQuery Mobile page element (data-role="page") has id="thank-you", then I'd use this:
<script type="text/javascript">
$(document).delegate('#thank-you', 'pageshow', function () {
//Your code for each thank you page load here
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
_gaq.push(['_trackPageview', '/thank-you.html']);
});
</script>
UPDATE:
I would put this in your script.js file which is included in the head after you load jQuery and jQuery Mobile. This fires on each data-role="page" pageshow event, and is currently working on my live projects just fine.
$('[data-role=page]').live('pageshow', function (event, ui) {
try {
_gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
hash = location.hash;
if (hash) {
_gaq.push(['_trackPageview', hash.substr(1)]);
} else {
_gaq.push(['_trackPageview']);
}
} catch(err) {
}
});
I've used sortable/portlet jquery ui plugin on my website. I load some boxes after the page is loaded via ajax. but they don't look like the boxes appears at the page load time. I know the problem loading via ajax and bind issue. But how can I solve it?
You're ajax call has a success method which you can use to bind to elements that have been dynamically added.
For example you could do
$.ajax({
url: 'ajax/test.html',
success: function(data) {
$('.result').html(data);
$(".column").sortable({ connectWith: ".column", cursor: 'crosshair' });
}
});
I am facing issue while i load a form on ajax request. i followed the steps :
Enable jqueryUi in layout.
creates a form element like :
$dob = new ZendX_JQuery_Form_Element_DatePicker('patient_dob');
$dob->setLabel('')
->addFilter('StripTags')
->addFilter('StringTrim')
//->addValidator('Date')
->setAttrib('readonly', 'true')
->setJQueryParam('dateFormat', 'yy-mm-d')
->setDecorators(array(
'Description', 'Errors', 'UiWidgetElement',
array(array('data' => 'HtmlTag'), array('tag' => 'Div', 'class'=>'calender_input'))
));
and just called the element into form. It is working when page load normally but not with ajax request. What is the reason? any suggestions? i googled a lot about it.
The problem is that the javascript code that activates the date picker is rendered by the ZendX_Jquery extension to happen when the document is ready:
<script type="text/javascript">
//<!--
$(document).ready(function() {
$("#patient_dob").datepicker({});
});
//-->
</script>
which makes sense with non-ajax requests, but never is executed in an ajax request because the document.ready has already happened in the parent's page. You can add your own in your view directly:
<script type="text/javascript">
$("#patient_dob").datepicker({});
</script>
I haven't yet found a solution for this from the Zend Jquery extension, but if you do please let me know!