I am trying to show up book in laravel. When book 1st loads it shows 1st page of book.. but when I click bookmark button it reloads page but don't show book again. I am using pdf.js .
My Javascript function:
function pdf( count , scale)
{ console.log(count);
pdfjsLib.getDocument('../uploads/{{$book->file_path}}').then (doc => {
doc.getPage(count).then(page => {
var myCanvas=document.getElementById('my-canvas');
var context= myCanvas.getContext('2d');
const viewport = page.getViewport(scale);
myCanvas.height = viewport.height;
myCanvas.width = viewport.width;
page.render({
canvasContext: context,
viewport: viewport
});
});
});
}
function bookmark()
{
var url= '{{route('save_bookmark', ['b_id' => ':b_id', 'p_no' => ':p_no'])}}';
url = url.replace(':b_id', book);
url = url.replace(':p_no', count);
document.location.href = url;
}
My route:
Route::get("save_bookmark/{b_id}/{p_no}",'BookmarkController#create')->name('save_bookmark');
My controller:
public function create($b_id, $p_no)
{
$b=new bookmark;
$b->u_id=Auth::user()->id;
$b->book_id=$b_id;
$b->p_no=$p_no;
$b->save();
$b=Book::find($b_id);
return view('pages/readbook')->with('book', $b)->with('count',$p_no);
}
Everything is working fine when book 1st opens but after bookmark click it is not finding up book.. I have tested that book and count variables are well recieved.
Error:
GET http://localhost/BookLibrary/public/save_bookmark/uploads/51312.pdf 500 (Internal Server Error)
Any suggestions??
Related
I’m building a connector for Teams and I can get my custom configuration page to load by calling the necessary functions. I have a few <span> tags in my page just to debug and I'm populating the tags with properties from my call to "getSettings()".
<script>
microsoftTeams.initialize();
var teamsSettings = microsoftTeams.settings.getSettings(); //should this not return at least something?
if (teamsSettings == null) {
$(document).ready(function () {
document.getElementById('status').textContent = "Get settings
returned null!"; //i always get null
});
} else {
document.getElementById('entityId').textContent = teamsSettings.entityId;
document.getElementById('configName').textContent = teamsSettings.configName;
document.getElementById('contentUrl').textContent = teamsSettings.contentUrl;
document.getElementById('webhookUrl').textContent = teamsSettings.webhookUrl;
document.getElementById('appType').textContent = teamsSettings.appType;
document.getElementById('userObjectId').textContent = teamsSettings.userObjectId;
}
microsoftTeams.settings.registerOnSaveHandler(function (saveEvent) {
saveEvent.notifySuccess();
});
function onClick() {
microsoftTeams.settings.setValidityState(true);
}
</script>
So I’m wondering if the getSettings() method is even running as my label element is blank. How can I troubleshoot the JavaScript interactions while configuring my connector in Teams? Is there a better way to view settings obtained from the method?
Here is the code snippet to get the webhookUrl using getSettings().
microsoftTeams.initialize();
microsoftTeams.settings.getSettings(function (settings) {
document.getElementById('webhookUrl').textContent = settings.webhookUrl;
});
I am trying to click on the submit button in a login screen, only if the button text shows "Next". In the last line below, I am getting the error - "Cannot read property 'submit' of undefined". I think I am not resolving promise properly in the page object. I'd appreciate it if someone could help suggest a solution..
//Login Page object
var LoginPage = function () {
this.email = element(by.model('loginCtrl.username'));
this.password = element(by.model('loginCtrl.password'));
this.submit = element(by.css('[ng-click="loginCtrl.login()"]'));
this.get = function(){
browser.get('/#/login');
};
this.login = function () {
this.email.clear();
this.email.sendKeys(browser.params.login.user);
this.submit.getText().then(function (text) {
if (text == "Next") {
//***ERROR below.
//***Cannot read property 'submit' of undefined
this.submit.click();
}
});
In this case, when inside the then() function, the this is not pointing to your page object anymore. A common approach is to create a reference to the page object in the outer scope:
this.login = function () {
this.email.clear();
this.email.sendKeys(browser.params.login.user);
var self = this;
this.submit.getText().then(function (text) {
if (text == "Next") {
self.submit.click();
}
});
}
I'm trying to capture the page load time using casperjs. The page in question is login protected. Here is what I have so far:
var casper = require('casper').create();
// Enter the login page, fill up the form and submit it
casper.start('https://example.net/login', function () {
// Fill the form
this.fill('form[name=signin]', {
'user': 'username',
'passwd': 'password'
}, false);
// Submit the form by clicking the submit button
this.then(function() {
this.click('#sign_in');
});
});
// Now on the loggedin page click the link of page for which response time is needed
casper.then (function() {
var start = Date.now();
this.click ('#pageLink');
// Measure response time of this page
var end = Date.now();
this.echo (end - start);
});
casper.run();
I can pretty much tell it's the wrong approach because I should perhaps wait for the page to load and then capture the end time. But on the casper js documentation page, I did not find any thing that lets me know when the page has loaded fully. Would it make sense to look for the closing tag and see if that has loaded ?
You should use the events : here an example :
(function(){
"use strict";
var s
,e
;
//we use casper events to calculate the time between a http request and its response
casper.on('page.resource.requested', function(requestData, request) {
//console.log("request url " + requestData.url);
s = new Date().getTime();
});
casper.on('page.resource.received', function(response) {
//console.log("response url " + response.url);
e = new Date().getTime();
casper.echo("Time between HTTP request and HTTP response : " + (e-s) + "ms","INFO");
});
})();//then your code
I use an IIFE just to create a scope for var s (start) and e (end).
For what you want, you could do the same with load.started and load.finished.
http://casperjs.readthedocs.org/en/latest/events-filters.html
But there are better tools to do that, Casper isn't that good for monitoring.
I've this code to load content in a div #target with some animation. Works fine but i don't know how implement code to change link and url with #hash!
How can I do this?
the code:
$(document).ready(function(){
$("#target").addClass('hide');
$('.ajaxtrigger').click(function() {
var pagina = $(this).attr('href');
if ($('#target').is(':visible')) {
}
$("#target").removeClass('animated show page fadeInRightBig').load(pagina,
function() {
$("#target").delay(10).transition({ opacity: 1 })
.addClass('animated show page fadeInRightBig');
}
);
return false;
});
});
Try to use any javascript router. For example, router.js.
Modify you code like this(I didn't check if this code work, but I think idea should be clear):
$(document).ready(function(){
var router = new Router();
//Define route for your link
router.route('/loadpath/:href', function(href) {
console.log(href);
if ($('#target').is(':visible')) {
$("#target").removeClass('animated show page fadeInRightBig').load(href,
function() {
$("#target").delay(10).transition({ opacity: 1 })
.addClass('animated show page fadeInRightBig');
}
);
}
});
router.route('', function(){ console.log("default route")});
$("#target").addClass('hide');
// Instead of loading content in click handler,
// we just go to the url from href attribute with our custom prefix ('/loadpath/').
// Router will do rest of job for us. It will trigger an event when url hash is
// changes and will call our handler, that will load contents
// from appropriate url.
$('.ajaxtrigger').click(function() {
router.navigate('/loadpath/' + $(this).attr('href'));
return false;
});
});
Preface: I am sure this is incredibly simple, but I have searched this site & the jQuery site and can't figure out the right search term to get an answer - please excuse my ignorance!
I am adding additional form fields using jQuery's ajax function and need to then apply additional ajax functions to those fields but can't seem to get jQuery to monitor these on the fly form fields.
How can I get jQuery to use these new fields?
$(document).ready(function() {
$('#formField').hide();
$('.lnk').click(function() {
var t = this.id;
$('#formField').show(400);
$('#form').load('loader.php?val=' + t);
});
//This works fine if the field is already present
var name = $('#name');
var email = $('#email');
$('#uid').keyup(function () {
var t = this;
if (this.value != this.lastValue) {
if (this.timer) clearTimeout(this.timer);
this.timer = setTimeout(function () {
$.ajax({
url: 'loader.php',
data: 'action=getUser&uid=' + t.value,
type: 'get',
success: function (j) {
va = j.split("|");
displayname = va[1];
mail = va[2];
name.val(displayname);
email.val(mail);
}
});
}, 200);
this.lastValue = this.value;
}
});
});
So if the is present in the basic html page the function works, but if it arrives by the $.load function it doesn't - presumably because $(document).ready has already started.
I did try:
$(document).ready(function() {
$('#formField').hide();
$('.lnk').click(function() {
var t = this.id;
$('#formField').show(400);
$('#form').load('loader.php?val=' + t);
prepUid();
});
});
function prepUid(){
var name = $('#name');
var email = $('#email');
$('#uid').keyup(function () {
snip...........
But it didn't seem to work...
I think you are close. You need to add your keyup handler once the .load call is complete. Try changing this...
$('#form').load('loader.php?val=' + t);
prepUid();
To this...
$('#form').load('loader.php?val=' + t, null, prepUid);
What you are looking for is the jquery live function.
Attach a handler to the event for all elements which match the current selector, now or in the future
You can do something like this:
$('.clickme').live('click', function() {// Live handler called.});
and then add something using the DOM
$('body').append('<div class="clickme">Another target</div>');
When you click the div added above it will trigger the click handler as you expect with statically loaded dom nodes.
You can read more here: http://api.jquery.com/live/