I am using magnific popup JS (http://dimsemenov.com/plugins/magnific-popup/) to produce a popup for a youtube video on my Drupal site. The implementation works fine, but only if I am logged into Drupal. If I am not logged in, the popup link will just go the the youtube page (eg jQuery not initialising).
I suspect there may be something going on with Drupal loading a different version of jQuery when I am logged in. It seems that I may be able to add something to my template file to fix this. Haven't figured it out yet (https://www.drupal.org/node/2165555)
I do not have access to add jQuery update module.
Fixed. Added below snippet to template.php to force a later version of jQuery to load.
function theme_name_js_alter(&$javascript) {
$node_admin_paths = array(
'node/*/edit',
'node/add',
'node/add/*',
'node/*/extend_review_date',
);
$replace_jquery = TRUE;
if (path_is_admin(current_path())) {
$replace_jquery = FALSE;
} else {
foreach ($node_admin_paths as $node_admin_path) {
if (drupal_match_path(current_path(), $node_admin_path)) {
$replace_jquery = FALSE;
}
}
}
// Swap out jQuery to use an updated version of the library.
if ($replace_jquery) {
$javascript['misc/jquery.js']['data'] = '//code.jquery.com/jquery-1.7.0.min.js';
}
}
Related
I am trying to get the user to 'install' the shortcut icon to a webpage and use it as an icon to the PWA.
I am wondering if any of you had a chance to somehow discover if the user installed the shortcut on home screeen?
This is an interesting case, because when developing on Android or such one has access to such information, on the other hand I don't recall browser giving that information away.
The beforeinstallprompt will only fire if the user has NOT installed the PWA
First: Use that to check if installed
window.addEventListener('beforeinstallprompt', (e) => {
// If you get inside here, the PWA is not installed
});
Example code here
https://developers.google.com/web/fundamentals/app-install-banners
Second: If you are showing your own deferred prompt like the examples at the link above, you can listen to know if they close that without adding to home screen (A2HS)
// Wait for the user to respond to the prompt
this.deferredPrompt.userChoice
.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
// User said yes to your A2HS
} else {
this.deferredPromptRejected = true;
}
});
Third: You can check if your PWA is running as a standalone
function isRunningStandalone() {
return (window.matchMedia('(display-mode: standalone)').matches);
}
I'm facing the following issue in protractor with jasmine
Click/mouse hover not working because of fixed top navigation bar in my application. I need to click/perform mouse hover on a web page.
Unfortunately that element is displaying behind that fixed navigation bar. So scroll till element present & click by x & y coordinates are not working.
My dependencies are :
protractor version 5.2.2
node 8.9.3
selenium standalone 3.13
chrome driver-2.40
chromebrowser v67
OS- Windows 10
Thanks in advance
Try using prototype executeScript
Just try clicking that element from the browser console using id,name or xpath.
For example :
var el = element(by.module('header'));
var tag = browser.executeScript('return arguments[0].click()', el).then(function() {
expect(something).toMatch(something);
});
Another way, along the same lines as what Bharath Kumar S and knowing JeffC's caveat that this approach is cheating, I had a similar issue where the App-Header kept getting in my way of clicking, and I knew I was willing to never need it (so, for instance, to find other ways to navigate or log out and not check for stuff that was on it). I, therefore, did the following, which solved the problem. Note if you refresh the screen, you have to call it again. Also note I am using a number of functions from https://github.com/hetznercloud/protractor-test-helper, which do what you would expect from their names.
var removeAppHeaderIfAny = async function() {
//this function hides the app header
//it is useful to avoid having covers there when Protractor worries that something else will get the click
let found = false;
try {
found = await waitToBeDisplayed(by.className("app-header"), 2000);
} catch (e) {
let s: string = "" + e;
if (s.search("TimeoutError") != 0) flowLog("presumably fine, cover already removed: " + e);
found = false;
}
if (!found) return;
if (found) {
let coverElement = await element(by.className("app-header"));
browser.executeScript(
"arguments[0].style.visibility='hidden';",
coverElement
);
await waitToBeNotDisplayed(by.className("app-header"), 10000);
}
return;
//note after this is called you will not see the item, so you cannot click it
};
As I look at the code, it strikes me one can probably remove the if (found) and associated brackets at the end. But I pasted in something I know has been working, so I am not messing with that.
As indicated up front, I knew I was willing to forego use of the app-header, and it is a bit crude.
I am trying to implement google custom search in an angular js website.
When I click on the search button it does not display me anything, but the url is updated to the url.
I have followed the steps mentioned in the documentation by google.
I am not sure what I am doing wrong?
My search bar is located on the home page as -
<gcse:searchbox-only enableAutoComplete="true" resultsUrl="#/searchresult" lr="lang_en" queryParameterName="search"></gcse:searchbox-only>
my search result has -
<gcse:searchresults-only lr="lang_en"></gcse:searchresults-only>
Any input is much appreciated.
Thanks,
You may have more than one problem happening at the same time...
1. Query Parameter mismatch
Your searchresults-only does not match the queryParameterName specified on gcse:searchbox-only.
Index.html
<gcse:searchresults-only queryParameterName="search"></gcse:searchresults-only>
Search.html
<gcse:searchresults-only queryParameterName="search"></gcse:searchresults-only>
2. Angular.js is blocking the flow of Google CSE
Under normal circumstances, Google Search Element will trigger an HTTP GET with the search parameter. However, since you are dealing with a one-page application, you may not see the query parameter. If that suspicion is true when you target resultsUrl="#/searchresult", then you have two options:
Force a HTTP GET on resultsUrl="http://YOURWEBSITE/searchresult". You may have to match routes, or something along those lines in order to catch the REST request (Ember.js is really easy to do so, but I haven't done in Angular.js yet.)
Use JQuery alongside Angular.js to get the input from the user on Index.html and manually trigger a search on search.html. How would you do it? For the index.html you would do something like below and for the results you would implement something like I answered in another post.
Index.html
<div>GSC SEARCH BUTTON HOOK: <strong><div id="search_button_hook">NOT ACTIVATED.</div></strong></div>
<div>GSC SEARCH TEXT: <strong><div id="search_text_hook"></div></strong></div>
<gcse:search ></gcse:search>
Index.js
//Hook a callback into the rendered Google Search. From my understanding, this is possible because the outermost rendered div has id of "___gcse_0".
window.__gcse = {
callback: googleCSELoaded
};
//When it renders, their initial customized function cseLoaded() is triggered which adds more hooks. I added comments to what each one does:
function googleCSELoaded() {
$(".gsc-search-button").click(function() {
$("#search_button_hook").text('HOOK ACTIVATED');
});
$("#gsc-i-id1").keydown(function(e) {
if (e.which == 13) {
$("#enter_keyboard_hook").text('HOOK ACTIVATED');
}
else{
$("#search_text_hook").text($("#gsc-i-id1").val());
}
});
}
(function() {
var cx = '001386805071419863133:cb1vfab8b4y';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);
})();
I have a live version of the index.html code, but I don't make promises that will be permanently live since it is hosted in my NDSU FTP.
My order table includes customer filed , When add new order, after choose the customer name from dropdown list, I want the same page to display the information of customer, for example, address, phone number from customer table
How to do?
Thanks in advance...
Could you give me an example or related links? I don't know anything about AJAX, have no idea where to start.
Maybe this link: http://www.w3schools.com/ajax/ajax_database.asp, but it uses php not cakephp...
the code in example is : xmlhttp.open("GET","getuser.php?q="+str,true);
I don't know how to pass customer_id(q=str) to orderscontroller/getuser function.need help
You can use JsHelper to achieve the same you mentioned. Kindly try at your end, and provide some raw code so that peers can help you to do that.
Your code should be like this
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("divtoDisplayInfo").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("divtoDisplayInfo").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/yoursite/controllername/action/str,true); //if you use redirect and windows environment
xmlhttp.send();
}
you should expect the view of that action so do the normal cake processing, get data in the controller, render view, if there is an error set the actions autorender to false.
but i will just advice you to download Jquery add to your cakephp framework this simple line
$("divToDisplayInfo's_ID").load("Controllername/action")
solves your problem.
I understand that ExtJS uses AJAX for all server side communication, and that ideally there would be only one page per application. But I am exploring the possibility of generating a unique url for a ExtJS tab which the user can then copy from the address bar for later use(traditional web application approach - making a page bookmarkable). Please let me know if anyone has done anything similar.
You can make use of the "hash". This is the portion of the URL which follows the "#" character.
If you only need to react to the hash at time of page load to support the bookmarking feature then you can get away with something like:
Ext.onReady(function() {
var tabPanel = new Ext.TabPanel({
// Configure for use in viewport as needed.
listeners: {
tabchange: function( tabPanel, tab ) {
window.location.hash = '#'+ tab.itemId;
}
}
});
var token = window.location.hash.substr(1);
if ( token ) {
var tab = tabPanel.get(token);
if ( ! tab ) {
// Create tab or error as necessary.
tab = new Ext.Panel({
itemId: token,
title: 'Tab: '+ token
});
tabPanel.add(tab);
}
tabPanel.setActiveTab(tab);
}
});
You may also choose to go further and employ the hashchange event supported in recent versions of most browsers. This will allow you to react to the hash being changed by either user or programmatic means after the page has finished loading:
if ( 'onhashchange' in window ) {
window.onhashchange = function() {
var token = window.location.hash.substr(1);
// Handle tab creation and activation as above.
}
}
It is worth noting that the Ext.History singleton promises functionality similar to this. However, as of ExtJS 3.3.1 it has not been given support for the hashchange event and is instead wholly dependent on a polling interval and a hidden iframe hack. I was not satisfied with its performance in modern browsers - IE in particular - until I rewrote it to use hashchange where available.