Adding any additional JavaScript is breaking functionality within jQuery modal - javascript

I have a page created by someone else that contains modal windows, and each modal window has links/images that display on hover. FYI, I have a very limited understanding of JavaScript and jQuery.
What I am trying to achieve is to add Google Analytics event tags to the links in the modal windows. It would work with onclick (code below) added directly to the anchor tag, or if it is added to the link via jQuery/JavaScript). The event needs to fire as a click event in Google Anayltics.
Usually, I just add:
onclick="_gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3']);"
directly to the anchor tag, but whenever I add the code to the anchor tag in the HTML, the jQuery stops working. The modal windows work correctly on this link:
http://cookware.lecreuset.com/cookware/content_cast-iron-guide-sizes_10151_-1_20002
and you can see what I mean by "stops working" on the following link - the items within the list tags are no longer being populated, which means the icons don't show up and the new content that displays on hover can't be accessed: http://cookware.lecreuset.com/cookware/content_test-form_10151_-1_20002
Since most of the links are created in the jQuery, I started by trying to add the Google Tag via .click, .attr, .on and .bind with no luck. The link above shows you my attempt with the .click function (search for CIGuide and you'll find it in the source on the 2nd link), but it breaks in the same way no matter what JavaScript I add to the page. My original question is here: Not able to successfully add Google Analytics Event Tag to link created by .attr
After I wasn't able to get either of those two things to work, I decided to try a simple alert on the page outside of all the content I was provided, with it's own JavaScript tags, just to see if I could get that to work. It worked perfectly, but the modal functionality still broke.
I have been able to successfully add the Google Tags to the anchor in the top navigation, and to the arrows on the left and right side of the page. But anytime I try to tag anything else, it breaks.
The agency I'm working with is able to add the google tag to the anchor with no issue when they test it on their server, and I am able to see the event fire if I test it on my local machine. I have to assume there is a problem on my server or with OpenCMS. However, I don't see any error messages in any browser/debugger, and I have validated my script additions with JSLint, and everything checks out.
This is driving me nuts! Can anyone help me figure out why this won't work and how I can add event tags to the page?

Not entirely sure what you're trying to achieve, and if it would work.
$(document).ready(function() {
$("#modal_sizes_1 a").each(function( index, elem ) {
$(elem).click(function() {
_gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3']);
});
});
});
Update
Okay, so I think it's about this line:
<a
href="/cookware/content_cast-iron-guide-about_10151_-1_20002"
title="About Cast Iron"
onclick="_gaq.push(['_trackEvent','CIGuide', 'Click', 'About Cast Iron']);"
>About Cast Iron</a>
And I would try to change it like this
<a
href="/cookware/content_cast-iron-guide-about_10151_-1_20002"
title="About Cast Iron"
onclick="setTimeout(function(){
_gaq.push(['_trackEvent','CIGuide', 'Click', 'About Cast Iron']);
},0);"
>About Cast Iron</a>
Or even make the delay longer than 0, like 10 or 50.

You can use the callback for the GA push method and add the timeout. In your case try something like this:
var submitBtn = $('.submit-btn');
submitBtn.on('click', function(e) {
var that = this;
if (typeof _gaq != 'undefined') {
e.preventDefault();
_gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3'], function() {
setTimeout(function() {
window.location = $(that).attr('href');
}, 100);
});
}
});

Related

jQuery : delete a page

