Grab images from another website, like pinterest - image

Im trying to build something like images bookmarklet site like Pinterest, but somehow some of the website doesnt grab any image. Some are works just fine. Also as additional information, I use jquery wookmark as the grid templates.
Here are the codes im currently use... I dont know if its right or simply i used the wrong method to retrieve the images. Cheers guys in advance for any comment or help... really appreciated.
-- html
<ul id="tiles"></ul>
<div id="loader">
<div id="loaderCircle" style="display:none"></div>
</div>
-- javascript
<script type="text/javascript">
function loadData() {
isLoading = true;
var link_pin ='http://www.somewebsite.com';
$('#loaderCircle').show();
$.ajax({
url: '<?php echo(base_url('index.php/home/pin_ajax'))?>',
dataType: 'json',
data: {link_pin:link_pin},
success: onLoadData
});
};
function onLoadData(data) {
isLoading = false;
$('#loaderCircle').hide();
var html = '';
var i=0, length=data.length, returns_data;
for(; i<length; i++) {
var link_foto = data[i];
var newImg = new Image();
newImg.src = link_foto;
var height = newImg.height;
var width = newImg.width;
var image_click="image_clicks('"+link_foto+"')";
if (width >="200" && height >="200"){
html += '<li onclick="'+image_click+'" id="image_'+i+'">';
html += '<a>';
html += '<div class="back_tristlist">';
html += '<span class="hover-icon icon-text">🔍</span>';
html += '<img src="'+link_foto+'">';
html += '</div>';
html += '</a>';
html += '<div class="space_image"></div>';
html += '</li>';
}
}
$('#tiles').append(html);
handler = $('#tiles li');
handler.wookmark(options);
};
</script>
-- php
public function pin_ajax(){
extract($_GET);
$page = file_get_contents($link_pin);
error_reporting(0);
$doc = new DOMDocument();
#$doc->loadHTML($page);
$images = $doc->getElementsByTagName('img');
echo($images);
$_datas[]="";
foreach($images as $image){
$raw_img_url = $image->getAttribute('src');
$img_final_link = $raw_img_url;
$img_url = explode('http://www.', $raw_img_url);
$img_check = $img_url[1];
if($img_check==''){
$img_url = explode('http://', $raw_img_url);
$img_check = $img_url[1];
if($img_check!=''){ $img_check_error=1; }
if($img_check==''){ $img_check_error=2; }
}
$_datas[] = ($img_check);
}
$output = json_encode($_datas);
echo($output);
}

Related

How to change 'active/inactive status of user' through ajax?

I am display list of users in datatable based on 2 parameters through AJAX in codeigniter. I want to change the status of user in database and display in table. I have 3 status 0-> inactive, 1->active, -1->left. I want to change the status and display in datatable without reloading the page.
I have tried changing the status but the status is changing only once. After first AJAX call there is no change when i again change the status.
//view
<script>
$(document).ready(function()
{
$('#academicTable_wrapper').hide();
$('#studentTable').DataTable();
showStudents();
function showStudents()
{
$('#submitBtn').on('click',function(){
var courseId = $('#courseId').val();
var classId = $('#classId').val();
$.ajax({
type : 'POST',
url : "<?php echo base_url();?>Student/getStudentsList",
// async : true,
data : {courseId:courseId,classId:classId},
dataType : 'json',
success : function(data){
//alert(data);
var html = '';
var i;
for(i=0; i<data.length; i++){
var studentId = data[i].studentId;
if(data[i].status == 1)
var status = "Approved";
else if(data[i].status == 0)
var status = "Pending";
else
var status = "Left";
html += '<tr>'+
'<td>'+data[i].studentId+'</td>'+
'<td>'+data[i].studentName+'</td>'+
'<td>'+data[i].studentPhoneNum+'</td>'+
'<td>'+data[i].created_on+'</td>'+
'<td id="changeStatus">'+status+'</td>'+
'<td>'+
'View'+
' '+
'<a id="activateBtn" data-id="'+data[i].id+'" data-status="'+data[i].status+'" class="btn btn-primary btn-sm text-white">Activate/Deactivate</a>'+
' '+
'Delete'+
'</td>'+
'</tr>';
}
$('#studentTable').DataTable().destroy();
$('#showData').html(html);
$('#studentTable').DataTable();
$('#academicTable_wrapper').show();
}
});
});
}
$(document).on('click','#activateBtn',function()
{
var id = $(this).data('id');
var status = $(this).data('status');
$.ajax({
method: 'POST',
url: "<?php echo base_url();?>Student/approveStudent",
data:{id:id,status:status},
success : function(data)
{
alert(data);
$('#changeStatus').text('');
if(data == 0)
{
showStudents();
$('#changeStatus').html('Inactive');
}
else{
showStudents();
$('#changeStatus').html('Approv');
}
},
error:function(data)
{
console.log(data);
}
},1000);
});
});
</script>
//controller
function approveStudent()
{
$id = $this->input->post('id');
$status = $this->input->post('status');
$col = 'id';
$query = $this->Admin_model->activate($col,$id,$status,$this->studentDetail);
if($query){
$result = $this->Admin_model->getData($col,$id,$this->studentDetail);
}
$status = 1;
if ($result[0]->status == 0)
{
$status = 0;
}
echo $status;
}
I expect whenever I click activateBtn the status should change in database and also in datatable.

Disable button on ajax submit

I have the following JS and HTML code and I want to disable the button when ajax request is submitting so the user wont be able to double click and disturb the process.
function doReshare(_intPostId) {
if(typeof cLogin === 'undefined')
var cLogin = checkLogin();
if(cLogin!=true)
return;
var date = new Date();
var mainId = _intPostId;
var type = 1;
var active = 0;
var postFinded = 0;
jQuery(".reshare_" + _intPostId).each(function() {
postFinded = 1;
objElement = jQuery(this);
if(objElement.hasClass('sm2_playing') || objElement.hasClass('sm2_paused')) {
// track is active
active = 1;
}
if(objElement.hasClass('is_album')) {
mainId = objElement.closest('div.playlist-box').attr('id').replace('album_', '');
// mainId = objElement.data('mainid');
}
var intLikesCurrentCount = parseInt(objElement.find(".likes_count").first().text(), 10);
if(!objElement.find(".refeed_fct").hasClass("active")) {
if(active)
jQuery('.player-icons.dorepost').addClass('active');
objElement.find(".refeed_fct").addClass("active");
//objElement.find(".likes_count").html("<i class=\"fa fa-heart-o\"></i> " + (intLikesCurrentCount + 1));
} else {
objElement.find(".refeed_fct").removeClass("active");
if(active)
jQuery('.player-icons.dorepost').removeClass('active');
type = 0;
//objElement.find(".likes_count").html("<i class=\"fa fa-heart-o\"></i> " + (intLikesCurrentCount - 1));
}
});
if(!postFinded) {
if(!jQuery(".player-icons.dorepost").hasClass("active")) {
jQuery('.player-icons.dorepost').addClass('active');
} else {
jQuery('.player-icons.dorepost').removeClass('active');
}
}
jQuery("#vowave").append('<img width="1" height="1" src="/reshare/' + mainId + '/' + type + '?time=' + date.getTime() + '" />');
}
and the html
<span class="refeed_fct" onclick="doReshare(10309)">
<i class="fa fa-retweet"></i> <div class="inline hidden-mobile">Repost</div>
</span>
Thank you
Maybe you should set the objElement's onclick listener to an empty function

Does not want to be inserted as html in CKeditor

onOk: function() {
var dialog = this;
var contentFromTextarea = dialog.getValueOf('tab-main','content');
var rowArray = new Array();
var cellArray = new Array();
var row = '';
rowArray = contentFromTextarea.split(';');
for (var i = 0; i < rowArray.length-1; i++)
{
cellArray[i] = rowArray[i].split(':');
row += '<div>' + '<span>' + cellArray[i][0] + '</span>' + '<span>' + cellArray[i][1] + '</span>' + '</div>'
}
row = '<div>' + row + '</div>';
editor.insertHtml(row);
}
Does not want to be inserted as html in CKeditor. Why?
Thanks for help.
Try displaying "row" just before you run the editor.insertHtml(row);
command just to make sure you html tags are well formed. why are you adding a div tag inside another div tag?

Kendo Grid: How display List<string> in one cell?

I tried to iterate through the list and display all elements into a cell in a column but I've having trouble getting it to work.
Here is what I have so far.
In Grid definition:
columns.Bound(x => x.locationList).Title("Locations Included").ClientTemplate("#= iterate(x.locationList) #");
where x.locationList is a List<string> in the object passed in.
In <script>:
function iterate(object) {
var html = "<ul>";
for (var x = 0; x < object.length; x++) {
html += "<li>";
html += object[x];
html += "</li>";
}
html += "</ul>";
return html;
}
However, this causes all the records to disappear. What is the correct syntax to do this?
The documentations are confusing and most of the examples don't apply to what I'm trying to to.
You probably have your answer already but you aren't that far wrong with your implementation all you are forgetting is what happens if your list is either null or empty this is what is probably blowing out your gird.
So altering your code:
function iterate(object) {
var html = "<ul>";
for (var x = 0; x < object.length; x++) {
html += "<li>";
html += object[x];
html += "</li>";
}
html += "</ul>";
return html;
}
to
function iterate(object) {
var html = "<ul>";
if (object !== null && object.length > 0) {
for (var x = 0; x < object.length; x++) {
html += "<li>";
html += object[x];
html += "</li>";
}
} else {
html += "<li>-</li>";
}
html += "</ul>";
return html;
}
alternatively you could do this:
function iterate(object) {
var html = '<ul>';
if (object !== null && object.length > 0) {
object.forEach(function (data) {
html += '<li>' + data + '</li>';
});
} else {
html += '<li>-</li>';
}
html += '</ul>';
return html;
}
The last solution is my preferred (I just find it cleaner to read)
Obviously the other answers provide a solution for you if it is something a little more complex you want to show.
Well hope this helps anyway.
You were so close! You were literally one letter off where your Kendo Grid was defined. Just replace the x.locationList with locationList when passing to your iterate function and you're good to go! (Full line with fix below)
columns.Bound(x => x.locationList).Title("Locations Included").ClientTemplate("#= iterate(locationList) #");
You need to make a column template for this purpose
please see this answer below
How to display formatted HTML data in kendo ui grid column
Jquery for calling template
var scriptTemplate = kendo.template($("#MessageBoxTemplate").html())
var scriptData = { stringList: yourListofString };
Foreach Loop inside Template
<script id="MessageBoxTemplate" type="text/x-kendo-template">
<div class="class1">
<div>This is <strong>bold </strong>text.</div>
<div> </div>
<div>This is <em>italics</em> text.</div>
<div> </div>
<div>This is a hyperlink.</div>
<div> </div>
<div>Bulleted list:</div>
<ul>
for(var item; item<=stringList.length;item++)
{
<li>#= item.Age#</li>
<li>#= item.Name#</li>
<li>#= item.Message#</li>
}
</ul>
</div>
</script>
Shaz's solution did not work for me. Not sure if I'm using a different version, but it's missing some hashes. They are needed to define what is javascript and what is not.
<script id="MessageBoxTemplate" type="text/x-kendo-template">
<div class="class1">
<div>This is <strong>bold </strong>text.</div>
<div> </div>
<div>This is <em>italics</em> text.</div>
<div> </div>
<div>This is a hyperlink.</div>
<div> </div>
<div>Bulleted list:</div>
<ul>
#for(var item; item<=stringList.length;item++)
{#
<li>#= item.Age#</li>
<li>#= item.Name#</li>
<li>#= item.Message#</li>
#}#
</ul>
</div>

AJAX response doesn't run any script

My page gets a response from response_ajax.php with this code:
<input class="btn" name="send_button" type="button" value="check"
onClick=
"xmlhttpPost('/response_ajax.php',
'MyForm',
'MyResult',
'<img src=/busy.gif>')";
return false;"
>
I get a response; however, jQuery scripts don't work with an arrived code. I'm trying to add script inside response_ajax.php, but nothing happens:
<?php
// ... //
echo '
<div id="whois-response">
<pre>' .$str. '</pre>
</div>
<script>
(function($){
$(function(){
alert("loaded");
});
})(jQuery);
</script>
';
?>
xmlhttpPost function:
function xmlhttpPost(strURL,formname,responsediv,responsemsg) {
var xmlHttpReq = false;
var self = this;
// Xhr per Mozilla/Safari/Ie7
if (window.XMLHttpRequest) {
self.xmlHttpReq = new XMLHttpRequest();
}
// per tutte le altre versioni di IE
else if (window.ActiveXObject) {
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
}
self.xmlHttpReq.open('POST', strURL, true);
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
self.xmlHttpReq.onreadystatechange = function() {
if (self.xmlHttpReq.readyState == 4) {
// Quando pronta, visualizzo la risposta del form
updatepage(self.xmlHttpReq.responseText,responsediv);
}
else{
// In attesa della risposta del form visualizzo il msg di attesa
updatepage(responsemsg,responsediv);
}
}
self.xmlHttpReq.send(getquerystring(formname));
}
function getquerystring(formname) {
var form = document.forms[formname];
var qstr = "";
function GetElemValue(name, value) {
qstr += (qstr.length > 0 ? "&" : "")
+ escape(name).replace(/\+/g, "%2B") + "="
+ escape(value ? value : "").replace(/\+/g, "%2B");
//+ escape(value ? value : "").replace(/\n/g, "%0D");
}
var elemArray = form.elements;
for (var i = 0; i < elemArray.length; i++) {
var element = elemArray[i];
var elemType = element.type.toUpperCase();
var elemName = element.name;
if (elemName) {
if (elemType == "TEXT"
|| elemType == "TEXTAREA"
|| elemType == "PASSWORD"
|| elemType == "BUTTON"
|| elemType == "RESET"
|| elemType == "SUBMIT"
|| elemType == "FILE"
|| elemType == "IMAGE"
|| elemType == "HIDDEN")
GetElemValue(elemName, element.value);
else if (elemType == "CHECKBOX" && element.checked)
GetElemValue(elemName,
element.value ? element.value : "On");
else if (elemType == "RADIO" && element.checked)
GetElemValue(elemName, element.value);
else if (elemType.indexOf("SELECT") != -1)
for (var j = 0; j < element.options.length; j++) {
var option = element.options[j];
if (option.selected)
GetElemValue(elemName,
option.value ? option.value : option.text);
}
}
}
return qstr;
}
function updatepage(str,responsediv){
document.getElementById(responsediv).innerHTML = str;
}
I may be wrong, but I'm pretty sure you can't do multiline strings unless it is configured to do so (and running a newer version of PHP):
echo '
<div id="whois-response">
<pre>' .$str. '</pre>
</div>
<script>
(function($){
$(function(){
alert("loaded");
});
})(jQuery);
</script>
';
Try changing that to:
echo <<<EOD
<div id="whois-response">
<pre> $str </pre>
</div>
<script>
(function($){
$(function(){
alert("loaded");
});
})(jQuery);
</script>
EOD;
I think your AJAX response is a PHP error instead of the script you think it is returning.
Got it to work by adding jQuery staff as a function
function updatepage(str,responsediv){
document.getElementById(responsediv).innerHTML = str;
(function($){
$(function(){
$('html').my_jQuery_staff();
});
})(jQuery);
}
Main JavaScript file with jQuery:
// ~~ jQuery ~~
$(document).ready(function () {
$.fn.my_jQuery_staff= function() {
return this.each(function() {
// Include jQuery staff here.
});
};
$('html').my_jQuery_staff();
});

Resources