I have a drop down list to which I append buttons by js. Everything works fine but I couldn't get my buttons to perform their onclick action.
here is the code which generates the buttons:
function (data) {
$("#pop-up").css("display", "none");
$("#pop-up").empty();
$("#pop-up").append("<p class=search-top>titles</p>");
if (data.title4) {
$("#pop-up").append("<b onmousedown='event.preventDefault()' onclick='showtime('pop-button4')' id=pop-button4>"+data.title4+"</b>")
}
if (data.title3) {
$("#pop-up").append("<b onmousedown='event.preventDefault()' onclick='showtime('pop-button3')' id=pop-button3>"+data.title3+"</b>")
}
if (data.title2) {
$("#pop-up").append("<b onmousedown='event.preventDefault()' onclick='showtime('pop-button2')' id=pop-button2>"+data.title2+"</b>")
}
if (data.title1) {
$("#pop-up").css("display", "block");
$("#pop-up").append("<b onmousedown='event.preventDefault()' id=pop-button1>"+data.title1+"</b>")}
I tryed both js and jquery but couldn't get them to work, the last function I tryed is:
$('#pop-button1').on('click', function(){
console.log("here")
});
It does nothing at all.
Change your callback to be:
$(document).on('click', '#pop-button1', function(){
console.log("here");
});
By doing that you might achieve what you're looking for.
Related
I'm trying to automate google's footer and it runs the script but it doesn't update anything. Does anyone know how to solve it?
Sounds to me like it's an authentication thing.
Someone did something similar?
Description
Here is a simple example of adding a new paragraph to a footer.
Script
function editFooter() {
try {
let doc = DocumentApp.getActiveDocument();
let footer = doc.getFooter();
if( !footer ) footer = doc.addFooter();
footer.appendParagraph("This is the footer");
}
catch(err) {
console.log(err);
}
}
Reference
Document.addFooter()
FooterSection.appendParagraph()
I have been working for a accounting based project using Django-2.0.6 and python-3.6.
I want to implement shortcut keys in my project using jquery.
I have tried a library known as django-keyboard-shortcuts but it doesnot supports python3.
So I want to do it using jquery or any other option(if is there).
For example:
If I press Cntrl + R or any other combination from my keyboard it will redirect me to the desired url given in the combination.
Update
I have tried the following:
$(document).ready(function() {
$(document).keypress(function(event) {
if (event.which === 99) { window.location = '{% url 'accounting_double_entry:groupcreate' pk=company_details.pk pk3=selectdatefield_details.pk %}'; }
});
});
But got one problem that when I try to put combination of keys like ctrl+q or something like that it does not works.
Any idea how to do it?
Thank you
I have been fighting this all day
The code below takes a jinja array from flask and providing I dont want an info box it all works hunky dory.
Add the infobox code below and it presents a single marker and no info window. Its been driving me crazy. I also want to use clustering as I have about 500 pins but that is such a second order problem.
I have had a look at SO tried many of the answers to no avail, there is some sort of magic called closure that seems to be at the heart of the problem that I clearly don't get.
Any help would be appreciated
Thanks in anticipation
function initialize() {
var infowindow = new google.maps.InfoWindow();
var map = new google.maps.Map(
document.getElementById('map_canvas'), {
center: new google.maps.LatLng(10.455177, 12.584731),
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
function addMarker(lat,long,name,content){
var info = content;
var message = name;
var point = new google.maps.LatLng(lat,long);
var newmarker = new google.maps.Marker({position: point,
map: map,
title: name
});
\\take this block of code out and I get all the markers fine
google.maps.AddListener(point, 'click', function(map, newmarker){
infowindow.setContent(info)
infowindow.open(map,newmarker)
});
}
{% for marker in markers %}
addMarker({{marker.lat}},{{marker.long}},'{{marker.name}}', '{{marker.url}}');
{% endfor %}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Check the syntax for the event listener.
Should be google.maps.event.addListener(newmarker, 'click', function(evt){
fiddle
I'm writing a web crawler, but I only care about pages with responsive web design (RWD). Is there a tell-tale sign that the site is responsive? I am using the mechanize module in python.
The only thing I can think of is grepping the html for something like
href="css/bootstrap.min.css"
or
class="row-fluid"
or something that indicates percentages instead of pixels.
Any help would be appreciated.
My vote would be to search the page head for
<meta name="viewport" content="width=device-width, initial-scale=1.0" *** wildcard-selector-here *** >
I think it would be easier and more acurate than searching for the presence of CSS media queries.
Good luck!
I had a project where I needed to make the website responsive without touching any html markup and no programming code, the only thing I could modify was a stylesheet and a javascript file. I didn't even know which were all the pages of the website because it was a new project to me.
So the goal was to make it responsive so Google crawler won't penalize the site.
So I knew I could use https://www.google.com/webmasters/tools/mobile-friendly/ manually for the pages I wanted to test. But how could I test the whole site?
Well what I've done is to ask for a Webmaster Tools export of the most important links of the site, hundreds of them.
Then I've built a small "tool" that would do exactly what I think Google Responsive Test does, but this tool would accept a list of urls and would loop and test each of them if they fit on a 320px screen (iframe).
This is the HTML tool that you just open, type the urls in a text box, and hit Start! (responsiveChecker.html)
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Responsive Checker</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://www.google.com/jsapi"></script>
<script>
var urls;
var delay=3000;
google.load("jquery", "1");
google.setOnLoadCallback(function() {
// Place init code here instead of $(document).ready()
console.log('jquery loaded');
$('#responsiveFrame').load(function(){
if (urls.length > 0) {
setTimeout(function(){ checkUrl(); }, delay);
}
});
});
function startChecking() {
var textUrls=$('#urls').val();
urls= textUrls.match(/[^\r\n]+/g);
checkUrl();
}
function checkUrl() {
var url;
if (urls.length > 0) {
url=urls[0];
console.log("checking: "+url);
$('#responsiveFrame').attr('src',url+'#rc=1');
urls.splice(0, 1);
} else {
console.log("no more urls");
}
}
</script>
</head>
<body>
<iframe id="responsiveFrame" width="320" height="480" src="about:blank" style="border: 1px solid red;" scrolling="no"></iframe>
<p>
<label for="urls">Enter URLs to check, one per line:</label><br />
<textarea id="urls" rows="30" cols="100"></textarea>
</p>
<p>
<input type="button" value="Start checking!" onclick="startChecking();">
</p>
</body>
</html>
This a script that must be loaded and run on the website you want to check:
var responsiveChecker = new function () {
this.width = 320;
this.hashParams={};
this.check = function () {
this.hashParams=this.parseHashBangArgs();
// this.log('responsiveChecker');
// this.log(this.hashParams);
if (!this.mustCheck()) {
return;
} else {
this.updateParams();
this.log('must check!');
var that = this;
var counter=0;
var visibleCounter=0;
jQuery("*").each(function() {
if (jQuery(this).width() > that.width) {
if ('SCRIPT' === this.tagName) {
// ignore script tags
} else {
that.log(this.tagName + "#" + this.id);
counter++;
if (jQuery(this).is(":visible")) {
visibleCounter++;
that.log(this.tagName + "#" + this.id);
}
}
}
});
var page=window.location.href;
if (visibleCounter > 0) {
this.log('[ERROR] page not responsive, there are elements bigger than screen size: '+page);
} else {
if (counter > 0) {
this.log('[WARNING] hey check the above list, there are some hidden elements with size bigger than the screen: '+page);
} else {
this.log('[SUCCESS] ¡todo bien! looks like all elements fit on the screen: '+page);
}
}
}
};
this.updateParams = function () {
if (typeof(this.hashParams.width) !== 'undefined') {
this.width=parseInt(this.hashParams.width);
}
};
this.mustCheck = function () {
if (typeof(this.hashParams.rc) !== 'undefined') {
return true;
}
return false;
};
// https://gist.github.com/miohtama/1570295
this.parseHashBangArgs = function() {
var aURL = window.location.href;
var vars = {};
var hashes = aURL.slice(aURL.indexOf('#') + 1).split('&');
for(var i = 0; i < hashes.length; i++) {
var hash = hashes[i].split('=');
if(hash.length > 1) {
vars[hash[0]] = hash[1];
} else {
vars[hash[0]] = null;
}
}
return vars;
};
this.log = function (msg) {
console.log(msg);
};
};
Place this at the end of a jquery ready:
responsiveChecker.check();
So finally how does it work:
You add the responsiveChecker javascripts on the website you want to check
You open the responsiveChecker.html file, add the urls of the site in the textarea and hit Start
It will start to load the urls in the iframe one by one, and on the Console tab of your browser it will log a "success", "warning" or "error", that means that either it is responsive, or maybe, or not responsive.
Let me know what you think!
By the way, does anybody think this could be useful if we clean it and build a real live tool/service that people could use to test their websites for responsiveness?
Oh btw: The actual checking is done with jQuery, by testing all the elements of the page that have a width smaller or equal to 320px. Indeed this is not 100% guarantee but I think Google's bot might be doing something like this but I'm sure it is more sophisticated.
I have a dropdown with onchange events. When ever user change the drop down box then ajax called and result displayed. All this working fine.
I have following list in template.
Apple
Pineapple
When ever user changed the drop down value. Then result merged
Orange
Graps
Apple
Pineapple
But output should be like this.
Orange
Graps
I have no idea what to do. Please help me. Here is my base. Here is my movie_list template. Here is my movie_sort template. And here is my view . Thanks :-)
UPDATE: Here is ajax code.
function sortMovie(str)
{
if (str=="")
{
document.getElementById("txtHint").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("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/moviesort/?q="+str,true);
xmlhttp.send();
}
DROP DOWN
<select name="category" onchange="sortMovie(this.value)">
<option value="">Choose</option>
{% for category in categories %}
<option value="{{ category.id}}">{{category.name}}</option>
{% endfor %}
</select>
if you are using jQuery to call ajax, I would recommend you use the .empty() straight after the .change() function.
I have no idea what yours looks like, although it should be something like this.
$('#id_category').change(function() {
/* Set your string to nothing */
var str = "";
/* once your dropdown is changed, it performs a look and gets the new data */
$("#id_category option:selected").each(function () {
/* Before inserting the new data, empty out all the old items */
$('#id_sub_category').empty();
str += $(this).val();
$.get('{% url gear_category %}', { category: str }, function(data){
$(data).appendTo("#id_sub_category");
});
});
});
Hope this helps.
I agree with ApPel on this.
However, since you aren't using jQuery...
You'll either have to loop through each option in the select and remove as you go, or I suppose if pure javascript supports you might be able to mimic the jQuery code, but with the javascript syntax.
Either way, you'll have to remove the old values before appending the new ones. That's the problem.