I'm using jQuery mobile and my page is generated from an index.php file. When I click on links referring to another option of my php file (index.php?action=other_action) it loads in Ajax so the previous content is still kept in the code. This causes problems as nothing is dynamic anymore, because I'm using specific ids, so it breaks everything. Of course disabling Ajax works but I loose all the beauty of jQuery Mobile.
I guess a solution would be to create an onclick function on the <a>, that will prevent the page from keeping the previous content or delete the old page.
So is there a way to keep using ajax in a way that it doesn't break my dynamic elements ?
You can see it in action here, you can filter names if everything's good. Then click on the top left panel and click something, notice what happens in the inspector...
Thanks for any help.
Hi you have missed enclosing the selector within qoutes...
your jQuery
$(document).ready(function() {
//bind a listener to "click" event on links with class "markviewed"
$('a.ui-btn-present').click(function(event) {
$('ul.listlist').listview('refresh');
$(#pageone).remove(); //<-- selector should be within quotes
// get ids from clicked <a>
var id = $(this).attr('data-id');
$(this).attr({
"class" : "ui-btn ui-btn-icon-notext-ok ui-icon-check ui-btn-a"
});
After much more research I wasn't looking in the right direction: the problem was that the listview had to be refreshed. So I created a new function
<script>
function refreshlist() {
$('.listlist').listview("refresh");
$('#pageone').remove();
};
</script>
And then I added onclick= "refreshlist()"to all my links and now it works.

Mobile tracking google analytics and google tag manager

I want to track how many user click the call button on the website in mobile view.
The concern is that call button is placed on two pages having same code.
I have place the below code to track the activity.but since the same code is placed on two different page. I am not able figure how many user click from which page. Page url is static it doesn't change.So we are using event tracking the differentiate. I have attached screenshot of the GTM & Web pagecode. The line highlighted in grey in image is were the phone no. & class code ( i could not share the mobile no. & class due to security). Also i have highlighted the only class that differ in code ( " pane-bean-additional-resources-about-trume" & pane-bean-safety-and-dosing-banner")
jQuery(".bw-mobile .ga-dosipage").click(function() {
try {
dataLayer.push({
'event': 'lear-more',
'category': 'Call',
'action': 'Click',
'label': 'Page - abc'});
} catch (err) {}
});
Can any body assist me with change in code at GTM level.
Thanks in advance.
If that css class is the differentiating factor you can use some JavaScript to check which version you are on. The code could look like this:
function getPageVersion(){
var page = document.querySelectorAll(".pane-bean-safety-and-dosing-banner");
if(page.length>=1){
return "Page Version A";
}else{
return "Page Version B";
}
}
This will return "Page Version A" if it can find that css Class on the page and return "Page Version B" if it can't. This way you can change:
'label': 'Page - abc'
to:
'label': getPageVersion()
If you want a pure GTM solution just put the code I put above in a Custom JavaScript Variable (don't forget to remove the function name). You can then use {{NAME OF THE GTM JS VAR}} in the Event Label part of the Analytics Tag and set the Trigger to Click, any click, enabled on the page the button is on, and filter to Click Class contains whatever your button class is.

How to call a Greasemonkey function when a JavaScript link is clicked

So I recently started working on Greasemonkey scripts without much prior experience in JavaScript. It was going fine until I hit this roadbloack.
I'm writing a script for a page that has a small table of information. If a link at the bottom is clicked, the table expands fully in the page to display all information. I need to call a function in Greasemonkey when this happens, however, the link doesn't appear to have an ID or anything I can actually reference to watch it. It's simply this:
When it's clicked, the table expands and it then shows as true. I initially used the following to expand the table upon loading the page, but that broke several things:
window.location.href = ('javascript: expandFullTable(false)');
I've attempted using "click", "onclick", and even "mouseover" to have Greasemonkey detect when it's pressed but nothing seems to work. From what I can tell it's simply a link that calls a function, but after some significant searching I wasn't able to find out anything about how to reference it in my script. I'm sure it's incredibly simple, but it's frustrated me to no end.
You can hijack the function like this:
var oldExpandFullTable = unsafeWindow.expandFullTable;
unsafeWindow.expandFullTable = function() {
// Do something
alert("You clicked on that thing!");
// Call the original function
oldExpandFullTable.apply(this, arguments);
};
But since you tagged this jquery this should let you retrieve the link:
var link = $("a[href^=\"javascript: expandFullTable\"]);
It should work if jQuery is injected into your script with #require. If it's already in the page, you can add this before to access it: var $ = unsafeWindow.jQuery;.
And by the way, perhaps you should learn more about unsafeWindow to avoid security holes.

Completely delete all instances of a div with a specific class using javascript/jquery?

I am using Popup.js by Toddish.
http://docs.toddish.co.uk/popup/demos/
Long story short, the popup plugin creates divs by default given the classes ".popup_back" and ".popup_cont".
I have another button I wish to press which should completely delete the added divs with those classes after they have been generated and added to the html. As if they never even existed. Surely this is possible?
I have tried running a function which simply runs:
$(".popup_back").remove();
$(".popup_cont").remove();
As shown in this example:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_remove
Unfortunately despite the code running, the actual divs are never deleted as required.
Any ideas? I am new to this kind of thing and have googled around and read a lot about DOM etc but am yet to crack it.
Thanks
EDIT:
In reply to the comments:
The Javascript:
function removePopups() { // This function is called to remove the popups.
console.log("removing...");
$(".popup_back").remove();
$(".popup_cont").remove();
}
function func(url) { // url is the url of the image to be displayed within the popup.
removePopups(); // As soon as the function casillas is called, removePopups is used to remove any existing instances of the divs.
$('a.theimage').popup({ // This is where the Popup plugin is utilised.
content : $(url),
type : 'html'
});
}
The HTML:
<a class="theimage" onclick="func('image/image1.jpg')" href="#" >
Long story short, an image is displayed in the popup.
I think the issue is that the popup plugin runs due to the class but the function func is never actually run when the click occurs. However simultaneously "removing..." still prints out in the console which tells me that the function IS being executed. The problem is I want the popup plugin to run together with the javascript function. Is there a solution for this conflict?
Your implementation should really be as simple as this:
<a class="theimage" href="#" >Open</a>
Bind the popup creation to your popup link:
$('a.theimage').popup({
content : 'image/image1.jpg',
type : 'html'
});
I'm speculating here, but what might be happening is that you're invoking the popup twice by binding the popup() call to a click handler in your markup. The popup plugin already binds the popup creation to a click event.
View working demo. Note the 3 external resource: the popup CSS, the popup JS, and the jQuery JS.

Cannot navigate to dynamically added page in jquerymobile / phonegap

I just cant figure out where I am going wrong. I want to create a page dynamically in jquerymobile. Then append it to body and navigate to it when clicking on a link. Here is what I try:
In my html I've got a second page, which is sort of a basic structure for the dynamically generated one. So I clone it and append it to body. The action is triggered on "pagecreate" of the active page (but triggering it on pagebeforeshow or pageshow doesnot change anything).
$('#basic-page').clone().attr({'id':'uniqueid'}).appendTo($.mobile.pagecontainer);
Then I make it live like a page...
$('#uniqueid').page();
And finally I add a link to the active page.
$('#activepage .content').append('Test');
But when I click this link, nothing happens. What is wrong? Im Running jquerymobile 1.3.2 on phonegap 2.9.0
Instead of cloning a page, create a new page and modify it the way you want.
Demo
$('<div/>', {
'data-role': 'page',
id: 'foo',
'data-theme': 'e'
}).appendTo('body');
$.mobile.changePage('#foo');
You could try having something like.
$("#uniquieid").on("vclick", function (e) {
// Do your stuff here
// or navigate to the desired section of the page.
$.mobile.changePage("#uniqueid");
e.preventDefault();
});

Categories