I'm working a PHP site with tons of JavaScript that I took over from another company. The fun doesn't end!
Last night's issue which is still giving me trouble is a javascript calendar.
This form is supposed to allow an indefinite number of detail lines to be added. You put in details then click the "add another " link and another set of boxes shows up.
The last company hard-coded 5 DIVs keeping all but the first hidden, so the "add another" link just un-hid the next DIV. the problem? There were only 5.
I now have the "add another link" doing an AJAX call to have a PHP function deliver another KB of HTML to add another set of payment boxes. It works great ...
EXCEPT ...
The set of boxes is supposed to include a JavaScript calendar. When I call the PHP function during page load, the java script loads and works. Code is below, but it gives me a functioning JS calendar.
<script language="JavaScript">
1
2 new tcal ({
3 'formname': 'add_payment',
4 'controlname': 'payment_date1'
5 });
</script>
which produces:
<img id="tcalico_0" class="tcalIcon" alt="Open Calendar" onclick="A_TCALS['0'].f_to
But ... if I include that code in what the PHP function returns to the AJAX call, the Javascript still produces the <img> tag, but it fills the entire <HTML> instead of being where it's supposed to be. The browser keeps trying to pull back what it's supposed to get ... though FireBug/FirePHP show that the appropriate HTML block to fill the <DIV> has been returned.
Any ideas?
thanks!
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
Sorry it's confusing.
I'm admittedly weak in JavaScript and Ajax. Perhaps if I could explain the question better I'd know the solution!
You suggest an ending /div or /table may be missing ... let me try to check that.
Failing that, perhaps I need to try to replicate it with a simpler example ... also one that I can show without providing a login to my customers site-in-progress.
I don't think failure to exit is the problem as there's nothing done except a return from the function and an end of a switch statement after the echo.
I'm getting real close to having a simplified example at http://www.gccswb.com/test
PHP code for that page is:
I am currently getting (in this test) a JS error:
$ is not definedShowNextPayment()Te
i
and the page that makes the HTML to add in is:
??? as to the $ and javascript, as far as I know, , in some browsers, the $ is a syntax shortcut for document.getElementById . . But There seems to be some variety on how this is implemented?
so you might try and change -
controlNo= parseInt($('#theValue').va
to -
controlNo= parseInt(document.getEleme
I personally do not use the $ as a shortcut, because some browsers are finaky with it, I am sorry but I do not have experience with the ramblings of the javascript $ .. Also jQuery may have something to do with the $, but I have not used jQuery for quite some time.
Also, you have the jQuery, but I do not see a javascript load for a jQuery JS file, or maybe its in the calender JS?
you might try and change the
$('#DivPayment'+controlNo)
document.getElementById('#
yeah, it's jquery. Got that part solved just a few minutes ago.
Now I've got the error being replicated here.
http://www.gccswb.com/test
Update
?? I am not liking your (to me) over use of <div> and style in your return ajax, For testing and development, I would eliminate all decoration HTML and style, untill I get it working.
first you start with a do-nothing <div>, which might be left out, because the html is already in a DIV <div id="DivPayment2">, ,
next I might change the -
<div style="padding-bottom:5px;
to -
<b>Test $iPaymentNum:</b><br/>
as to your problem?
It seems that the added ajax javascript is not being executed, and I do not remember using DHTML in this way, I have added ajax return javascript functions in Clicks, but not as a function call from the added HTML. I will look at my notes to see about this, You may need to add a JS eval() to tell the browser to do this, but I do not remember the syntax (if there is syntax) for this.
You might try and add a function call to your jQuery.ajax() for the return
success: function(response){
$('#DivPayment'+controlNo)
$('#DivPayment'+controlNo)
doAddCalender(controlNo);
}
the doAddCalender(controlNo); function would then write the Calender javascript to the place where you need it,,
You may need to add a <span> or <div> with an ID at the location you want the calender to be at.
Below is my doAddCalendar function ... with which I get the same results:
too many <div> tags? I agree, but look at a sample of what I inherited!
<div class="" align="left">
<div>
<div class="f_r_f_p_head">
<div class="f_r_f_p_head2">
<div class="f_r_f_p_head3">
<h3>Board A Payment</h3>
</div>
</div>
</div>
</div>
<div>
<div class="f_r_f_p_body">
<div class="f_r_f_p_body1">
<div class="f_r_f_p_body2">
<div class="f_r_f_p_body3">
<div class="f_r_f_p_body4" style="padding-top:5px">
<div id="DivResp"></div>
<div id="DivForm"><div style="padding:10px">
OUCH, IT HURTS, LOL, so many DIV, probably doing a whole bunch of nothing. .
OK, first some Javascript tips and hints, , In your doAddCalendar function, You have just copyed the new tcal, but unlike where it is in your HTML (where it works), it is in a function now, and the JS engine has no way of knowing where to write any output from new tcal() and ignores it, , so you must always tell it where to place the output, , I am sorry, but I have no Idea about the way tcal works, so it may not be useable for a function, BUT, you need to tell the JS engine where to write, , the jquery uses this -
$('#DivPayment'+controlNo)
as a Div ID placement for HTML
$('#CalDiv'+iPaymentNum).h
'controlname': 'payment_date' +iPaymentNum
}));
but this adds some multiple inner workings (both tcal and jquery) so I have little confidence this may work. Anyway You will have to add a <div> with something like <div id="CalDiv2"></div> in your ajax return HTML, where you want the new calender to be, with the correct CalDiv2 number for that div. I use document.getElementByID() for my calls, but if the juery $ works, use it.
So you may want to test it first with string -
function doAddCalendar(iPaymentNum)
$('#CalDiv'+iPaymentNum).h
}
next you may test the out put of new tcal
function doAddCalendar(iPaymentNum)
var ncal = new tcal ({ 'formname': 'add_payment','controlname
if (ncal.length<5) {ncal='ERROR, no TCAL OUTPUT'}
$('#CalDiv'+iPaymentNum).h
}
capturing new tcal() in ncal and putting it into the div didn't work either. Still blew it up.
So ... there's something this tcal is doing that is not getting along at all with the other JavaScript.
Is there a fundamentally different way to do this? to add an indefinite number of payment boxes, each having its own calendar control?
btw, thanks for all your help so far!
I was wondering why you were using Ajax for adding these extra boxes? but I did not really look at your code for that.
You might could add the boxes with just javascript function, but that seems to not be working as you have it now. I tried to look at the JS code in the calendar_us.js , but I do not have time or motivation to dissect it. But it uses some windows Global calls and it has this -
this.e_iframe = document.createElement("IF
For me, IFrames really changes the way this may be used in javascript function. . . I have no experience with that as a complex function use. Since it uses document.createElement calls, I doubt it can work as a "string" insert as we are trying to do. . .
There is the possibility of having several many <div> with calenders that are not shown (hidden or non) in style, and then show them with JS. But you could only have a fixed max number. And this may be less than elegant in how it works. Have you looked on the js calender site at
http://www.softcomplex.com
for how-to do what you are trying?
Business Accounts
Answer for Membership
by: Slick812Posted on 2009-09-03 at 17:09:45ID: 25256093
hello Daniel Wilson, , I have read your question info, but I do not have the ability to "get" what or where your problem might be. You sound as if you have used Ajax before with successful results. I do not really understand when you say -
"produces the <img> tag, but it fills the entire <HTML> instead of being where it's supposed to be."
For many if not all of my Ajax responseText calls I use an innerHTML = , , like -
domC.innerHTML = ajaxObj.responseText;
And in the responseText there are no <html> or <body> tags, are you sending back ajax as the entire page, or just the -
<img id="tcalico_0" class="tcalIcon" alt="Open Calendar" onclick="A_TCALS['0'].f_to
if your ajaxObj.responseText, seems correct, maybe you have left out some ending tag like </div> or </table>, which can completely throw off the page rendering. Also I have had problems with " and ' (double and single quote) in my PHP, , forgetting to escape it for html output.