How to change the content of a JavaScript function dynamically? - javascript

The problem I have is that I am trying to change the image from a canvas tag when the client selects a different radio button.
The content of the canvas is stored in the database with the code of the draw which I got from Illustrator (a lot of code).
What I did first was to change the data from a script tag by id where I created the function that paints the canvas.
It worked well, it painted the draw correctly. The problem is that when I select another radio button, even when the content of the script changes and so does the function, it draws the same painting and not the updated one.
I think that this happens because JavaScript does not update the content of the function after this has been already called once. Am I wrong?
If it is the problem I have, is it possible to change the content of the function after it has been called?
This is the html code:
<canvas id="myCanvasDel" height="600" width="600" style="max-width:600px;"></canvas>
<script id="scriptjs"></script>
This is the JavaScript one when I click on the radio button:
function mostrarCanvas(codiprd, codicol) {
$.ajax({
dataType: "html",
type: "POST",
url: "ajaxcanvas.php",
data: {
codiprd: codiprd,
codicol: codicol
},
success: function (datos) {
$('#scriptjs').html(datos);
var canvasDel = document.getElementById("myCanvasDel");
var ctxDel = canvasDel.getContext("2d");
drawDel(ctxDel);
},
error: function (e) {
alert('Ha habido un error: ' + e);
}
});
return false;
}
And this is the PHP that the ajax file calls:
$codiprd=$_POST['codiprd'];
$codicol=$_POST['codicol'];
$querycnv = "SELECT CANVAS "
. "FROM MYTABLE PC "
. "WHERE PC.CODIPRD=$codiprd AND PC.CODICOL=$codicol "
. "GROUP BY PC.CODIPRD,PC.CODICOL;";
$resultcnv = mysqli_query($conn, $querycnv)or die(mysqli_error());
$canvas = mysqli_fetch_array($resultcnv);
echo $canvas['CANVAS']);

You can redefine the function as you can redefine any varible.
function foo(){
console.log("blah");
}
can be redefined with
foo = function(){
console.log("blah,blah");
}
A function is just another object, and thus can be used like any referenced variable.
You can create a function from a string
var funcStr = 'return "hi there!";'; // the function body
var func = new Function(funcStr); // create the function
console.log(func()); // >> hi there
You set arguments with
var funcStr = 'return "hi there " + name;'; // the function body with arg name
var func = new Function("name",funcStr); // create the function with the argument name
console.log(func("Me")); // >> hi there Me
You can also create a script tag and add it to the DOM
var scriptSource = "//Source code;\nconsole.log("Script run");"
var script = document.createElement("script");
script.async = true;
script.text = scriptSource;
document.body.appendChild(script);
// in time the console will read
// >> Script run
You need to wait for the script to be parsed which will not happen until you exit the current execution. After the script has loaded, it is first parsed and then run. If you wish you can just have the function body in the script tag and let it run by itself.

Related

How can JScript pull from my SQL DB to save repeating my code?

For my own reasons I am using JS in a seperate script, linked into my PHP file to perform several of nearly the same function (only the images change in each function) like this:
function Clicky1(element) {
var XTag= element.parentElement.previousElementSibling.firstChild;
if (element.src == "../image1.jpg")
{
element.src = "../image2.jpg";
XTag.innerHTML = XText;
localStorage.setItem(XTag.id, XText);
}
else
{
element.src = "../image1.jpg";
XTag.innerHTML = " ";
localStorage.removeItem(XTag.id);
}
}
function Clicky2(element) {
var VTag= element.parentElement.previousElementSibling.firstChild;
if (element.src == "../image3.jpg")
{
element.src = "../image4.jpg";
VTag.innerHTML = VText;
localStorage.setItem(VTag.id, VText);
}
else
{
element.src = "../image3.jpg";
VTag.innerHTML = " ";
localStorage.removeItem(VTag.id);
}
} //this repeats 3 more times
But what I want is to just use something like "{$myDB['images']}" as all the images that I am manually inserting links to within each function are already stored in my database. - How do I go about doing this in the simplest way?
You can't just inject PHP code into your Javascript like that. If the Javascript is in a block within a .php file then you can inject the result of running some PHP code as hard-coded values into your script, but not if it's in a separate .js file, because it doesn't pass through the PHP script engine before being sent to the browser.
But this code is overly repetitive anyway - why not have the image paths as parameters to the function? Then you could only have one single re-usable function. Apart from those names, the code is identical in its functionality. And also if these functions are called from JavaScript within a .php file, then you could inject the image paths into it using PHP at that point.
You'd change the function to more like this:
function Clicky(element, img1, img2) {
var XTag= element.parentElement.previousElementSibling.firstChild;
if (element.src == img1) {
element.src = img2; XTag.innerHTML = XText;
localStorage.setItem(XTag.id, XText);
}
else {
element.src = img1;
XTag.innerHTML = " ";
localStorage.removeItem(XTag.id);
}
}
And then you could call it from a <script block embedded in a PHP file, something like this:
Clicky(someElement, "<?php echo $myDB['images']; ?>", "<?php echo $myDB['images1']; ?>");
(or whatever PHP you have to use to get to each separate image string). Then you can use the values from your PHP easily, and you also wouldn't need Clicky1, Clicky2, Clicky3 etc etc all with virtually-identical code in them.

run php function using ajax to update phpBB template variable

