472,117 Members | 2,667 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,117 software developers and data experts.

External Js dosent work for multiple pages

hi,
Im new into Ajax and Javascript, I have a doubt...
I have a External javascript. and a couple of html files and I load These through ajax request and response.

The html pages contain a couple of image tag a check box and a input tag in order
on click i take the id of the check box ........ This works when i navigate through the page. but When i take the value of the corresponding checkbox ...... This dosent work when i navigate through the page.

Also When an check box is checked I need to show them checked even when i navigate through the pages.

It would be Great if i could move forward withyour help.


Thanks for your reply in advance....
Jun 8 '07 #1
13 1914
Sorry i Dosent Work If I take The value of The Input Tag OF the Corresponding Check Box...

Suggestions PLS......
Jun 8 '07 #2
acoder
16,027 Expert Mod 8TB
Can you post some code.
Jun 9 '07 #3
This Is My First Page.
<body>
<div id="productsMain" class = "products">
<div id="products" style="font-weight:bold">Products Page1
<table border="0" cellpadding="0">
<tr>
<td>
<div id="product_1">
<table border="0" cellpadding="0">
<tr>
<td></td>
<td class="box" id="image1"> Image 1 </td>
</tr>
<tr>
<td id="cost1" style="font-weight:bold" value="78" disabled=true>Rs.78</td>
<td id="seltd1"><input type = "checkbox" name = "shoppingProduct" id="checkImage1"></td>
</tr>
<tr>
<td>Qty</td>
<td id="qty1" style="font-weight:bold"><input type="text" id="sqty1" size="3" maxlength="3"></td></tr>
</tr>
</table>
</div>
</td>
<td>
<div id="product_2">
<table border="0" cellpadding="0">
<tr>
<td></td>
<td class="box" id="image2"> Image 2 </td></tr>
<tr>
<tr>
<td id="seltd2"><input type = "checkbox" name = "shoppingProduct" id="checkImage2"></td>
<td id="cost2" style="font-weight:bold" value="400" disabled=true>Rs.400</td>
</tr>
<tr>
<td>Qty</td>
<td id="qty2" style="font-weight:bold"><input type="text" id="sqty2" size="3" maxlength="3"></td></tr>
</tr>
</table>
</div>
</td>

--- Part of the first page. it is the same for products up to 10

The end of the page where the function is called


<div class="clearCart" id="AddtoCart" onclick="AddtoCart();">Add to Cart</div>
</div>
</div>
</div>
<table align="right" border="0" style="padding-right:200px">
<tr >
<td><input type="button" id="previous" disabled="true" value ="<< prev" onClick="nextPage('prevPg');"> </td>
<td>    </td>
<td><input type="button" value ="next >>" id="next" onClick="nextPage('nextPg');"> </td>
</tr>
</table>
<div id="cartid" style="position:absolute;left:700px;background:#FF FF66;border:1px dashed gray;top:20px;display:none"></div>

************************************************** ***************************************

This is My Second Page.

<div style="font-weight:bold">Products Page2
<table border="0" cellpadding="0">
<tr>
<td>
<div id="product_11">
<table border="0" cellpadding="0">
<tr>
<td></td>
<td class="box" id="image11"> Image 11 </td>
</tr>
<tr>
<td id="cost11" style="font-weight:bold">Rs.300</td>
<td id="seltd11"><input type = "checkbox" name = "shoppingProduct" id="checkImage11"></td>
</tr>
<tr>
<td>Qty</td>
<td id="qty11" style="font-weight:bold"><input type="text" id="sqty11" size="3" maxlength="3"></td></tr>
</tr>
</table>
</div>
</td>
<td>
<div id="product_12">
<table border="0" cellpadding="0">
<tr>
<td></td>
<td class="box" id="image12"> Image 12 </td>
</tr>
<tr>
<td id="cost12" style="font-weight:bold">Rs.70</td>
<td id="seltd12"><input type = "checkbox" name = "shoppingProduct" id="checkImage12"></td>
</tr>
<tr>
<td>Qty</td>
<td id="qty12" style="font-weight:bold"><input type="text" id="sqty12" size="3" maxlength="3"></td></tr>
</tr>
</table>
</div>
</td>
<td>
<div id="product_13">
<table border="0" cellpadding="0">
<tr>
<td></td>
<td class="box" id="image13"> Image 13 </td>
</tr>
<tr>
<td id="cost13" style="font-weight:bold">Rs.55</td>
<td id="seltd13"><input type = "checkbox" name = "shoppingProduct" id="checkImage13"></td>
</tr>
<tr>
<td>Qty</td>
<td id="qty13" style="font-weight:bold"><input type="text" id="sqty13" size="3" maxlength="3"></td></tr>
</tr>
</table>
</div>
</td>
<td>

