www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Parse HMTL before output

  1. #1
    Join Date
    Oct 2009
    Posts
    18

    resolved [RESOLVED] Parse HMTL before output

    Hi,

    I have a variable which contains a string of html that I wish to output into a content div on the click of a button. e.g:

    Code:
    html = "<span>
      <div id=\"tMonthHeading0\" class=\"infoHeading\" >April</div>
      <br />
      <a id=\"tEventLink0\" href = http://www.loughboroughtownhall.co.uk/events/bottle_rocket_comedy_club26 target = \"_blank\">Bottle Rocket Comedy Club</a>
      <br />
      <div id=\"tDay1\">Fri</div>
      <div id=\"Date1\">9th</div><div id=\"Time1\">9pm</div>
      <br />
      <div id=\"tTicketLabel\">Tickets:</div>
      <div id=\"price\">&#163;9.00</div>
      <a id=\"tBuyLink\" href = http://purchase.tickets.com/buy/TicketPurchase?agency=LOUGHBOROUGH&organ_val=22266 target = \"_blank\" >Buy Here</a>
      <br />
    <span>"
    I can toggle the content of the div with the string above, but I wish to include the ability to parse that string before output, so I can translate its language before its output.

    I can easily do this once the html is output into the content div using the JS HTML DOM, but due to this conversion not being instant I'm looking into ways of translating this text before it is output, so changing the string stored in the variable html.

    The only way I found to parse a string of HTML is XML DOM. e.g:

    Code:
    function translateText (html)
    {
        document.getElementById('test').value = html;
        if (window.DOMParser)
        {
          parser = new DOMParser();
          xmlDoc = parser.parseFromString(html,"text/xml");
        }
        else
        {
          xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
          xmlDoc.async = "false";
          xmlDoc.loadXML(html); 
        }
        span = xmlDoc.getElementsByTagName('span');
    	
        alert(span[0].childNodes.length);
    
        for (var i = 0; i < span[0].childNodes.length; i++)
        {
          alert(span[0].childNodes[i].nodeValue);
        }
    }
    I assumed this would do the job to parse html, but when I alert the length of span's childNodes it outputs 6, which is incorrect, and if I then go on to output the node values of each of the children, they are all blank or null.

    My aim is to parse the string and replace and node with an id starting with 't' with its translated text, which I am doing using a google language api function. The translation is not a problem, Its the parsing of the HTML string thats the problem at the moment.

    The function is use to parse the HTML DOM is as follows:

    Code:
    function changeLanguage() {
      var infoContainer = document.getElementById('textContainer');
    		
      for (var i=0; i<infoContainer.childNodes.length; i++)
      {
        if (typeof(infoContainer.childNodes[i].id) != "undefined")
        {
          if (infoContainer.childNodes[i].id.substring(0, 1) == "t")
          {
    	translateObj(infoContainer.childNodes[i])
          }
      }
    }
    Where translateObj() replaces the nodeValue of the child, with the translated text. So basically Im hoping to achieve this without loading the HTML string onto the page first.

    I hope this all makes sense.

    Thanks

  2. #2
    Join Date
    May 2007
    Location
    Surrey, UK
    Posts
    75
    Let me get this straight, do you want to replace just the text node of the html element or do you want to dynamically create the id for the element also?

    Why don't you just break up the html string and just insert some variables into it with concatenation?
    like...

    var month;

    var html = "<div id=/"tmonth/">" + month + "<//div>";

    and just use your translation function to do the work beforehand?

    any good?

  3. #3
    Join Date
    Oct 2009
    Posts
    18
    Sorry, I forgot to add this bit in. This is a problem i've been fighting from the start. The HTML is created by PHP, I've tried to think of a way of incorporating the JS in the PHP creation of the HTML and I've hit a dead end.

    I like the idea, its just the inclusion in the PHP class I'm having trouble working out.

    If it's any help i've attached the PHP that creates the HTML:

    Code:
    		public function toHTML ($events = false)
    		{
    			$html;
    			$eventMonths;
    			
    			if ($events == false)
    			{
    				$events = $this->events;
    			}
    			
    			foreach ($events as $event)
    			{
    				$eventMonths[date('F', $event->getStartDate())][] = $event;
    			}
    			
    			$mIdNo = 0;
    			$html .= "<span>";
    			
    			foreach ($eventMonths as $month => $events)
    			{
    
    				$html .= "<div id=\"tMonthHeading" . $mIdNo . "\" class=\"infoHeading\" >" . $month . "</div><br />";
    				$eIdNo = 0;
    				
    				foreach ($events as $event)
    				{
    					$html .= "<a id=\"tEventLink" . $eIdNo . "\" href = " . $event->getEventLink() . " target = \"_blank\">" . $event->getName() . "</a><br />";
    					
    					if ($event->getEndDate() == "")
    					{
    						if ($event->getEndTime() == "")
    						{
    							$html .= "<div id=\"tDay1\">" . date ('D', $event->getStartDate()) . "</div><div id=\"Date1\">" . date ('jS', $event->getStartDate()) . "</div><div id=\"Time1\">" . date('ga', $event->getStartTime()) . "</div>";
    						}
    						else
    						{
    							$html .= date ('D jS', $event->getStartDate()) . ": " . date('ga', $event->getStartTime()) . " - " . date('ga', $event->getEndTime());
    						}
    					}
    					else
    					{
    						if ($event->getEndTime() == "")
    						{
    							if ($event->getStartTime() != "")
    							{
    								$html .= date ('D jS', $event->getStartDate()) . " - " . date ('D jS', $event->getEndDate()) . ": " . date('ga', $event->getStartTime());
    							}
    							else
    							{
    								$html .= date ('D jS', $event->getStartDate()) . " - " . date ('D jS', $event->getEndDate());
    							}
    						}
    						else if ($event->getStartTime != "")
    						{
    							$html .= date ('D jS', $event->getStartDate()) . " - " . date ('D jS', $event->getEndDate()) . ": " . date('ga', $event->getStartTime()) . " - " . date('ga', $event->getEndTime());
    						}
    					}
    					$html .= "<br />";
    					
    					if ($event->getTicketPrice() == 0)
    					{
    						$html .= "Tickets: Free Entry";
    					}
    					else
    					{
    						$html .= "<div id=\"tTicketLabel\">Tickets:</div><div id=\"price\">&#163;" . $event->getTicketPrice() . "</div><a id=\"tBuyLink\" href = " . $event->getBuyLink() . " target = \"_blank\" >Buy Here</a>";
    					}
    					$html .= "<br /><br />";
    					$eIdNo++;
    				}
    				$mIdNo++;
    			}
    			$html .= "</span>";
    			return $html;
    		}

  4. #4
    Join Date
    May 2007
    Location
    Surrey, UK
    Posts
    75
    okay I have one Idea. How about in your php script, instead of dynamically inserting the text values into the html hard code the name of the javascript variable that will be used to insert the text value plus the concatenation syntax so that the text value can be inserted with javascript later on the client side.

    Then create more strings in your php, one for each text node and pass the strings to the javascript like so,

    Code:
    var month = "Month that was chosen with php backend and passed to javascript";
    
    var html = "<div id=/"tmonth/">" + month + "<//div>";

    this way you will be able to do operations in javascript before it is output and if it doesn't need translating then then it is simply output unchanged.

    you could also make a copy of the default version when making the translation like

    Code:
    var month = "Month that was chosen with php backend and passed to javascript";
    
    if (needs translating)  {
    
    tmonth = translate(month);
    
    {
    
    else  {
    
    tmonth = month;
    
    }
    
    
    var html = "<div id=/"tmonth/">" + tmonth + "<//div>";

    this way you can add better functionality to toggle between languages because you can store the translations as they are created.

    how about that?

  5. #5
    Join Date
    Oct 2009
    Posts
    18
    That works a treat, Cheers!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles