|
|
You are welcome; and I learned something today. But I would suggest you talk to your lecturer about what we discovered.
|
|
|
|
|
Hi, i have created a favourite button which once clicked uses .append to add onto the favourites page the option clicked. I am having difficulties grabbing all the results on that page and displaying it in a textfield which can then be emailed. Below is what i got so far many thanks.
<!-- This is page 1-->
<div data-role="page" id="item1">
<!-- favourites button-->
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="favourite1" id="favourite1" class="custom">
<label for="favourite1">Add to favourites</label>
<div id="dog"><img id="theImg" src="images/dog.png" />Where is the image?</div>
</fieldset>
<!-- This is page 2-->
<div data-role="page" id="item2">
<div data-role="header" data-position="fixed"> <!-- header-->
<h1>Item 2</h1>
</div>
<!-- favourites button-->
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="favourite2" id="favourite2" class="custom">
<label for="favourite2">Add to favourites</label>
</fieldset>
<!-- Favourites page -->
<div data-role="page" id="favourites">
<div data-role="header" data-position="fixed"> <!-- header-->
<h1>Favourites</h1>
</div>
<div role="main" class="ui-content"> <!-- main contain-->
<h1>Favourites</h1>
<!-- buttons allowing navigation to item 1 and item 2-->
<a href="#item1" class="ui-btn ui-btn-inline">Item 1 page</a>
<a href="#item2" class="ui-btn ui-btn-inline">Item 2 page</a>
<div id="favourite-content"><p>My favourites: </p></div>
<div id="list"
<form action="mailto:@mail.com Feedback" method="post" enctype="text/plain">
Email Adress:<br />
<input type="text" id ="fav" name="email_address" value="" maxlength="100" /><br />
<input type="submit" value="Submit" />
</form>
</div>
$(document).on( 'pagecontainerbeforehide', 'body', function( event, ui){
//do something
if ( ui.nextPage.attr('id')== "favourites") {
$("#favourite-content").html ("");
if ($( "#favourite1" ).is( ":checked" )) {
$("#favourite-content").prepend('<img id="theImg" src="images/dog.png"/>');
}
if ($( "#favourite2" ).is( ":checked" )) {
$("#favourite-content").append("<p>item2 details</p>");
}
}
});
|
|
|
|
|
I've been searching around the web. Found indexedDB.open and tried it out. But I really need some sort of call back, or a promise when the PHP page has finished.
Below seems to work, but returns success right away and the spinner doesn't show.
Just looking for better ideas. Or maybe I can build on this. It's a start at least.
function saveWithProgress(stage) {
console.log("Save with Progress - Calling msrp.phtml");
const spinner = document.getElementById('spinnerOverlay');
if (stage == 'construction') {
let note = prompt('Please brief summary of changes - construction', '');
if (note != '' && note != null) {
spinner.classList.remove('hide');<br />
spinner.classList.add('show');
const cUrl = 'msrp.phtml?save=1&new_note=' + note + '&cachebuster=' + (new Date()).valueOf();
let openRequest = indexedDB.open(cUrl, 1);
openRequest.onsuccess = (event) => {
console.log('Save with Progress Construction - Success!');
var db = event.target.result;
console.log("Save with Progress Construction - ", db);
spinner.classList.remove('show');<br />
spinner.classList.add('hide');
};
openRequest.onerror = (error) => {
console.log('Save with Progress Construction - ', error);
};
}
}
else
{
if (confirm('Are you sure that you want to save the changes? - everything but construction')) {
spinner.classList.remove('hide');<br />
spinner.classList.add('show');
const saveUrl = 'msrp.phtml?save=1&cachebuster=' + (new Date()).valueOf();
let openRequest = indexedDB.open(saveUrl, 1);
openRequest.onsuccess = (event) => {
console.log('Save with Progress - Success!');
var db = event.target.result;
console.log("Save with Progress - ", db);
spinner.classList.remove('show');<br />
spinner.classList.add('hide');
};
openRequest.onerror = (error) => {
console.log('Save with Progress Construction - ', error);
};
}
}
return false;
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
the "onsuccess" and "onerror" functions are your callbacks. IndexedDB is asynchronous; see IDBFactory.open() - Web APIs | MDN for how to define those callback functions.
Have you tried stepping through your code in the browser's debugger? The "open" call is likely to complete so fast that you won't see the spinner appear/disappear if you run in "real time".
|
|
|
|
|
I'm using Visual Code for this PHP 4.3 App, and I don't have the database available locally. I have to work off a remote server, edit here and copy to there and then run the program.
I figured open just opens the file, and success confirms that the file was opened as a call back. I was looking for a call back for when the file was done executing.
I guess I can try a setting a var, which is suppose to be beyond block level and see if the file I'm calling can see the var and alter the value, or something like that. Or maybe build a promise.
Spent all day yesterday building the spinner, CSS and testing it to run in frames and out of frames and reverse engineering of how this thing works. Was pretty brain dead by the time I got to this.
Thanks for the lead however, I'll run with it and see where it goes.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
The "open" method simply creates a connection to the database, your code as shown above is not (yet) running anything (in terms of saving or retrieving data). You've not told us what you're trying to achieve, but the documentation does include a number of examples that should guide you through what you need. I suspect you may (a) be overcomplicating things, and/or (b) be expecting things to take much longer than they actually will.
|
|
|
|
|
The PHP page will access the SQL server database, read values, crunch the numbers, and write values.
The PHP page also updates HTML in a value container on the presentation layer. Not sure how I'm going to handle that.
The purpose is to let the user know that work is being done; obvious, but the old method was to open a browser window with a progress spinner and close it using this copied from the internet back in 2005.
I get what it does, but it seems over complicated to me.
(function() {
window.spawn = window.spawn || function(gen) {
function continuer(verb, arg) {
let result;
try {
result = generator[verb](arg);
}
catch (err) {
return Promise.reject(err);
}
if (result.done) {
return result.value;
} else {
return Promise.resolve(result.value).then(onFulfilled, onRejected);
}
}
let generator = gen();
let onFulfilled = continuer.bind(continuer, 'next');
let onRejected = continuer.bind(continuer, 'throw');
return onFulfilled();
};
window.showModalDialog = window.showModalDialog || function(url, arg, opt) {
url = url || '';
arg = arg || null;
opt = opt || 'dialogWidth:300px;dialogHeight:300px';
let caller = showModalDialog.caller.toString();
let dialog = document.body.appendChild(document.createElement('dialog'));
dialog.setAttribute('style', opt.replace(/dialog/gi, ''));
dialog.innerHTML = '<input class="btn-primary" type="button" id="dialog-close" value="Continue" style="position: absolute; top: 2px; right: 4px; font-size: 20px; color: #000; text-decoration: none; outline: none;"><iframe id="dialog-body" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe>';
document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
document.getElementById('dialog-close').addEventListener('click', function(e) {
e.preventDefault();
dialog.close();
});
if (caller.indexOf('yield') >= 0) {
return new Promise(function(resolve, reject) {
dialog.addEventListener('close', function() {
var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
document.body.removeChild(dialog);
resolve(returnValue);
});
});
}
var isNext = false;
var nextStmts = caller.split('\n').filter(function(stmt) {
if (isNext || stmt.indexOf('showModalDialog(') >= 0)
return isNext = true;
return false;
});
dialog.addEventListener('close', function() {
var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
document.body.removeChild(dialog);
nextStmts[0] = nextStmts[0].replace(/(window\.)?showModalDialog\(.*\)/g, JSON.stringify(returnValue));
eval('{\n' + nextStmts.join('\n'));
});
};
})();
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Hmm, that's not remotely what your page is doing, though. The code you have shown us is running in the browser, and makes a remote call to the d/b. That's totally different from "running a php page". If you want to do that, just enable the php page, then submit the form. When the server side code is complete and the response returned to the browser, the page will replace what was previously shown and the spinner will be gone. Or, just make an AJAX callback to your php page.
|
|
|
|
|
Ok
Thanks for verifying that, I'm way off course here. I'll do the AJAX call first and see how that works out.
I'll be back. 
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Well this works, the page takes about 10 secs to run and the spinner turns off. I'm trying to return some JSON back from the PHP page, as an option in case I need to use the option. I should probably post this in the other forum. Anyways, this is my JavaScript.
.then(function(data) is undefined, scratching my head on this. Maybe it's another keyword.
This is what I get back from .then(status = {, which actually looks good. The status below returns when the PHP page is done running. When I think about it, this must be the response header sent when done. So my JSON output should be in this payload within the body I think.
HTTP Status:<br /><br />
Response<br />
body: ReadableStream { locked: false }<br />
bodyUsed: false<br />
headers: Headers { }<br />
ok: true<br />
redirected: false<br />
status: 200<br />
statusText: "OK"<br />
type: "basic"<br />
url: "<a href="http:
<prototype>: ResponsePrototype { clone: clone(), arrayBuffer: arrayBuffer(), blob: blob(), … }<br />
msrpAsync.js:42:25
My JavaScript
spinner.classList.remove('hide');
spinner.classList.add('show');
const saveUrl = 'msrpControllerTest.phtml?save=1&cachebuster=' + (new Date()).valueOf();
fetch(saveUrl, { mode: 'same-origin', headers: { "Content-Type": "application/json; charset=utf-8" }})
.then(status => {
console.log("HTTP Status: ", status);
})
.then(function(data) {
console.log("Request succeeded with JSON response: ", JSON.stringify(data));
spinner.classList.remove('show');
spinner.classList.add('hide');
})
.catch(err => {
spinner.classList.remove('show');
spinner.classList.add('hide');
console.log("Ajax error - ", err);
alert("An error has occurred, and no error code has been written yet to debug the error")
});
I wrote this as a PHP 4.3 test page. I don't think that json_encode() will work since it's PHP 4.3.
Remember that I haven't worked with PHP 4 since 2003, so it's been 17 years.
ob_start();
header('Content-Type: application/json');
$jsonResult = "
{
\'status\': \'202\',
\'message\': \'No Project Number assigned\',
\'msrp\': {
\'bookPrice\': 0.00,
\'finalAdd\': 0.00
}
}";
echo $jsonResult;
ob_end_flush();
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I can only have 1 then in the fetch, with catch.
On Postman, my JSON is there in the body from the PHP page.
I'll figure it out eventually. But be my Fetch.
spinner.classList.remove('hide');
spinner.classList.add('show');
const saveUrl = 'msrp-api-async.phtml?save=1&cachebuster=' + (new Date()).valueOf();
fetch(saveUrl, { mode: 'same-origin', headers: { "Content-Type": "application/json; charset=utf-8" }})
.then(response => {
console.log("response: ", response);
console.log("Request succeeded with JSON response: ", JSON.stringify(response.json));
spinner.classList.remove('show');
spinner.classList.add('hide');
})
.catch(err => {
spinner.classList.remove('show');
spinner.classList.add('hide');
console.log("Ajax error - ", err);
alert("An error has occurred, and no error code has been written yet to debug the error")
});
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Then must be like a pipe in Angular or rxjs. And it required more piping. I think think the internet is loaded with bad or old examples of how to use fetch.
Using Fetch - Web APIs | MDN
spinner.classList.remove('hide');
spinner.classList.add('show');
const saveUrl = 'msrp-api-test.phtml?save=1&cachebuster=' + (new Date()).valueOf();
fetch(saveUrl, { mode: 'same-origin', method: 'POST', headers: { "Content-Type": "application/json; charset=utf-8" }})
.then(response => response.json())
.then(data => {
console.log("Success: ", data);
spinner.classList.remove('show');
spinner.classList.add('hide');
})
.catch(err => {
spinner.classList.remove('show');
spinner.classList.add('hide');
console.log("Ajax error - ", err);
alert("An error has occurred, and no error code has been written yet to debug the error")
});
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Hi we have a beautiful feature in Visual Studio that takes us from the place of its usage to definition if we right click and say go to definition or implementation.
Can we do the same for JavaScript frameworks, is there any way to do it? For example I have a component usage as below:
{{#link-to 'dashboard' tagName='li'}}
, in EmberJS, can I go to the definition of this component?.
Thank you so much
|
|
|
|
|
What happens when you try it?
|
|
|
|
|
|
Well there is your answer.
|
|
|
|
|
I have a datepicker which needs to have its date disabled only on button click. below is the code on button click. I actually wanted to use returned data but for now to check I am only using availableDates for blocking.
Please help.
posting.done(function (data) {
var date = new Date();
var temp = data.split(",");
alert(data);
var year = (new Date).getFullYear();
$("#datepicker").datepicker();
var availableDates = ['01-25-2021'];
$("#datepicker").datepicker({
beforeShowDay: function (d) {
var dmy = (d.getMonth() + 1);
if (d.getMonth() < 9)
dmy = "0" + dmy;
dmy += "-";
if (d.getDate() < 10) dmy += "0";
dmy += d.getDate() + "-" + d.getFullYear();
if ($.inArray(dmy, availableDates) != -1) {
return [false];
} else {
return [true];
}
}
});
})
Dhyanga
|
|
|
|
|
Could somebody help me, please?
With if-else condition works fine, but with these always the first block runs. I don't understand why.
let positiveNumber = -1;
positiveNumber > 0;
positiveNumber ? console.log('positive') : console.log('not positive');
|
|
|
|
|
You need to do the following for an if-else equivalent of what you are trying:
let positiveNumber = -1;
positiveNumber > 0 ? console.log('positive') : console.log('not positive');
This should give you back "not positive"
|
|
|
|
|
You are very kind and quick, thank you!
|
|
|
|
|
I have a js fn embedded in an aspx file. I reference a global code behind variable in the script. Works great. I moved the script to a .js file in the same project. OnClientcClick I find the script just fine but the variable is not available. Is it possible to reference or pass by value a variable to an external .js script?
|
|
|
|
|
It's not possible period. What was happening was the compiler was inserting your value into the js file during compile time or execution time.
Javascript executes on the client side and c# on the server. They are completely separate.
But no, I don't think you can do what you did before in a separate js file. And even if you can, my personal opinion is to never do it.
|
|
|
|
|
Thanks for the quick replay. I did do a goggle search half of the hits said you can the other half said no way. I did try a few examples but nothing worked. I don't do much in js but am curious as to why it would be a bad idea if it did work.
|
|
|
|
|
Member 14924607 wrote: why it would be a bad idea if it did work.
Because Javascript executes on the client side and C# executes on the server side. The 2 have no relationship to each other. They should not be mixed.
jQuery.ajax() is a very common way to get values from the server that are needed client side.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