This page end with products from 11 to 20 no functions os js is found or called in this page

************************************************** ************************************



The Js File with the functions that are called

var productAry = new Array;
var theObj ="";
document.onclick = function(e){
var theObj = e.target || event.srcElement;
var theId ="";
if(theObj.type == "checkbox"){
var theId = theObj.id
if(theObj.checked){
if(!productAry.inArray(theId))
for(var i=0;i<imageAry.length;i++){
if(theId == imageAry[i]){
productAry.push(imageAry[i]);
}
}






function AddtoCart(){
var topDiv = "<table border='1'><tr><td colspan='4' align='center' style='border:1px solid red;font-weight:bold'> Selected Items</td></tr>"
topDiv += "<tr style='font-weight:bold'><td></td><td>Cost/Item</td></td>No.Of Items Ordered</td><td>Total</td></tr>";
for(var i=0;i<imageAry.length;i++){
var addId = imageAry[i];
//var selQty = addId.findandreplace("checkImage","sqty");
//var selCost = addId.findandreplace("checkImage","cost");

//var selQtyValue = document.getElementById(selQty).value
//var selCostValue = document.getElementById(selCost).innerHTML;
//selCostValue = selCostValue.substring(3);
//if(document.getElementById(selQty).value !=""){
topDiv +="<tr>";
//topDiv +="<td><input type ='checkbox' id= checked"+i+" CHECKED></td>"
//topDiv +="<td>Rs."+selCostValue+"</td>"
//topDiv +="<td align='center'><input type = 'text' id="+"sel"+selQty+" value="+selQtyValue+" size='3' ></td>"
//topDiv +="<td>"+selCostValue*selQtyValue+"</td></tr>"
topDiv +="<td>"+addId+"</td></tr>"
//}
//else
// alert("Please Enter the Quantity");

}
topDiv +="<tr><td colspan='5'><input type='Button' value='Buy The List' onClick='' </td></tr>"
topDiv +="</table>";
//if(document.getElementById(addId).checked && document.getElementById(selQty).value != ""){
document.getElementById("cartid").innerHTML = topDiv;
document.getElementById("cartid").style.display="b lock";
//}



...Hop This Helps.
Looking forward ..

Thanks in advance
Jun 11 '07 #4
dmjpro
2,476 2GB
I m little bit doubt about when a HTML page with some JS code is loaded using AJAX.
Actually the JS code is invalid untill it placed in a browser.
Actually AJAX is made for loading XML and parse it.
But there loading a HTML page and parse it .. this is nothing but a stupid job.
I think u got my point.

Kind regards,
Dmjpro.
Jun 11 '07 #5
we can parse a xml doc and show it in the browser . Also it works well with html too There is no need to parse a html doc. It can be displayed straight away from the respose.

All That is done there is a time save in Ajax rather than the other way.

All i need is the function Addtocart to be global for every page that is loaded.
I dont want to write or refer a js function on every page. I just want to write a global js function that works on every page which is loaded through.


Since my Addtocart function is loaded and called inthe main Page.(the html part is loaded only for the check boxes and images) I would like to use the function globally.

is there any way to acheive it...
looking Forward
Jun 11 '07 #6
dmjpro
2,476 2GB
we can parse a xml doc and show it in the browser . Also it works well with html too There is no need to parse a html doc. It can be displayed straight away from the respose.

All That is done there is a time save in Ajax rather than the other way.

All i need is the function Addtocart to be global for every page that is loaded.
I dont want to write or refer a js function on every page. I just want to write a global js function that works on every page which is loaded through.


Since my Addtocart function is loaded and called inthe main Page.(the html part is loaded only for the check boxes and images) I would like to use the function globally.

is there any way to acheive it...
looking Forward

Ok frnd ... see.
The AJAX is for loading the page but not rendering the page into the browser.
Right?
If u want to load and render the page then use simple page navigation.
Right?
AJAX means u r accessing a some updated data which u need to update the main page with the help of those data.

Kind regards,
Dmjpro.
Jun 11 '07 #7
Thats right Pal...

All im concerned about is can a global js function be used to multiple pages without reference.

Wat i have done is ...
There are a couple of pages which are of the same type. i have one js function loaded externally.

This function works good just for one page no matter on which page the function is first called(Page 1 or 2 or 3..).But never works when the same function is called in another page without refreshing.
Can this js function made in such a way that it works good for all pages without refreshing.. So that there is no need to refer the function in every page.


May be it looks bit wierd ... But im intrested to know wether this could be attained.

eagerly Looking Forward

Hope this could be attained
Jun 11 '07 #8
dmjpro
2,476 2GB
Thats right Pal...

All im concerned about is can a global js function be used to multiple pages without reference.

Wat i have done is ...
There are a couple of pages which are of the same type. i have one js function loaded externally.

This function works good just for one page no matter on which page the function is first called(Page 1 or 2 or 3..).But never works when the same function is called in another page without refreshing.
Can this js function made in such a way that it works good for all pages without refreshing.. So that there is no need to refer the function in every page.


May be it looks bit wierd ... But im intrested to know wether this could be attained.

eagerly Looking Forward

Hope this could be attained

Yes u can do this using one global JS and handle multiple pages but there is no need of AJAX.
Rewrite the code without JS then try to do what u want.
Right?
Best of luck.

Kind regards,
Dmjpro.
Jun 11 '07 #9
Dmjpro.. Thanks for your Comments
My Concern is...

Suppose i access multiple pages through ajax.
I load the initial page with the external js file . Through ajax i replace a part of the page.

Now If i access then js function holds good to the first page from where the function is called.i.e if the click on the link to call the function is from the third page then it works good for third page only and it dosent work for the second click to call the function in page 1 or 2. But i need the function to be working on all pages for more clicks.

i need an idea to work on this ...

I need Help

Thanks and Looking Forward.
Jun 11 '07 #10
dmjpro
2,476 2GB
Dmjpro.. Thanks for your Comments
My Concern is...

Suppose i access multiple pages through ajax.
I load the initial page with the external js file . Through ajax i replace a part of the page.

Now If i access then js function holds good to the first page from where the function is called.i.e if the click on the link to call the function is from the third page then it works good for third page only and it dosent work for the second click to call the function in page 1 or 2. But i need the function to be working on all pages for more clicks.

i need an idea to work on this ...

I need Help

Thanks and Looking Forward.
So u r working with the single frame.
U r updating a part of the first page.... right?
And still the js is in the memory untill u don't refresh the page.
Now either u r accessing a wrong element or DOM structure corrupted ,means while u update the page.
Right??
I think u got my point.
Plz check ur code throughly and then come here.
Best of luck.

Kind regards,
Dmjpro.
Jun 11 '07 #11
So u r working with the single frame.
U r updating a part of the first page.... right?
And still the js is in the memory untill u don't refresh the page.
Now either u r accessing a wrong element or DOM structure corrupted ,means while u update the page.
Right??
I think u got my point.
Plz check ur code throughly and then come here.
Best of luck.

Kind regards,
Dmjpro.

Wow!!! Exactly right!! 100%

This is wat is happening. Any Ideas to proceed further.

Waiting Boss!!!
Jun 11 '07 #12
dmjpro
2,476 2GB
Wow!!! Exactly right!! 100%

This is wat is happening. Any Ideas to proceed further.

Waiting Boss!!!
Ok use tryu catch block then tell me the actual error u getting.
Right?

Kind regards,
Dmjpro.
Jun 11 '07 #13
Ok use tryu catch block then tell me the actual error u getting.
Right?

Kind regards,
Dmjpro.
Hi Dmjpro
Sorry to consume your time... I got it working

Thanks for your suggestions
Jun 11 '07 #14

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

47 posts views Thread by Richard Hayden | last post: by
8 posts views Thread by Flip | last post: by
reply views Thread by leo001 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.