I am passing a long string of Html in the API parameter. But Html data is not inserted every time. I have rechecked the Html string again and again. I logged it and it is all right but when I pass in the API parameter, its data is not inserted...
Moreover, the postman also not allowing to pass Html in the raw body.
For example my html is:
<td id="st1showemailTextArea">
<span id="N1outerheaderwelcometext" style="color: rgb(0, 0, 0); margin-left: 5%; margin-bottom: 1%; pointer-events: none;">signature heading</span><br>
<span id="N1outerheadermiddletext" style="color: rgb(0, 0, 0); margin-left: 5%; margin-bottom: 1%;">signature sub heading</span><br>
Related
In FooTable 3.1.4 I want to use a pretified i-Check checkbox for a checkAll functionality in the Header of the table.
This is the HTML without i-Check:
<th data-type="html" data-sortable="false"
data-filterable="false" style="display: table-cell;"
class="footable-last-visible">Choose
<input name="check_all" class="all" type="checkbox">
</th>
When we run this script without i-Checks it runs fine. However - applying i-Checks makes the prettified checkbox unclickable - We are unable to check / uncheck.
This is the HTML with i-Check applied:
<th class="footable-last-visible" data-type="html" data-sortable="false"
data-filterable="false" style="display: table-cell;">Kies
<div class="icheckbox_square-green" style="position: relative;">
<input type="checkbox" name="check_all" class="all"
style="position: absolute; opacity: 0;">
<ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"
class="iCheck-helper">
</ins>
</div>
</th>
So it seems FooTable does not accept the i-Checks modified HTML in the head of the table. I did find a (closed) Github Issue post addressing the problem :
"the issue was that the sorting component worked off of a click on the
entire TH element and had a call to e.preventDefault() in the handler.
This was basically killing the default click behavior of elements
placed within the header element. I've since removed this limitation
and it will be released in the next version shortly."
But this post does not clarify as of which version of FooTable this problem is solved.
Or did I make a mistake in the code ..... So - any input much appreciated.
your script must be:
//first
$('.table').footable();
//after
$('#checkall').on('ifChecked ifUnchecked',function(evant){
if(evant.type == 'ifChecked')
$('.check').iCheck('check');
else
$('.check').iCheck('uncheck');
});
Using $xpath = new DOMXpath($doc) by no means I could not get div (and its children) if it is placed under anchor.
In XPath:
html[1]/body[1]/div[3]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/a[1]/div[1]/div[2]/div[1]/div[2]/img[1]
I evaluated elements one by one starting from body and when I reached the anchor it was the last tag in XPath that could be read.
I know this is not the best practice to place block elements into anchors but this html page is not mine and I cannot modify it.
Please advise if there is any trick to get it?
.....<div class="main-image">
<a title="" style="outline-style: none; text-decoration: none;" class="jqzoom" rel="gallery1" data-active="1" href="files/product/images/239_image_raw.jpg">
<div class="zoomPad">
<img style="opacity: 1;" title="" src="files/product/images/239_image.jpg" alt="ABSOLUTE SUMMER 8 VITA BASSA" height="320" width="240">
<div style="top: 97.6167px; left: 80px; width: 148px; height: 153px; position: absolute; border-width: 1px; display: none;" class="zoomPup"></div>
<div style="position: absolute; z-index: 5001; left: 239px; top: 0px; display: none;" class="zoomWindow">
<div style="width: 312px;" class="zoomWrapper"><div style="width: 100%; position: absolute; display: none;" class="zoomWrapperTitle"></div>
<div style="width: 100%; height: 320px;" class="zoomWrapperImage">
<img src="files/product/images/239_image_raw.jpg" style="position: absolute; border: 0px none; display: block; left: -169.782px; top: -206.257px;">.....
I will answer to myself :)
I took xpath from google chrome, but I did not take into account that what you see in browser is not necessary to be the same with html source as the browser shows content after javascript processing.
......
I have this code for accessing and displaying Facebook events from a Facebook Group. If you use a current access_token, this works but the access_tokens are only valid for an hour or so. What code do I need to add to programatically get a current access_token each time the page loads?
I have looked at the facebook advice and it puts my page into a permanant loop.
<?php
header ('Content-type: text/html; charset=utf-8');
$limit = 5;
$group_id = '68663437095';
$url1 = 'https://graph.facebook.com/'.$group_id;
$des = json_decode(file_get_contents($url1));
$url2 = "https://graph.facebook.com/68663437095/events?access_token=CAACEdEose0cBAORQs8KFqo6Fw1ZA78alt8CgH3pyKgEVWdbsxWmBhjwVqOOSqst51fb1ZCHK0Dtz8CmTDCZByqoJMoaXcEU6qjN4IO1JWExSwuHzVRmNU5JEkzpdcSuhPd8StyYSObAhXU4DKngmnHtvF018wZAmsg8GEFXNatcZAZBBMbJmsUOvwSOa7DubIZD";
$data = json_decode(file_get_contents($url2));
?>
<style type="text/css">
.wrapper {
width:200px;
border:1px solid #ccc;
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background-color: black;
float:left;
}
.top {
margin:5px;
border-bottom:2px solid #e1e1e1;
float: left;
width:290px;
}
.single {
margin:5px;
border-bottom:1px dashed #e1e1e1;
float:left;
}
.img {
float:left;
width:60px;
text-align:center;
margin:5px 5px 5px 0px;
border-right:1px dashed #e1e1e1;
}
.text {
width:220px;
float:left;
font-size:10px;
}
a {
text-decoration: none;
color: #3b5998;
}
</style>
<div style="width: 250px; padding-bottom:15px;"><br/>
<div style="width: 190x; margin-left:15px;">
<a target="_parent" style="font-size:40px;" href="http://www.facebook.com/groups/fumcbixby/"> <?=$des->name?></a>
<div style="width:100%; margin: 5px">
<?=$des->description?>
</div>
</div><br/>
<?
$counter = 0;
foreach($data->data as $d) {
if($counter==$limit)
break;
?>
<div style="width: auto; background-color:white; margin-left:15px; margin-bottom:15px; padding:5px">
<div style="float: left; width:120px;">
<img src="https://graph.facebook.com/<?= $d->id?>/picture">
</div>
<div>
<h2>Name <?= $d->name?></h2>
<h3>Location <?= $d->location?></h3>
<p>Start<?= date('F j, Y H:i',strtotime($d->start_time))?></p>
<p>End<?= date('F j, Y H:i',strtotime($d->end_time))?></p>
Visit Event
</div>
</div>
<?
$counter++;
}
?>
</div>
Get Extended Access Token which will be valid for 60 days
https://graph.facebook.com/oauth/access_token?
client_id=APP_ID&
client_secret=APP_SECRET&
grant_type=fb_exchange_token&
fb_exchange_token=EXISTING_ACCESS_TOKEN
Put APP_ID, APP_SECRET & EXISTING_ACCESS_TOKEN in the above url & make a HTTP request.
HTTP request will return JSON Array. Then you can easily parse Extended Access Token
Have a look at this question....
How to renew/extend facebook access tokens with PHP?
I'm working on a digital textbook feature that would allow the student to click a link to open up a simple div form for them to input their answer to that specific question. The pop-up form is just simple HTML/CSS with some jQuery UI to hide, show, and make it draggable. Here's the twist. I've got multiple questions that each need to be attached to a unique div. No problem, I thought. I'll just set each a href to link back to a unique ID that I've assigned within the DIV. Problem is, I can't seem to target the proper DIV with its corresponding a href. Instead the same set of questions appear no matter which link is clicked. This seems super simple and I'm probably overcomplicating it. What can I do here?
HTML:
<div id="draggable" class="messagepop pop">
<form method="post" id="new_message" action="/answers">
<p><label for="body">What type of person is Carsten?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><label for="body">How do you know?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><center><input type="submit" value="Submit" name="commit" id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
</form>
</div>
<div id="draggable" class="messagepop pop">
<form method="post" id="new_message" action="/answers">
<p><label for="body">What can you learn about an active volcano from the photograph?</label><textarea rows="15" name="body" id="body" cols="55"></textarea></p>
<p><center><input type="submit" value="Submit" name="commit" id="message_submit"/> or <a id="hide" href="#">Cancel</a></center></p>
</form>
</div>
Draw Conclusions What kind of person is Carsten? How do you know?
Use Text Features What can you learn about an active volcano from the photograph?
Where the first a href needs to open the first div and the second a href opens the second div, etc., etc.
CSS:
.messagepop {
overflow-y: auto;
overflow-x: hidden;
cursor:default;
display:none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align:left;
width:394px;
height: 335px;
z-index:50;
padding: 25px 25px 20px;
background-color: #fff;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 4px 4px 4px 4px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 4px 4px 4px 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;}
JS:
$(document).ready(function() {
$('.show').click(function() {
if ( !$(this).next('div').is(':visible') ) {
$(".messagepop").slideFadeToggle();
$(this).next('div').slideFadeToggle();
}
});
$('.hide').click(function() {
$(this).parent().slideFadeToggle();});
$.fn.slideFadeToggle = function(easing, callback) {
return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);};
$(function() {
$("#draggable").draggable();});
Thank you for your advice and for ironing out my poorly written method. It seems you've got it working.
I've since discovered a jQuery Mobile solution that is much easier than what I was trying to pull together.
For future viewers, it would simply look like this.
Draw Conclusions
Use Text Features
<div data-role="popup" id="popup1" class="ui-content" data-position-to="window">
Close
<p>What kind of person is Carsten?</p>
<input type="text"/>
<p>How do you know?</p>
<textarea></textarea>
</div>
<div data-role="popup" id="popup2" class="ui-content" data-position-to="window">
Close
<p>What can you learn about an active <mark><b>volcano</b></mark> from the photograph?</p>
<textarea></textarea>
</div>
The logic here makes a lot more sense to me and there's the added benefit of ensuring it will work properly on mobile devices. Then if you want to make it draggable, just drop in:
<script>
$(function() {
$(".ui-content").draggable();
});
</script>
And then if you want it to be draggable on mobile (remember, jQuery UI isn't natively supported on mobile), you'll have to call up a hack of sorts. I like Touch Punch.
You may run into issues with form inputs when using Draggable combined with Touch Punch, but that's a story for another thread.
Here is a demo: http://jsfiddle.net/ebNsz/
I've set id:s for the question-div:s and target them with the 'href' attribute in the 'a' elements. Not sure what you wanted to do with the 'slideFadeToggle' function, so i used 'fadeToggle' instead.
HTML:
<div id="q1" class="messagepop">
<form method="" id="form1" action="/answers">
<label for="answer1">What type of person is Carsten?</label><textarea name="answer1" class="answer"></textarea>
<label for="answer2">How do you know?</label><textarea name="answer2" class="answer"></textarea>
<div>
<input type="submit" value="Submit" name="submit" /> or <a class="close" href="">Cancel</a>
</div>
</form>
</div>
<div id="q2" class="messagepop">
<form method="" id="form2" action="/answers">
<label for="answer1">What can you learn about an active volcano from the photograph?</label><textarea name="answer1" class="answer"></textarea>
<div>
<input type="submit" value="Submit" name="submit" /> or <a class="close" href="">Cancel</a>
</div>
</form>
</div>
<p>Draw Conclusions What kind of person is Carsten? How do you know?</p>
<p>Use Text Features What can you learn about an active volcano from the photograph?</p>
jQuery: (jsFiddle doesn't support .draggable(), so i commented out the first line and added the second.)
$(function() {
/* $("div.messagepop").draggable().hide();*/
$("div.messagepop").hide();
$("a.toggle").click(function(e)
{
e.preventDefault();
var targetpop = $(this).attr('href');
$(targetpop).siblings("div.messagepop").fadeOut();
$(targetpop).fadeToggle();
});
$("a.close").click(function(e)
{
e.preventDefault();
$(this).closest("div.messagepop").fadeToggle();
});
});
CSS:
.messagepop {
position: absolute;
top: 20%;
left: 50%;
z-index: 50;
margin-left: -197px;
text-align: center;
width: 394px;
height: 335px;
padding: 25px 25px 20px;
background-color: #fff;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-style: solid;
border-width: 1px;
}
label {
display: block;
}
textarea {
width: 75%;
height: 5em;
margin: 0 0 1em 0;
}
Has anybody used XTK with GWT? No matter what I do I get this error "Uncaught Error: Could not find the given container or it has an undefined size."
I have defined the container element in the base html (below), which is accesible via other means (DOM, JQuery, GWT-JSNI), but not by XTK library.
My GWT-JSNI method and container HTML are as following.
Any help or pointers to debug further?
/* GWT JSNI method */
public native void initializeWebgl() /*-{
alert('r ' + $doc.getElementById('r')); // works
var r = new $wnd.X.renderer('r'); // fails ??????? why?
alert("r is" + r);
r.init(); }*-/
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
<div id="r" style="background-color: #000000; width: 100%; height: 100%;"></div>
</body>
1) This error was observed in some cases. The check which lets the renderer initialization fail is deprecated and already removed on the 'refactoring' branch. So, soon, this should work out of the box.
2) For now, the simplest workaround is to set the renderer to a fixed height (for testing):
<div id="r" style="background-color: #000000; width: 100%; height: 300px;"></div>
3) It is possible to use CSS to define a min-height on the renderer if the parent element has height 100%. Here information: http://www.gn-webdesign.de/css-tutorials/css-div-height-100.html