NOTE: There are a lot of details here, so if anyone needs a condensed version of this, I'm happy to summarize.
I am trying to run a function in my php file, that will in turn, update a template variable. As an example, here is one such function:
function get_vehicle_makes()
{
$sql = 'SELECT DISTINCT make FROM phpbb_vehicles
WHERE year = ' . $select_vehicle_year;
$result = $db->sql_query($sql);
while($row = $db->sql_fetchrow($result))
{
$template->assign_block_vars('vehicle_makes', array(
'MAKE' => $row['make'],
));
}
$db->sql_freeresult($result);
}
I know that this function works. I am trying to access this function in my Javascript with:
function updateMakes(pageLoaded) {
var yearSelect = document.getElementById("vehicle_year");
var makeSelect = document.getElementById("vehicle_make");
var modelSelect = document.getElementById("vehicle_model");
$('#vehicle_make').html('');
$.ajax({ url: '/posting.php',
data: {action: 'get_vehicle_makes'},
type: 'post',
success:function(result)//we got the response
{
alert(result);
},
error:function(exception){alert('Exception:'+exception);}
});
<!-- BEGIN vehicle_makes -->
var option = document.createElement("option");
option.text = ('{vehicle_makes.MAKE}');
makeSelect.add(option);
<!-- END vehicle_makes -->
if(pageLoaded){
makeSelect.value='{VEHICLE_MAKE}{DRAFT_VEHICLE_MAKE}';
updateModels(true);
}else{
makeSelect.selectedIndex = -1;
updateModels(false);
}
}
The section in my javascript...
<!-- BEGIN vehicle_makes -->
var option = document.createElement("option");
option.text = ('{vehicle_makes.MAKE}');
makeSelect.add(option);
<!-- END vehicle_makes -->
... is a block loop and will loop through the block variable, vehicle_makes, set in the PHP function. This works upon loading the page because the page that loads, is the new.php that I'm trying to do an Ajax call to, and all of the PHP runs in that file upon loading. However, I need the function to run again, to update that block variable, since it will change based on a selection change in the HTML. I don't know if this type of block loop is common. I'm learning about them since they are used with a forum I've installed on my site, phpBB. (I've looked in their support forums for help on this.). I think another possible solution would be to return an array, but I would like to stick to the block variable if possible for the sake of consistency.
This is the bit of code in the php that reads the $_POST, and call the php function:
if(isset($_POST['action']) && !empty($_POST['action'])) {
$action = $_POST['action'];
//Get vehicle vars - $select_vehicle_model is used right now, but what the heck.
$select_vehicle_year = utf8_normalize_nfc(request_var('vehicle_year', '', true));
$select_vehicle_make = utf8_normalize_nfc(request_var('vehicle_make', '', true));
$select_vehicle_model = utf8_normalize_nfc(request_var('vehicle_model', '', true));
switch($action) {
case 'get_vehicle_makes' :
get_vehicle_makes();
break;
case 'get_vehicle_models' :
get_vehicle_models();
break;
// ...etc...
}
}
And this is the javascript to run the Ajax:
function updateMakes(pageLoaded) {
var yearSelect = document.getElementById("vehicle_year");
var makeSelect = document.getElementById("vehicle_make");
var modelSelect = document.getElementById("vehicle_model");
$('#vehicle_make').html('');
$.ajax({ url: '/posting.php',
data: {action: 'get_vehicle_makes'},
type: 'post',
success:function(result)//we got the response
{
alert(result);
},
error:function(exception){alert('Exception:'+exception);}
});
<!-- BEGIN vehicle_makes -->
var option = document.createElement("option");
option.text = ('{vehicle_makes.MAKE}');
makeSelect.add(option);
<!-- END vehicle_makes -->
if(pageLoaded){
makeSelect.value='{VEHICLE_MAKE}{DRAFT_VEHICLE_MAKE}';
updateModels(true);
}else{
makeSelect.selectedIndex = -1;
updateModels(false);
}
}
The javascript will run, and the ajax will be successful. I've checked the network tab and console tab, and have done multiple tests to confirm that. It appears that the block variable is not being set. Is what I'm trying to do even possible? I have a feeling that to get this answer, we'll need to know more about phpBB's template engine, and how it works with these template variable. Also, just to clarify, I think the term 'template variable' is specific to phpBB. It's the term they use for variables set in PHP, to be accessed by the HTML, and javascript files. This works through a phpBB class called 'template', and a function called 'assign_block_vars'. I don't know exactly how that work.
If anyone has done this for phpBB, or has any ideas, I would appreciate it.
Think I found the problem. At the beginning of my PHP, I have an include statement to include the PHP file containing the class for connecting to the database. In the statement $result = $db->sql_query($sql);, $db is set in this other PHP file. I don't entirely understand, but because of that, $db was outside of the scope of my function get_vehicle_makes(). I had to create a class inside my PHP file, and pass $db as a parameter to the function using:
class vehicle {
public function __construct($db)
{
$this->db = $db;
}
function get_vehicle_makes()
{
$sql = 'SELECT make FROM phpbb_vehicles
WHERE year = ' . $select_vehicle_year;
$result = $this->db->sql_query($sql);
Hope this helps.

jquery countdown in dynamically created html

i need a little help using the jquery countdown keith wood - jquery countdown plugin
I am creating several countdowns by retrieving data from mysql database (php ajax call) and putting it into a div:
in php (getdetails.php -> gets $mid and $time from mysql-database):
$mrow="TimeCounter inserted here:"
$mrow.="<div id=\"RowDiv\"><div id=\"timecount".$mid."\"><script> $('#timecount".$mid."').countdown({until: ".$time."}); </script></div></div>";
$mrow.="TimeCounter ends here";
in JS i set the innerHTML with the data i got:
var url="getDetails.php";
var what="getTimeData";
console.log("call getTimeData");
var p1 = $.post(url,{what:what,selId:selValue,conName:"GId"});
p1.done(function(data){
console.log("Data -> : "+ data);
document.getElementById("CounterDiv").innerHTML=data
});
console.log(data) shows me the set html:
<div id="RowDiv" ><div id="timecount2"><script> $('#timecount2').countdown({until: 1454713200}); </script></div></div>
I get no errors but i dont see the counter... I do see the surrounding TimeCounter inserted here: TimeCounter ends here on the page. I suppose it is a client / server side issue. Maybe i need to call the function again after setting the innerHTML with the data. But i dont know how.
How can i solve this? Any ideas?
Instead of adding an inline script within your HTML element, you can initiate the counter within your callback/success function of jQuery.post(). In order to do this, you will have to change your PHP and JS like below:
PHP
$mrow="TimeCounter inserted here:"
$mrow.="<div id=\"RowDiv\"><div id=\"timecount" . $mid . "\" data-time=\"" . $time . "\"></div></div>";
$mrow.="TimeCounter ends here";
JS
var url = "getDetails.php",
what = "getTimeData";
$.post(url, {what:what,selId:selValue,conName:"GId"}, function(data){
$('#CounterDiv').html(data).find('[id^="timecount"]').countdown({until: $(this).data('time')*1});
});
UPDATE:
I don't know the plugin, but the scope of this might get changed when .countdown() is called. In such a case, you can use .each() function of jQuery to pass the element. Here is how you do that:
$.post(url, {what:what,selId:selValue,conName:"GId"}, function(data){
var $counters = $('#CounterDiv').html(data).find('[id^="timecount"]'),
$el,t;
$counters.each(function(index,element){
$el = $(element);
t = $el.data('time')*1;
$el.countdown({until: t});
});
});
Haven't tested the code but the point of my suggestion would be to avoid sending HTML in response and make getdetails.php respond with $mid and $time like:
$data = array(
'mid' => $mid,
'time' => $time
);
$response = json_encode($data);
Your JS code should look something like:
var url = "getDetails.php";
var what = "getTimeData";
console.log("call getTimeData");
$.post(url, {what: what, selId: selValue, conName: "GId"}, function (data) {
console.log("Data -> : " + data);
var id = 'timecount' + data.mid;
var row = '<div id="RowDiv"><div id="' + id + '"></div</div>';
$("#CounterDiv").html(row);
$('#' + id).countdown({until: data.time});
}, 'json');

Javascript DOM errors

this is my javascript code , I am trying to create a dynamic list in HTML with data I recieve from the server , The data is of type "json"
My Javascript snippet
function addBooks(data) { // USing DOM to populate the tables
//var newdata=document.getElementById('addBooks');
//newdata.setattribute()
//get the unordered list
var newdata = document.getElementById('addBooks');
var parent = document.getElementById('gBookList');
//removeChildrenFromNode(parent);
//create list divider
var listdiv = document.createElement('li');
listdiv.setAttribute('id', 'gBookListDiv');
listdiv.innerHTML = ("Books Found:");
parent.appendChild(listdiv);
// (this is where the first error happens)
//create dynamic list
for (i = 0; i < data.length; i++) {
// (this is where the second error happens)
//create each list item
var listItem = document.createElement('li');
listItem.setAttribute('id', 'gBookListItem');
parent.appendChild(listItem);
//var link = document.createElement('a');
//link.setAttribute('onclick','displayBook(data[i])');
//link.setAttribute('href','#FindBook)');
//listItem.appendChild(link);
var pic = document.createElement('img');
pic.setAttribute('src', data[i].pictureURL);
pic.setAttribute('width', '80px');
pic.setAttribute('height', '100px');
pic.setAttribute('style', 'padding-left: 10px');
link.appendChild(pic);
var brk = document.createElement('br')
link.appendChild(brk);
var title = document.createElement('p');
title.innerHTML = data[i].title;
title.setAttribute = ('style', 'float:right');
link.appendChild(title);
var author = document.createElement('p');
author.innerHTML = data[i].author;
link.appendChild(author);
}
var list = document.getElementById('gBookList');
// $(list).listview("refresh");
}
/*function removeChildrenFromNode(node){
while (node.hasChildNodes()){
node.removeChild(node.firstChild);
}
//}*/
My html code is
<!DOCTYPE html>
<head>
<script ...>
<head>
<body onLoad="addBooks()">
<div id="addBooks" class="row-fluid">
<div id="gBookList">
</div>
</div>
</body>
</html>
I keep getting the following error which prevents me from populating the list , I am using chrome
1) Uncaught TypeError: Cannot call method 'appendChild' of null
2) Uncaught TypeError: Cannot read property 'length' of undefined
I do not understand why this should happen as the .length commands returns the correct integer ( amount of json objects) when I debug using a alert box .
the function that calls it
$.ajax({
type: 'GET',
url: ........,
dataType: "json",
complete: function (xhr, statusText) {
alert(xhr.status);
},
success: function (data, textStatus, jqXHR) {
alert(JSON.stringify(data));
window.location.replace("Page2_updated.html");
addBooks(data); // Passing JSON to be replaced on page
},
function (data, textStatus, jqXHR) {
alert(data);
alert('error');
},
});
Edit
I changed my HTML file to the following structure after advice on this forum
<html>
<head>
</head>
<body>
<div id="1" "display:block">
</div>
<div id="2" "display:none"> // no onLoad() anymore!!
</div>
</body>
</html>
I have edited this part int he calling function
$.ajax({
type: 'GET',
url: ........,
dataType: "json",
complete: function (xhr, statusText) {
alert(xhr.status);
},
success: function (data, textStatus, jqXHR) {
alert(JSON.stringify(data));
if(document.getElementById(1).style.display == "block"){
document.getElementById(1).style.display = "none";
document.getElementById(2).style.display = "block"; }
addBooks(data); // Passing JSON to be replaced on page
},
function (data, textStatus, jqXHR) {
alert(data);
alert('error');
},
});
But I still get the following errors
Uncaught TypeError: Cannot call method 'appendChild' of null
Uncaught TypeError: Cannot read property 'length' of undefined
Here is a working version of your code that builds a list. Compare with your version to see where you made the mistakes, in both mark up and code.
The source of your second error is incorrect data (most likely null) being passed to the addBooks function, so you would have to fix that.
Chrome and Firebug have excellent JavaScript debuggers with breakpoints, so use that to your advantage to identify the issues:
http://jsfiddle.net/tgth2/
EDIT:
Your problem is gleamingly obvious, after your comments and updates to the question:
Your first page is loading the JSON data from the service, but then does window.location.replace("Page2 Updated.html");, which sends the browser to the new page (notice that you're calling addBooks(data); immediately after. But that code is never executed because browser has already gone to another page
Your second page has <body onload="addBooks();"> in it, which will cause the function to be called with a null data. This is the cause of your problem.
SOLUTION:
Number one suggestion would be to start using jQuery for everything else you're doing, and not just for the AJAX call.
Secondly, you should have the ajax call and the results rendering in one page, as it does not make any sense to redirect the browser to another page. Because your javascript always works in the context of a single page. As soon as you do something like window.location.replace(..) you end up losing everything you've done in the current page.
If you make these changes, you will see that your list loads just fine!
This line in your loop creates multiple list items with the same ID:
listItem.setAttribute('id','gBookListItem');
try removing it - i don't think you need it.
That's an error :
title.setAttribute=('style','float:right');
do:
var title = document.createElement('p');
title.innerHTML = data[i].title;
title.style.cssFloat = 'right';
link.appendChild(title);
and
var pic = document.createElement('img');
pic.src = data[i].pictureURL;
pic.width = '80px';
pic.height = '100px';
pic.style.paddingLeft = '10px';
link.appendChild(pic);
etc......
Any chance that you're accidentally calling addBooks() somewhere in your code without any data?
I tried to cut it down to the barebones and I'm pretty sure the fact that link is undefined is the reason you get an error when you call appendChild. It's certainly the first error I found in the console in Firebug. The following barebones sequence works in Firefox (sorry I don't have Chrome):
var json =[
{"pictureURL":"/test1.jpg/","title":"test1"},
{"pictureURL":"/test2.jpg/", "title":"test2"},
{"pictureURL":"/test3.jpg", "title":"test3"}
];
function displayBook(title){
alert(title);
return false;
}
function addBooks(data) {
var newdata=document.getElementById('addBooks');
var parent = document.getElementById('gBookList');
var listdiv = document.createElement('li');
listdiv.id = 'gBookListDiv';
listdiv.innerHTML = "Books Found:";
parent.appendChild(listdiv);
for(var i=0;i<data.length;i++){
var listItem = document.createElement('li');
listItem.id = 'gBookListItem-' + i;
parent.appendChild(listItem);
var link = document.createElement('a');
link.id = listItem.id + "-link";
link.href = '#FindBook';
link.innerHTML = data[i].title;
listItem.appendChild(link);
link.setAttribute("onclick", "return displayBook('" + data[i].title + "');");
var pic = document.createElement('img');
pic.src = data[i].pictureURL;
}
var list = document.getElementById('gBookList');
}
I discovered from this answer JavaScript: changing the value of onclick with or without jQuery that I had to use setAttribute to add the onclick handler. I'm used to adding other attributes like id directly as mentioned by adeneo without calling setAttribute.

YUI Dialog using ajax request - want to execute javascript returned from Java but out of scope

I have a YUI dialog that submits a form to a Java servlet. The servlet returns html and javascript. I take the response and put it into a div on the page and then eval the javascript that is within the div.
My problem is that I get an error in the firebug console saying "YAHOO is not defined" as soon as the servlet returns.
I do not include the YUI js files in the servlet as I didn't think I would need them, I would expect the files included in the head of the main page would be sufficient.
If I remove all references to YUI from the javascript returned by my servlet then everything works well.
What should I do to stop getting this error as soon as my servlet returns?
My Servlet returns something along the lines of:
<div id="features">some html to display</div>
<script id="ipadJS" type='text/javascript'>
var editButton1 = new YAHOO.widget.Button('editButton1', { onclick: { fn: editButtonClick, obj: {id: '469155', name : 'name 1'} } });
var editButton2 = new YAHOO.widget.Button('editButton2', { onclick: { fn: editButtonClick, obj: {id: '84889', name : 'name 2'} } });
</script>
Here is the code that I used to create the dialog, i use the handleSuccess function to put my response from my servlet into the page (note that even though im not actively putting the javascript into the page it still throws the 'YAHOO not defined' error.):
YAHOO.namespace("ipad");
YAHOO.util.Event.onDOMReady(function () {
// Remove progressively enhanced content class, just before creating the module
YAHOO.util.Dom.removeClass("createNewFeature", "yui-pe-content");
// Define various event handlers for Dialog
var handleSubmit = function() {
this.submit();
};
var handleCancel = function() {
this.cancel();
};
var handleSuccess = function(o) {
var response = o.responseText;
var div = YAHOO.util.Dom.get('features');
div.innerHTML = response;
};
var handleFailure = function(o) {
alert("Submission failed: " + o.status);
};
// Instantiate the Dialog
YAHOO.ipad.createNewFeature = new YAHOO.widget.Dialog("createNewFeature",
{ width : "450px",
fixedcenter : true,
visible : false,
constraintoviewport : true,
buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
{ text:"Cancel", handler:handleCancel } ]
});
// Validate the entries in the form to require that both first and last name are entered
YAHOO.ipad.createNewFeature.validate = function() {
var data = this.getData();
return true;
};
YAHOO.ipad.createNewFeature.callback = { success: handleSuccess,
failure: handleFailure,
upload: handleSuccess };
// Render the Dialog
YAHOO.ipad.createNewFeature.render();
var createNewFeatureShowButton = new YAHOO.widget.Button('createNewFeatureShow');
YAHOO.util.Event.addListener("createNewFeatureShow", "click", YAHOO.ipad.clearFeatureValues, YAHOO.ipad.clearFeatureValues, true);
var manager = new YAHOO.widget.OverlayManager();
manager.register(YAHOO.ipad.createNewFeature);
});
I don't know your use case exactly, but if you just need to create some buttons on the fly based on server response, than it would IMO be better to return JSON or XML data with the variable data and then create the buttons. Something like
var reply = eval('(' + o.responseText + ')');
var editButton1 = new YAHOO.widget.Button('editButton1',
{ onclick: { fn: editButtonClick,
obj: {id: reply[id], name : reply[name]}
} })
And if you really want to append a script node, then the following approach should work:
var response = o.responseText;
var snode = document.createElement("script");
snode.innerHTML = response;
document.body.appendChild(snode);

Categories