Hello i want to make a dynamic slider with bootstrap but my pics is not in the slider. Each one is showing line by line. How can i add the $output with foreach function's PHP ? Thank you for your help.
function make_slides( $connexion ) {
global $data_projet;
$dir = '../../00_sources/img/upload/' . $data_projet . '/mockups/';
$images = glob( $dir . "*" );
foreach ( $images as $image );
$output = '';
$count = 0;
$result = make_query( $connexion );
while ( $row = mysqli_fetch_array( $result ) ) {
$data_projet = $row[ 'projet_nom' ];
if ( $count == 0 ) {
$output .= '<div class="carousel-item active">';
} else {
$output .= '<div class="carousel-item">';
}
foreach ( $images as $image ){
echo '<img class="d-block w-100" src="'.$image.'" alt="' . $image . '" />';
}
$output .='</div>
';
$count = $count + 1;
}
return $output;
}
i've tried something else and it works now.
I am just learning the basics of Google´s API 0auth authentication sign-in system.
I'm using this tutorial found on CodexWorld. Although this one worked out, it uses an ugly picture instead of a "real" google sign-in button (from the g-signin2 class), and that´s something I personally just can´t get over.
I tried replaced the picture with that button and added the required metas to work with it. But now it opened 2 windows, not only 1 through the php.
How can i prevent the second window, opened by the g-signin2-button, from opening?
Thanks for all your help!
VicStudio
Here´s the modified code by me. Notice how I replaced the picture button with a real google-signin2 button and added the required metas.
<?php
//Include GP config file && User class
include_once 'gpConfig.php';
include_once 'classuser.php';
if(isset($_GET['code'])){
$gClient->authenticate($_GET['code']);
$_SESSION['token'] = $gClient->getAccessToken();
header('Location: ' . filter_var($redirectURL, FILTER_SANITIZE_URL));
}
if (isset($_SESSION['token'])) {
$gClient->setAccessToken($_SESSION['token']);
}
if ($gClient->getAccessToken()) {
//Get user profile data from google
$gpUserProfile = $google_oauthV2->userinfo->get();
//Initialize User class
$user = new User();
//Insert or update user data to the database
$gpUserData = array(
'oauth_provider'=> 'google',
'oauth_uid' => $gpUserProfile['id'],
'email' => $gpUserProfile['email'],
'link' => $gpUserProfile['link']
);
$userData = $user->checkUser($gpUserData);
//Storing user data into session
$_SESSION['userData'] = $userData;
//Render facebook profile data
if(!empty($userData)){
$output = '<h1>Google+ Profile Details </h1>';
$output .= '<br/>Google ID : ' . $userData['oauth_uid'];
$output .= '<br/>Email : ' . $userData['email'];
$output .= '<br/>Logged in with : Google';
$output .= '<br/>Click to Visit Google+ Page';
$output .= '<br/>Logout from Google';
}else{
$output = '<h3 style="color:red">Some problem occurred, please try again.</h3>';
}
} else {
//New, modified code:
$authUrl = $gClient->createAuthUrl();
$authUrl = filter_var($authUrl, FILTER_SANITIZE_URL);
$output = "<div class='g-signin2' data-onsuccess='onSignIn' id='glog'></div> <script>document.getElementById('glog').onclick = function () { window.location.href = '".$authUrl."'; } </script>";
//Original Code:
// $authUrl = $gClient->createAuthUrl();
// $output = '<img src="images/glogin.png" alt=""/>';
}
?>
<html>
<head>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="246194741577-gajd75di0cam2j9u4q69l9trvg88hqkc.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<div><?php echo $output; ?></div>
</body>
</html>
I'm looking to show a little pin image next to the column name on columns that are pinned just so it's more obvious.
I'm already using a custom header as I show a menu icon for each column that gives functionality per column, but not sure how to tell if the column is pinned and then display an image when pinned.
Here is my current custom header:
var newValuesColumnHeaderTemplate = '<div role="columnheader"' +
' ng-class="{ \'sortable\': sortable }"' +
' ui-grid-one-bind-aria-labelledby-grid="col.uid + \'-header-text \' + col.uid + \'-sortdir-text\'"' +
' aria-sort="{{col.sort.direction == asc ? \'ascending\' : ( col.sort.direction == desc ? \'descending\' : (!col.sort.direction ? \'none\' : \'other\'))}}">' +
' <div class="list-icon">' +
' <span class="glyphicon glyphicon-list" ng-click="grid.appScope.editOptionValues(col.field)"></span>' +
' </div>' +
'' +
' <div role="button"' +
' tabindex="-1"' +
' style="padding-left:15%"' +
' class="ui-grid-cell-contents ui-grid-header-cell-primary-focus"' +
' col-index="renderIndex"' +
' title="TOOLTIP">' +
' <span class="ui-grid-header-cell-label"' +
' ui-grid-one-bind-id-grid="col.uid + \'-header-text\'">' +
' {{ col.displayName CUSTOM_FILTERS }}' +
' </span>' +
' <span ui-grid-one-bind-id-grid="col.uid + \'-sortdir-text\'"' +
' ui-grid-visible="col.sort.direction"' +
' aria-label="{{getSortDirectionAriaLabel()}}">' +
' <i ng-class="{ \'ui-grid-icon-up-dir\': col.sort.direction == asc, \'ui-grid-icon-down-dir\': col.sort.direction == desc, \'ui-grid-icon-blank\': !col.sort.direction }"' +
' title="{{col.sort.priority ? i18n.headerCell.priority + \' \' + col.sort.priority : null}}"' +
' aria-hidden="true">' +
' </i>' +
' <sub class="ui-grid-sort-priority-number">' +
' {{}}' +
' </sub>' +
' </span>' +
' </div>' +
' <div role="button"' +
' tabindex="-1"' +
' ui-grid-one-bind-id-grid="col.uid + \'-menu-button\'"' +
' class="ui-grid-column-menu-button"' +
' ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false"' +
' ng-click="toggleMenu($event)"' +
' ng-class="{\'ui-grid-column-menu-button-last-col\': isLastCol}"' +
' ui-grid-one-bind-aria-label="i18n.headerCell.aria.columnMenuButtonLabel"' +
' aria-haspopup="true">' +
' <i class="ui-grid-icon-angle-down"' +
' aria-hidden="true">' +
' ' +
' </i>' +
' </div>' +
' <div ui-grid-filter></div>' +
'</div>';
One way around this may be to target the pinned columns via CSS, e.g. (assuming FontAwesome has been referenced for images):
.ui-grid-pinned-container .ui-grid-header-cell {
position: relative;
}
.ui-grid-pinned-container .ui-grid-header-cell:after {
position: absolute;
font-family: 'FontAwesome';
content: '\f08d'; // fa-thumb-tack
font-size: .75em;
right: 2em;
top: 0.5em;
width: 1em;
height: 1em;
}
See: http://plnkr.co/edit/RU4KnysM6s0aeYzI3KYJ?p=preview
I have written
1) scripts using datatable.js to show data
2) autocomplete method
PortletDraggable.init();
FormFileUpload.init();
EducationalQualification.init();
WorkExperience.init();
Supervisions.init();
Awards.init();
Publication.init();
All these are datatable methods working properly. But when I add jquery.auto-complete.js script reference, these methods stop working and autocomplete start working.
Where is the problem, please suggest.
<script>
$('.date-picker').datepicker({
format: 'mm/dd/yyyy'
});
// var oTable = null;
jQuery(document).ready(function () {
App.init();
PortletDraggable.init();
FormFileUpload.init();
EducationalQualification.init();
WorkExperience.init();
Supervisions.init();
Awards.init();
Publication.init();
});
var tmpMem = 0; var tmpAward = 0; var tmpPub = 0;
// Js For Autocomplete
$('input[name=SearchUser]').autocomplete({
source: function (request, response) {
tmpMem = 0; tmpAward = 0; tmpPub = 0;
$.ajax({
type: 'GET',
url: '#Url.Action("SearchUser", "Profile")',
data: { FirstName: $("#SearchUser").val() },
// url: "/Profile/SearchUser?FirstName=" + $("#SearchUser").val(),
contentType: "application/json; charset=utf-8",
// dataType: "json",
beforeSend: function () {
// code to show loading image
//$(".ui-content").css("opacity", "0.4");
//$("#imgLoader").attr("style", "display:block");
//var df = document.getElementById('imgLoader');
//df.style.position = 'absolute';
//var wd = ($(window).width() / 2) - 45;
//var hg = ($(window).height() / 2) - 60;
//df.style.left = wd + "px";
//df.style.top = hg + "px";
},
complete: function () {
//hide loading image
$(".ui-content").css("opacity", "1.0");
$("#imgLoader").attr("style", "display:none");
},
success: function (data) {
alert(data.data[0].Fname);
response($.map(data.data, function (item) {
return {
Sn: item.Sn, Fname: item.Fname, Mname: item.Uname, Lname: item.Lname, Title: item.Title,
Image: item.Image, Organization: item.Organization, JobTitle: item.JobTitle,
Awardname: item.Awardname, AwardYear: item.AwardYear, Pubname: item.Pubname, Pubtype: item.Pubtype, TabType: item.TabType
}
}))
}
})
},
select: function (event, ui) {
//var domainURL = $("#domainurl").val();
//window.location = domainURL + "/home/NeighborProfile?id=" + ui.item.id;
// alert(ui.item.Sn);
}
}).data("autocomplete")._renderItem = function (ul, item) {
// alert(item);="
if (item.TabType == "member") {
if (tmpMem == 0) {
tmpMem = 1;
return $("<li class='SearchUserLi'></li>").data("item.autocomplete", item).append(
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + item.JobTitle + "</span>" +
"</a>"
).prepend("<span class='SearchUsercategory'> Members </span>").appendTo(ul);
}
return $("<li class='SearchUserLi'></li>").data("item.autocomplete", item).append(
"<hr class='SearchUserHr'>" +
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + item.JobTitle + "</span>" +
"</a>"
).appendTo(ul);
}
else if (item.TabType == "award") {
if (tmpAward == 0) {
tmpAward = 1;
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Awardname + "(" + item.AwardYear + ")" + "</span>" +
"</a>"
).prepend("<span class='SearchUsercategory'> Awards </span>").appendTo(ul)
}
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<hr class='SearchUserHr'>" +
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Awardname + "(" + item.AwardYear + ")" + "</span>" +
"</a>"
).appendTo(ul);
}
else if (item.TabType == "publications") {
if (tmpPub == 0) {
tmpPub = 1;
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Pubname + "," + item.Pubtype + "</span>" +
"</a>"
).prepend("<span class='SearchUsercategory'> Publications </span>").appendTo(ul)
}
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<hr class='SearchUserHr'>" +
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Pubname + "," + item.Pubtype + "</span>" +
"</a>"
).appendTo(ul);
}
};
</script>
After you include jQuery, add the following in a script tag immediately after it. Hope this solves your problem.
jQuery.noConflict();
I'm not sure how your datepicker or autocomplete would work like this. They are both adding functionality to DOM elements when the DOM may not be ready. Try something like this:
<script>
var initFields = function() {
//Date Picker
$('.date-picker').datepicker({
format: 'mm/dd/yyyy'
});
//Autocomplete
var tmpMem = 0; var tmpAward = 0; var tmpPub = 0;
// Js For Autocomplete
$('input[name=SearchUser]').autocomplete({
source: function (request, response) {
tmpMem = 0; tmpAward = 0; tmpPub = 0;
$.ajax({
type: 'GET',
url: '#Url.Action("SearchUser", "Profile")',
data: { FirstName: $("#SearchUser").val() },
// url: "/Profile/SearchUser?FirstName=" + $("#SearchUser").val(),
contentType: "application/json; charset=utf-8",
// dataType: "json",
beforeSend: function () {
// code to show loading image
//$(".ui-content").css("opacity", "0.4");
//$("#imgLoader").attr("style", "display:block");
//var df = document.getElementById('imgLoader');
//df.style.position = 'absolute';
//var wd = ($(window).width() / 2) - 45;
//var hg = ($(window).height() / 2) - 60;
//df.style.left = wd + "px";
//df.style.top = hg + "px";
},
complete: function () {
//hide loading image
$(".ui-content").css("opacity", "1.0");
$("#imgLoader").attr("style", "display:none");
},
success: function (data) {
alert(data.data[0].Fname);
response($.map(data.data, function (item) {
return {
Sn: item.Sn, Fname: item.Fname, Mname: item.Uname, Lname: item.Lname, Title: item.Title,
Image: item.Image, Organization: item.Organization, JobTitle: item.JobTitle,
Awardname: item.Awardname, AwardYear: item.AwardYear, Pubname: item.Pubname, Pubtype: item.Pubtype, TabType: item.TabType
}
}))
}
})
},
select: function (event, ui) {
//var domainURL = $("#domainurl").val();
//window.location = domainURL + "/home/NeighborProfile?id=" + ui.item.id;
// alert(ui.item.Sn);
}
}).data("autocomplete")._renderItem = function (ul, item) {
// alert(item);="
if (item.TabType == "member") {
if (tmpMem == 0) {
tmpMem = 1;
return $("<li class='SearchUserLi'></li>").data("item.autocomplete", item).append(
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + item.JobTitle + "</span>" +
"</a>"
).prepend("<span class='SearchUsercategory'> Members </span>").appendTo(ul);
}
return $("<li class='SearchUserLi'></li>").data("item.autocomplete", item).append(
"<hr class='SearchUserHr'>" +
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + item.JobTitle + "</span>" +
"</a>"
).appendTo(ul);
}
else if (item.TabType == "award") {
if (tmpAward == 0) {
tmpAward = 1;
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Awardname + "(" + item.AwardYear + ")" + "</span>" +
"</a>"
).prepend("<span class='SearchUsercategory'> Awards </span>").appendTo(ul)
}
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<hr class='SearchUserHr'>" +
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Awardname + "(" + item.AwardYear + ")" + "</span>" +
"</a>"
).appendTo(ul);
}
else if (item.TabType == "publications") {
if (tmpPub == 0) {
tmpPub = 1;
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Pubname + "," + item.Pubtype + "</span>" +
"</a>"
).prepend("<span class='SearchUsercategory'> Publications </span>").appendTo(ul)
}
return $("<li style='padding:0px!important;height:80px'></li>").data("item.autocomplete", item).append(
"<hr class='SearchUserHr'>" +
"<a href=' ' class='SearchUserLink'>" +
"<img src='" + item.Image + "' alt='" + item.Fname + "' class='SearchUserImg'>" +
"<span class='searchUserLight'>" +
item.Title + ". " + item.Fname +
"<span style=' font-weight: bold;color:black'>" + " " + item.Organization + "</span>" +
"</span>" +
"<span style=' font-size : 10px; color: #3B5998;'>" + " " + item.Pubname + "," + item.Pubtype + "</span>" +
"</a>"
).appendTo(ul);
}
};
};
// var oTable = null;
jQuery(document).ready(function () {
App.init();
PortletDraggable.init();
FormFileUpload.init();
EducationalQualification.init();
WorkExperience.init();
Supervisions.init();
Awards.init();
Publication.init();
initFields();
});
</script>
If that doesn't work, then you may want to check what all JavaScript files you are including to ensure all their versions are compatible, and no two are defining the same functions/objects.
Rather than adding a single Autocomplete script reference, simply add jquery.ui complete bundle script reference. I had a similar problem, but after adding jquery.ui and removing autocomplete scripts, everything started to work fine. Hope it helps
i have trapped in a jquery function, all i want is to append some divs using jquery's append function, but the problem is that i want to put some if conditions in this function,
here is my working code without condition
$( "#some-div-container" ).append(
"<div>name 1" +
"<a href=\"#\">" +
"<div id=\"add\">Add</div>" +
"</a>" +
"<div>Available</div>" +
"</div>"
);
i am using jquery's ajax function having some json response, so i want just that, let say if(response == 1) then execute the code inside it, i am trying using condition,
$( "#some-div-container" ).append(
"<div>name 1"
if(response == 1) {
+"<a href=\"#\">" +
"<div id=\"add\">Add</div>" +
"</a>"
}
+ "<div>Available</div>" +
"</div>"
);
is it possible?
Any help will be appreciated, an error occured when i put this condition "my some other javascript function is not defined", works perfect without condition
Build your string beforehand, by using a variable:
var elements = "<div>";
if (someCondition) {
elements += "<a href='#'>some link</a>";
}
elements += "</div>";
Or, a more specific example:
var elements = "<div>name 1";
if(response == 1) {
elements +=
"<a href='#'>" +
"<div id='add'>Add</div>" +
"</a>";
}
elements += "<div>Available</div>";
elements += "</div>";
Then append the resulting string:
$("#some-div-container").append(elements);
You could acheive that in the following manner:
$('#some-div-container').append(
'<div>name 1' +
(response == 1 ? '<div id="add">Add</div>' : '') +
'<div>Available</div></div>'
);
Demo
But I think it would be neater to do something like this
var div = $('<div/>', { text: 'name 1' });
if(response == 1) {
div.append($('<a/>', { href: '#' }).append($('<div/>', { id: 'add', text: 'Add' })));
}
$('<div/>', { text: 'Available' }).appendTo(div);
div.appendTo('#some-div-container');
Demo
Try this :
$( "#some-div-container" ).append(
"<div>name 1"
+ (
response == 1 ?
"<a href=\"#\">" +
"<div id=\"add\">Add</div>" +
"</a>"
:
""
)
+ "<div>Available</div>" +
"</div>"
);
Create different strings based on the value of response, and do a single append() call with the conditioned string.
var html;
html += "<div>name 1";
if(response == 1) {
html += "<a href=\"#\">";
// other code.....
}
$( "#some-div-container" ).append( html );