217 Open Daily games
2 Open Realtime games
    Pages:   1   (1 in total)
  1. #1 / 7
    Shelley, not Moore Ozyman
    Rank
    Brigadier General
    Rank Posn
    #40
    Join Date
    Nov 09
    Location
    Posts
    3449

    Anyone here good with javascript/jquery?  There is something I want to do with my advanced editor that I think shouldn't be too difficult, but I'm not sure how to do it.  I'll go into more detail if anyone wants to try and help.


  2. #2 / 7
    Standard Member btilly
    Rank
    Colonel
    Rank Posn
    #85
    Join Date
    Jan 12
    Location
    Posts
    294

    Feel free to use this thread for rubber ducking.

    I learned JavaScript quite well in the last millennium and then mostly stayed away.  But I do things from time to time, have used JQuery, etc.

    At the least I can sanity check your ideas, and I might be able to offer solutions.


  3. #3 / 7
    Shelley, not Moore Ozyman
    Rank
    Brigadier General
    Rank Posn
    #40
    Join Date
    Nov 09
    Location
    Posts
    3449

    Here's the situation.  For lots of functions on the WGAME, I need to define a set of territories.  I thought of three ways to do this:

    1. explicitely list territory names
    2. match a pattern (regex)
    3. all territories in a continent

    This form shows an example where I do this twice:

    http://prestopnik.com/wargear/MapEditor/FactoryMakerForm.html

    The HTML/Javascript to generate one of these looks like this:

    <label for="MemberIDTypes">Define set of member territories by:</label><br />
    <div style="color:red;font-size:70%">Use a regex of just period asterisk (i.e. ".*") to match everything</div>
    <input type="radio" name="MemberIDTypes" onclick="setMemberSelection('regex')" value="MemberRegex">Regex</input>
    <input type="text" readonly="readonly" name="NamesMemberRegex" id="NamesMemberRegex" value="" />
    <br />
    <input type="radio" name="MemberIDTypes" onclick="setMemberSelection('CSV')" value="MemberCSV">Comma seperated list of names</input>
    <input type="text" readonly="readonly" name="NamesMemberCSV" id="NamesMemberCSV" value="" />
    <br />
    <div style="color:red;font-size:70%">Put the territories you want as members into a continent for convenience, then delete that continent later.</div>
    <input type="radio" name="MemberIDTypes" onclick="setMemberSelection('continent')" value="MemberContinent">Continent</input>
    <input type="text" readonly="readonly" name="NamesMemberContinent" id="NamesMemberContinent" value="" /> <br />
    <div style="font-size:75%">
    &nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" name="DeleteMemberContinent" id="DeleteMemberContinent" value="DeleteMemberContinent" /> Delete this continent after using </div>

    Then I have that same block of code repeated, except everywhere it says "Member" gets replaced with "Factory". 

     

    Basically I'd like to put all that above code into a function and then pass it an ID argument (i.e. 'Member' or 'Factory').

     

    It seems like this should be possible, but I'm not sure.  I know how to do this with PHP, but can I have a javascript function that generates javascript? Maybe this doesn't make sense, or maybe it's obvious.  I couldn't find an answer online for this.  My javascript knowledge is all self-taught and very spotty.


  4. #4 / 7
    Shelley, not Moore Ozyman
    Rank
    Brigadier General
    Rank Posn
    #40
    Join Date
    Nov 09
    Location
    Posts
    3449

    Maybe this page, shows an example of what I want to do (under Generating HTML With Javascript):

    http://www.caveofprogramming.com/javascript-2/javascript-html-generating-html-and-embedding-javascript-in-html/

    I guess I need to try it out, but is this the right track?


  5. #5 / 7
    Standard Member btilly
    Rank
    Colonel
    Rank Posn
    #85
    Join Date
    Jan 12
    Location
    Posts
    294

    Here is one (not very good) approach.

    Wrap the above in a div with an id of MemberDiv.  Create an empty div named FactoryDiv.  Then something like this should work:

    var content = $('#MemberDiv').html();
    content.replace(/Member/g, 'Factory');
    content.replace(/member/g, 'factory');
    $('#FactoryDiv').html(content);

    And then be very glad that nobody else is being asked to maintain this. :-P

    BTW if you're doing this, I'd recommend having the click handler pass two parameters so that you can simply use one JavaScript function for both divs.


  6. #6 / 7
    Shelley, not Moore Ozyman
    Rank
    Brigadier General
    Rank Posn
    #40
    Join Date
    Nov 09
    Location
    Posts
    3449

    I think I have some ideas how to do this.  The thing I'm wondering I guess, is when I use javascript to modify the DOM, is it ok to put javascript calls in the modifications?   Does that make sense?  Seems like you ought to be able, but I'm really not sure how all this stuff works.


  7. #7 / 7
    Standard Member btilly
    Rank
    Colonel
    Rank Posn
    #85
    Join Date
    Jan 12
    Location
    Posts
    294

    Yes, you can use JavaScript to modify the DOM, and put JavaScript in your modifications.  Either (as above) by including HTML that includes JavaScript, or by simply assigning JavaScript functions to appropriate spots in the DOM (like the on_click handler).

    In terms of having JavaScript dynamically generate JavaScript, there are three basic approaches.  You can insert JavaScript into a div as above.  You can pass JavaScript to the eval function.  Or you can be sane, learn about closures, and then use those.

    The book JavaScript, The Good Parts has served as a good introduction for a lot of people to the last option.  However it is kind of old, and I don't know what "the cool kids" are recommending these days to learn about what is out there.


You need to log in to reply to this thread   Login | Join
 
Pages:   1   (1 in total)