SitePoint Sponsor

User Tag List

Page 1 of 5 12345 LastLast
Results 1 to 25 of 112
  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,716
    Mentioned
    103 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,716
    Mentioned
    103 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,716
    Mentioned
    103 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,716
    Mentioned
    103 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
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    Ok I have done the changes via this method <label id=".$roPosition." onClick=window.open('tyreDetails.php','TyreDetails')>Select</label> is this ok?
    Not really, because a label doesn't provide the user the visual clue that it can be clicked, so leave it as a link.

    Code html4strict:
    <a id=".$roPosition." href="#">Select</a>

    You are going to have the same onclick event code duplicated around many times on your page, which goes strongly against the DRY principle - don't repeat yourself. Don't use inline onclick attributes, and instead use one piece of scripting to attach a function to the onclick event of the links.

    Code javascript:
    function openTyreDetails() {
        window.open('tyreDetails.php', 'TyreDetails');
    }

    We can also let the child window know the id value of the one that was used, because the this keyword from the onclick event refers to the element that triggered the event, so we can easily pass the id to the child window.

    Code javascript:
    function openTyreDetails() {
        window.open('tyreDetails.php?tyre=' + this.id, 'TyreDetails');
    }

    That way the child window can pass that id back to the parent window, so that the parent knows which one to affect. Does that make sense?

    The function is assigned to the onclick event of each link with the following type of code:

    Code javascript:
    var details = document.getElementById('layoutDetails'),
        links = details.getElementsByTagName('a'),
        i;
    for (i = 0; i < links.length; i += 1) {
        links[i].onclick = openTyreDetails;
    }

    The best place to put the script code is at the end of the body, just before the </body> tag. If the script is in the head, nothing below it exists yet, so there you're stymied when it comes to working with elements on the page.

    Not only is it best-practice to put scripts at the bottom to speed up your web page, it also allows the script to work with page elements as the page is loading.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    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>

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 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

  13. #13
    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>

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 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

  15. #15
    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?

  16. #16
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by newtomysql View Post
    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?
    The child window has a querystring where tyre is given the id value of the parent select. So, the child can retrieve that id value and do something useful with it.
    There are libraries available that allow you to easily manipulate it, but as you're only wanting to retrieve a value, you can use a regular expression for that.

    The following in the child window will retrieve the tyre value from the querystring, that being the id of the link that was clicked in the parent:

    Code javascript:
    var qs = location.search,
        tyreID = qs.match(/tyre=(\w+)/)[1];

    \w is for any alphanumeric characters as well as an underscore, the plus sign is for one or more of them, and the parenthesis form a capture group from which we retrieve the first match.

    You might have a querystring of:
    Code:
    ?tyre=RO1R
    so the above code will retrieve "RO1R"
    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,
    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?

  18. #18
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 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

  19. #19
    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;
    }

  20. #20
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 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

  21. #21
    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?

  22. #22
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 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

  23. #23
    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;
    }

  24. #24
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,716
    Mentioned
    103 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

  25. #25
    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.


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
  •