I cant render the google or any another page in my site using iframe. show the error Refused to display 'https://www.google.co.in/ in a frame because it set 'X-Frame-Options' to 'sameorigin'.
You can use this solution:
<html>
<head>
</head>
<body>
<iframe src="http://google.co.in" width="800" height="500"></iframe>
<script>
var iframe = document.getElementsByTagName('iframe')[0];
var url = iframe.src;
var getData = function (data) {
if (data && data.query && data.query.results && data.query.results.resources && data.query.results.resources.content && data.query.results.resources.status == 200) loadHTML(data.query.results.resources.content);
else if (data && data.error && data.error.description) loadHTML(data.error.description);
else loadHTML('Error: Cannot load ' + url);
};
var loadURL = function (src) {
url = src;
var script = document.createElement('script');
script.src = 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20data.headers%20where%20url%3D%22' + encodeURIComponent(url) + '%22&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=getData';
document.body.appendChild(script);
};
var loadHTML = function (html) {
iframe.src = 'about:blank';
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html.replace(/<head>/i, '<head><base href="' + url + '"><scr' + 'ipt>document.addEventListener("click", function(e) { if(e.target && e.target.nodeName == "A") { e.preventDefault(); parent.loadURL(e.target.href); } });</scr' + 'ipt>'));
iframe.contentWindow.document.close();
}
loadURL(iframe.src);
</script>
</body>
</html>
Source: http://jsfiddle.net/2gou4yen/
I am using autocomplete to get suggestions from multiple sources and show them as one list in the UI. When I am typing, the suggestions show up, but when I hover over a suggestion I get an error "TypeError: n is undefined". When I click a suggestion I get an error "ui.item is undefined".
The HTML page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Autocomplete with Multiple Search Engines Suggestions</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$.widget( "custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function( ul, items ) {
var self = this, currentCategory = "";
$.each( items, function( index, item ) {
if ( item.category != currentCategory ) {
ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
currentCategory = item.category;
}
self._renderItem( ul, item );
});
}
});
$(function(){ //page load
$("#q").focus(); //set focus to search field
$("#q").catcomplete({
source:"suggest.php",
minLength:2,
delay:10,
select: function(event, ui) {
window.location.assign(ui.item.searchUrl + ui.item.label);
//document.getElementById("q").value = ui.item.label
//$("#q").val(ui.item.value);
//$("#searchform").submit();
}
});
});
</script>
<style type="text/css">
.ui-autocomplete-category {
font-weight: bold;
font-size: 1em;
padding: .2em .2em;
margin: .4em 0 .2em;
line-height: 1.5;
color: #069;
border-bottom: 2px solid #069;
}
li.ui-autocomplete-category {
list-style-type: none;
}
</style>
</head>
<body>
<form id="searchform" name="form1" method="get" action="http://www.google.com/search">
Search:
<input name="q" id="q" type="text" size="40" />
<input name="submit" type="submit" value="Search" />
</form>
</body>
</html>
The PHP-script:
<?php
//Search term
$term = $_REQUEST['term'];
//Search Engine array
$searchEngines = array(
"Google" => array("http://suggestqueries.google.com/complete/search?output=firefox&client=firefox&q=", "http://www.google.com/search?q="),
//"Bing" => array("http://api.bing.com/osjson.aspx?query=", "http://www.bing.com/search?q="),
//"Yahoo" => array("http://ff.search.yahoo.com/gossip?output=fxjson&command=", "http://search.yahoo.com/search?p="),
"Wikipedia" => array("http://en.wikipedia.org/w/api.php?action=opensearch&search=", "http://en.wikipedia.org/w/index.php?title=Special%3ASearch&search="),
//"Ebay" => array("http://anywhere.ebay.com/services/suggest/?q=", "http://shop.ebay.com/i.html?_nkw="),
"Amazon" => array("http://completion.amazon.com/search/complete?search-alias=aps&client=amazon-search-ui&mkt=1&q=", "http://www.amazon.com/s/field-keywords=")
);
//Combine Search Results
$searchArray = array();
foreach($searchEngines as $engine => $urls){
$url = $urls[0] . rawurlencode($term);
try{
//$json = file_get_contents($url);
$json = get_url_contents($url);
$array = json_decode($json);
$array = $array[1]; //$array[1] contains result list
if(count($array) > 0){
$array = getFormattedArray($array, $engine, $urls[1]);
$searchArray = array_merge($searchArray, $array );
}
} catch (Exception $e){ /* Skip the exception */ }
}
//Output JSON
header('content-type: application/json; charset=utf-8');
echo json_encode($searchArray); //Convert array to JSON object
//Format array to add category (search engine name)
function getFormattedArray($array, $engine, $searchUrl){
$newArray = array();
foreach($array as $a){
$newArray[] = array('label' => $a, 'searchUrl' => $searchUrl, 'category' => $engine);
}
return $newArray;
}
//Read URL contents
function get_url_contents($url)
{
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 5);
$ip=rand(0,255).'.'.rand(0,255).'.'.rand(0,255).'.'.rand(0,255);
curl_setopt($ch, CURLOPT_HTTPHEADER, array("REMOTE_ADDR: $ip", "HTTP_X_FORWARDED_FOR: $ip"));
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/".rand(3,5).".".rand(0,3)." (Windows NT ".rand(3,5).".".rand(0,2)."; rv:2.0.1) Gecko/20100101 Firefox/".rand(3,5).".0.1");
$html = curl_exec($ch);
curl_close($ch);
return $html;
}
?>
I am adding this as a comment, not an answer, for the moment and I plan to update it as we get through the issue.
First, I was able to replicate your code and the error here: https://jsfiddle.net/xatu48sc/2/
I am using the regular (non minified) version. I encountered the error on Line 5836:
5826 item = ui.item.data( "ui-autocomplete-item" );
5827 if ( false !== this._trigger( "focus", event, { item: item } ) ) {
5828
5829 // use value to match what will end up in the input, if it was a key event
5830 if ( event.originalEvent && /^key/.test( event.originalEvent.type ) ) {
5831 this._value( item.value );
5832 }
5833 }
5834
5835 // Announce the value in the liveRegion
5836 label = ui.item.attr( "aria-label" ) || item.value;
5837 if ( label && $.trim( label ).length ) {
5838 this.liveRegion.children().hide();
5839 $( "<div>" ).text( label ).appendTo( this.liveRegion);
5840 }
The error I see is:
TypeError: item is undefined jquery-ui.js (line 5836, col 13)
This tells us that item is not defined, thus item.value is undefined, and so I included the code before where it's initiated. This will point us back to your custom widget to render categories.
When I compare that to the example at https://jqueryui.com/autocomplete/#categories I can see a number of differences. There is no _create method and in the _renderMenu method, there is no li defined for items.
Somewhere in here is where the problem lies.
I have also found that this error is only thrown for items that have no category.
UPDATE
I found the issue in your code by using a Text Compare site. Here is the issue:
self._renderItem( ul, item );
The command in the example page is:
li = that._renderItemData( ul, item );
It's not using _renderItem(), but what appears to be an undocumented extension point: _renderItemData()
Base on this: Difference between jQuery autocomplete renderItem and renderItemData you are using the extension point correctly.
When I make this minor change to your code, it works without error:
$.widget("custom.catcomplete", $.ui.autocomplete, {
_renderMenu: function(ul, items) {
var self = this, currentCategory = "";
$.each(items, function(index, item) {
var li;
if (item.category != currentCategory) {
ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
currentCategory = item.category;
}
li = self._renderItemData(ul, item);
});
}
});
Working example: https://jsfiddle.net/xatu48sc/6/
I suspect there is a scope issue between the two. If this is not good and you really want to use _renderItem() then I can look into it. Using _renderItemData() does work.
How to upload multiple images in code ignite r. Please any body shear code .
this is my code to upload a file which is written in a controller.Please any body suggest what is wrong with this code.
function do_upload_slider()
{
$this->load->library('upload');
$files = $_FILES;
echo $cpt = count($_FILES['userfile']['name']);
for($i=0; $i<$cpt; $i++)
{
$_FILES['userfile']['name']= $files['userfile']['name'][$i];
$_FILES['userfile']['type']= $files['userfile']['type'][$i];
$_FILES['userfile']['tmp_name']= $files['userfile']['tmp_name'][$i];
$_FILES['userfile']['error']= $files['userfile']['error'][$i];
$_FILES['userfile']['size']= $files['userfile']['size'][$i];
$this->upload->initialize($this->set_upload_options());
$this->upload->do_upload_slider();
}
}
private function set_upload_options()
{
// upload an image options
$config = array();
$config['upload_path'] = './uploads/slider/';
$config['allowed_types'] = 'gif|jpg|png|jpeg';
$config['max_size'] = '2048000';
$config['overwrite'] = TRUE;
return $config;
}
try this one.it may be help you
uploadform_view.php.
<html>
<head>
<title>Upload Form</title>
</head>
<body>
<?php echo form_open_multipart('imageupload/doupload');?>
<input name="userfile[]" id="userfile" type="file" multiple="" />
<input type="submit" value="upload" />
<?php echo form_close() ?>
</body>
</html>
Create A New Controller: controllers/imageupload.php
class Imageupload extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->helper(array('form', 'url'));
}
function index()
{
$this->load->view('imageupload_view', array('error' => ' ' ));
}
function doupload() {
$name_array = array();
$count = count($_FILES['userfile']['size']);
foreach($_FILES as $key=>$value)
for($s=0; $s<=$count-1; $s++) {
$_FILES['userfile']['name']=$value['name'][$s];
$_FILES['userfile']['type'] = $value['type'][$s];
$_FILES['userfile']['tmp_name'] = $value['tmp_name'][$s];
$_FILES['userfile']['error'] = $value['error'][$s];
$_FILES['userfile']['size'] = $value['size'][$s];
$config['upload_path'] = './uploads/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = '100';
$config['max_width'] = '1024';
$config['max_height'] = '768';
$this->load->library('upload', $config);
$this->upload->do_upload();
$data = $this->upload->data();
$name_array[] = $data['file_name'];
}
$names= implode(',', $name_array);
/* $this->load->database();
$db_data = array('id'=> NULL,
'name'=> $names);
$this->db->insert('testtable',$db_data);
*/ print_r($names);
}
}
And that is it. Customize it to your needs, the basics are there already. And good luck!
I am developing a gadget (html, JS) to run inside Google Calendar page. My OAUTH authorization
works fine but only for 1 hour. If I repeat the same request every 5 minutes, I have good results for 1 hour, and then I get "[500]Internal server error" forever. The reason is a bad token. I get a new one after 1 hour (I can see it with console.log(shindig.auth.getSecurityToken()) and on Network tab (makeRequest details, Form data, st)), but it causes "[500]Internal Server Error". The situation stays the same after 2 hours: I get new token, but it causes "[500]Internal Server Error". What am I doing wrong?
<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="test_gadget">
<Require feature="opensocial-0.8" />
<Require feature="locked-domain"/>
<Require feature='auth-refresh'/>
<OAuth>
<Service name="google">
<Access url="https://www.google.com/accounts/OAuthGetAccessToken" method="GET" />
<Request url="https://www.google.com/accounts/OAuthGetRequestToken?scope=https://www.googleapis.com/auth/tasks" method="GET" />
<Authorization url="https://www.google.com/accounts/OAuthAuthorizeToken?oauth_callback=http://oauth.gmodules.com/gadgets/oauthcallback" />
</Service>
</OAuth>
</ModulePrefs>
<Content type="html">
<![CDATA[
<!-- shindig oauth popup handling code -->
<!-- <script src="http://gadget-doc-examples.googlecode.com/svn/trunk/opensocial-gadgets/popup.js"></script> -->
<script type="text/javascript" src="https://rawgit.com/Appiens/daybyday_gadget/master/javascript/shindig.js"></script>
<script type="text/javascript">
var requestInterval = 5 * 60 * 1000;
var timerFetch = -1;
var API_KEY = 'AIzaSyCuKllVMlv0ENk8Skg8_-IKM1Cs9GeL-NU';
function fetchData() {
var params = {};
url = "https://www.googleapis.com/tasks/v1/users/#me/lists?key=" + API_KEY;
params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.JSON;
params[gadgets.io.RequestParameters.AUTHORIZATION] = gadgets.io.AuthorizationType.OAUTH;
params[gadgets.io.RequestParameters.OAUTH_SERVICE_NAME] = "google";
params[gadgets.io.RequestParameters.OAUTH_USE_TOKEN] = "always";
params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET;
gadgets.io.makeRequest(url, OnFetchData, params);
}
function OnFetchData(response) {
var d = new Date();
var token = shindig.auth.getSecurityToken();
if (response.oauthApprovalUrl) {
var popup = shindig.oauth.popup({
destination: response.oauthApprovalUrl,
windowOptions: null,
onOpen: function() { showOneSection('waiting'); },
onClose: function() { fetchData(); }
});
var personalize = document.getElementById('personalize');
personalize.onclick = popup.createOpenerOnClick();
var approvaldone = document.getElementById('approvaldone');
approvaldone.onclick = popup.createApprovedOnClick();
showOneSection('approval');
}
else if (response.data) {
console.log(d + ' ' + token);
var taskLists = [];
taskLists = response.data.items;
for(var i=0; i< taskLists.length; i++) {
console.log(taskLists[i].title);
}
if (document.getElementById('main').style.display = 'none') {
showOneSection('main');
}
}
else {
console.log(d + ' ' + token);
console.log( JSON.stringify(response));
if (document.getElementById('main').style.display = 'none') {
showOneSection('main');
}
}
timerFetch = setTimeout(fetchData , requestInterval);
}
function showOneSection(toshow) {
var sections = [ 'main', 'approval', 'waiting'];
for (var i=0; i < sections.length; ++i) {
var s = sections[i];
var el = document.getElementById(s);
if (s === toshow) {
el.style.display = "block";
} else {
el.style.display = "none";
}
}
}
gadgets.util.registerOnLoadHandler(fetchData);
</script>
<div id="main" style="display: none;">
</div>
<div id="approval" style="display: none">
Personalize this gadget
</div>
<div id="waiting" style="display: none">
Please click
I've approved access
once you've approved access to your data.
</div>
]]>
</Content>
</Module>
I am not understanding how should I carry on to Preview an image before it is
being saved to database in yii using jquery or any method that you can suggest
view
<img id="preview_image"
src="images/<?php echo $model->pimg; ?>"
width="150px" height="120px"/>
<?php echo $form->labelEx($model,'pimg'); ?>
<?php echo $form->fileField($model, 'pimg',array('change'=>preview(this));); ?>
<?php echo $form->error($model,'pimg'); ?>
the jquery code
function preview(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#preview_image')
.attr('src', e.target.result)
.width(100)
.height(120);
};
reader.readAsDataURL(input.files[0]);
}
}
Fatal error to function call preview().
How should I integrate this Jquery function in above form ....... $form has the htmlOptions
PLEASE HELP! I am new to Yii and am loosing my mind on this. Thank you.
This bellow code shows the image preview using jQuery
var imageTypes = ['jpeg', 'jpg', 'png']; //Validate the images to show
function showImage(src, target)
{
var fr = new FileReader();
fr.onload = function(e)
{
target.src = this.result;
};
fr.readAsDataURL(src.files[0]);
}
var uploadImage = function(obj)
{
var val = obj.value;
var lastInd = val.lastIndexOf('.');
var ext = val.slice(lastInd + 1, val.length);
if (imageTypes.indexOf(ext) !== -1)
{
var id = $(obj).data('target');
var src = obj;
var target = $(id)[0];
showImage(src, target);
}
else
{
}
}
And your HTML should be
<input type="file" name="image" onchange="uploadImage(this)" data-target="#aImgShow" />
<img id="aImgShow" src="" class="carImage" />