SitePoint Sponsor

User Tag List

Page 1 of 4 1234 LastLast
Results 1 to 25 of 112

Hybrid View

  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pop up window details to update parent details

    Dear All,
    I have a page here Untitled Document. You can select a value from the dropdown list and you will get a list of configurations with the word "Select". If you click on the "Select" word you will get a pop-up value with a list of checkboxes. So what I want is that once they click on the checkbox the window will close and update the "Select" with the revelant "Tyre Serial No". How to achieve the updates? I also want to limit the pop-up window to only at any one time.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear All,
    I have a page here Untitled Document. You can select a value from the dropdown list and you will get a list of configurations with the word "Select". If you click on the "Select" word you will get a pop-up value with a list of checkboxes. So what I want is that once they click on the checkbox the window will close and update the "Select" with the revelant "Tyre Serial No". How to achieve the updates? I also want to limit the pop-up window to only at any one time.
    The last part is the easiest to solve. Just open the new window using the same window name.

    Getting the child to communicate with the parent can be tricky, but the child is allowed to run functions in the parent window. So, the parent window can have a function that sets the relevant section to what was selected. All the child then has to do is to run that parent function with the appropriate information.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Where do you set the window name for it to be same name? I have seen the child function updating the parent but in my case each time you use a new drop down list the a new set of information is out. How to update dynamic value in my case?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    The window.open() method is how you should be opening a new window. You'll see there that the second parameter is where you provide a name for the new window.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Ok will try on it. How about the data passing and updating any idea how to start and go about it? Thank you.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Ok will try on it. How about the data passing and updating any idea how to start and go about it? Thank you.
    One way is for the parent window to have a function that alerts to let you know it was run. Then you can work at making the child window run that function, and when successful, you can pass information to that function.

    The parent window function will then be allowed to perform changes to the parent window that you are requiring.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Got one problem regarding the onlick I am using href like this <a href='tyreDetails.php' target='_blank' >Select</a>? So you want me to replace with window.open is it? Any codes for the parent and child communication or good example for me to start working on it?

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    Got one problem regarding the onlick I am using href like this <a href='tyreDetails.php' target='_blank' >Select</a>? So you want me to replace with window.open is it? Any codes for the parent and child communication or good example for me to start working on it?
    That _blank way of opening a new window is a technique from the last century, when HTML3 ruled the roost. With HTML4 in 1999 that technique was deprecated. It's allowed in HTML4 Transitional so that you can transition from HTML3 to HTML4, but in HTML4 Strict using _blank is not allowed.

    It's time to use proper techniques such as window.open() for such behavioural changes to your page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Ok I have done the changes via this method <label id=".$roPosition." onClick=window.open('tyreDetails.php','TyreDetails')>Select</label> is this ok? Next thing I have this code in my pop-up window. The problem now how is best mechanism to pass the label it so that once is checked in the window then it will set the value accordingly? Shall I send via get method? Next thing my label ID will all be dynamic and how to make this work dynamically window.opener.document.form.details.value = val;
    I mean the element name?

    function selectAndUpdate(val)
    {
    alert("VAL :"+val);
    window.opener.document.form.details.value = val;
    }

  10. #10
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I have put like this. But when I press the select is not working no pop-up comes out? So the best method to send value is via get is it? The next challenge how to assign the value according to the this.id? How manipulate this window.opener.document.form.details.value = val;?
    <script>
    var details = document.getElementById('layoutDetails');
    links = details.getElementsByTagName('a');
    i;
    for (i = 0; i < links.length; i += 1) {
    links[i].onclick = openTyreDetails;
    }
    function openTyreDetails() {
    window.open('tyreDetails.php?tyre=' + this.id, 'TyreDetails');
    }

    </script>
    </body>

  11. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    I have put like this. But when I press the select is not working no pop-up comes out?
    Sorry, my head's killing me right now with the flu. A return false should go at the end of the function too, just to prevent the web page from performing its default action of trying to follow the link.

    The problem with the code you used though, is that your variable declarations are wrong. Look again at the code I used, where they are comma separated instead. The line breaks are just for clarity - it's all one variable declaration. No semicolon until the end of the last variable declaration.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Here is my latest codes. But still the same.Here is the link Untitled Document.
    <script>
    var details = document.getElementById('layoutDetails'),links = details.getElementsByTagName('a'),i;
    for (i = 0; i < links.length; i += 1) {
    links[i].onclick = openTyreDetails;
    }
    function openTyreDetails() {
    window.open('tyreDetails.php?tyre=' + this.id, 'TyreDetails');
    return false;
    }

    </script>
    </body>

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Here is my latest codes. But still the same.Here is the link Untitled Document.
    It seems that the sections of HTML code that you want to apply this to do not yet exist when the page loads. After loading in the section of code and displaying it on the screen, that is when you need to update those onclick events.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Ok the pop-up works well now. So how about the value assignment in the pop-up window. How to make this window.opener.document.form.details.value = val;
    dynamic?

  15. #15
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I guess this part when I call the pop up is like this for e.g. http://183.78.169.53/tm/tyreDetails.php?tyre=F1L. So cant I use the get function in php to capture first the tyre value. Then send over to javascript? How does your location.search works? So once we retrieve the tyreID using qs.match(/tyre=(\w+)/)[1]; where are we going to apply the tyreID?

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Dear Paul,
    I guess this part when I call the pop up is like this for e.g. http://183.78.169.53/tm/tyreDetails.php?tyre=F1L. So cant I use the get function in php to capture first the tyre value. Then send over to javascript?
    Yes, that is an alternative that can be used instead.

    Quote Originally Posted by newtomysql View Post
    How does your location.search works?
    location.search is a part of the location object, the search part \contains the querystring, that in this case being ?tyre=F1L

    Quote Originally Posted by newtomysql View Post
    So once we retrieve the tyreID using qs.match(/tyre=(\w+)/)[1]; where are we going to apply the tyreID?
    You can then pass that tyreID to a function in the parent window, along with data that you need, so that the parent can perform the needed update.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  17. #17
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Ok in the pop-up I have this function in it. So I have this function selectAndUpdate. What I want is that the checkbox value to replace the select word. I know this line window.opener.document.form.details.value = val; The problem here is static but my tyreID is dynamic how to replace that here well?

    var qs = location.search, tyreID = qs.match(/tyre=(\w+)/)[1];
    alert("Tyre ID is :"+tyreID);
    function selectAndUpdate(val)
    {
    alert("VAL :"+val);
    window.opener.document.form.details.value = val;
    }

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Ok in the pop-up I have this function in it. So I have this function selectAndUpdate. What I want is that the checkbox value to replace the select word. I know this line window.opener.document.form.details.value = val;
    There can be problems with a child updating the parent, so what seems to work best is for the parent to have a function that performs the update, and for the child to call that function so that the changes can be made.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  19. #19
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    How will the script look like because I dont find any relevant sample as per your suggestion?

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    How will the script look like because I dont find any relevant sample as per your suggestion?
    The parent script would just use document.getElementById() with the id that's passed to the function, to update it with the value that's also passed to the same function.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  21. #21
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    Is this how you meant? But to call this function for now I have kept it in the parent window. So you said call from the child how to call it ?

    function updateValue(tyreID,val)
    {
    var mySelect = document.getElementById(tyreID);
    mySelect.value=val;
    }

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Is this how you meant? But to call this function for now I have kept it in the parent window. So you said call from the child how to call it ?
    In the same way that you have made other calls to the parent window.

    window.opener.updateValue(..., ...)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  23. #23
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    But can my codes change the select word the val based on the checkbox selected. Thank you.

  24. #24
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,696
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    But can my codes change the select word the val based on the checkbox selected. Thank you.
    The child can pass whatever information is needed to the parent, and the parent can make whatever changes you need to make.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  25. #25
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    874
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Dear Paul,
    I manage to solve all the relevant problem. Now I got a next problem where I need to post this form and I must make sure now the all the select are replace with the tyre serial and also how am I going to capture the post value as there all will be dynamic? Any idea?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •