www.webdeveloper.com
Results 1 to 8 of 8

Thread: Jquery replace text not working... is there a better way?

  1. #1
    Join Date
    Oct 2011
    Posts
    4

    Jquery replace text not working... is there a better way?

    Hi,

    I have a div on my page as follows. I need the string 'thumb1' set to 'thumb2'. I tried doing that by using this code. What is the best way to do this?

    Code:
    $(function(){
    $("#tabs-2").text().replace("thumb1", "thumb2");
    
    
    or I tried this which is syntax for the replace text plugin
    $("#tabs-2").replaceText( 'thumb1', 'thumb2" );

    Code:
    <div id="tabs-2">
    	
    	<div style="width: 270px; float:left">
    	<ol>
    	<li><a id="one" href="/" title="Wie" onMouseOver="setpage('thumb1', '/', '')"><span class="wpp-post-title">Wowie</span></a> <span class="wpp-post-time">( )</span></li>
    	<li><a id="one" href="" title="Bow wow" onMouseOver="setpage('thumb1', '', '')"><span class="ost-title">Bow wow</span></a> <span class="st-time">( )</span></li>
    	<li><a id="one" href="" title="" onMouseOver="setpage('thumb1', /', '')"><span class="wpp-post-title"></span></a> <span class="wpp-post-time">( )</span></li>
    	</ol>
    
    	
    	</a>
    	</div>

  2. #2
    Join Date
    Sep 2009
    Posts
    159
    I am deeply lost in your code. You are calling a function called 'setpage' with 2 arguments on onMouseover event, which can be found nowhere in your js code.

    Besides, your HTML mark-up has no text node 'thumb1' anywhere either.

    What do you exactly try to accomplish? I'm guessing you want an event to fire up when you hover the cursor on one of the elements. Other than that, I have no idea on what is getting done.

  3. #3
    Join Date
    Oct 2011
    Posts
    4
    Hi Pactor21,

    Sorry for the confusion. I am editing someone else's code, so I am having trouble understanding it myself.

    Here is the full javascript code

    Code:
      var url = '';
      function setpage(i,u,t) {
        url = u;
        jQuery('#' + i).attr('src',t);
      }
    
    $(function(){
    $("#tabs-2").text().replace("thumb1", "thumb2");
    
    
    or I tried this which is syntax for the replace text plugin
    $("#tabs-2").replaceText( 'thumb1', 'thumb2" );
    The thumb1 is in the text node, it is being passed in setpage as shown below

    Code:
    <a id="one" href="/" title="Wie" onMouseOver="setpage('thumb1', '/', '')">

    The issue is the code that generates the a tag that contains the onmouseover is being output dynamically by php code.


    What I have are three tabs that contain the most recent posts of day, week, and month.

    With the current code the way it is set, when you mouseover a link to a recent post, the thumbnail for the post is supposed to appear. This works for the posts on the first tab because the thumbnail url is passed to an image with an id of thumb1.

    The problem is the image id on the second tab is thumb2 and the image id on the third tab is thumb3, so the thumbnails for the posts on the second and third tab are still showing up on thumb1 on the first tab.


    My thought was with javascript (specifically jquery), as the page loads, the setpage('thumb1'......etc) could be set to setpage('thumb2'.....etc) for the second tab div (#tabs-2). The third tab (#tabs-3) could be changed from setpage('thumb1...etc to setpage('thumb3....etc)

  4. #4
    Join Date
    Sep 2009
    Posts
    159
    All right. I think i'm still missing something here. Your setpage function takes 3 arguments, which are below.
    1. id of an element
    2. url
    3. src of an element

    With those information provided, the function tries to find an element with the given id, then adds the given url to the src attribute.(it overrides the src attribute if one already exists.)

    so let's say you call the function on an a tag as below.
    HTML Code:
    <a id="one" href="/" title="Wie" onMouseOver="setpage('thumb2', '/', '')">
    Well the function tries to find an element with id of thumb2 adding '/' as the value of the src attribute to it. Unfortunately there is no element in your HTML code that has id of thumb2. Consequently that whole jQuery code does nothing.

    Does this clear any vague part of your code?

  5. #5
    Join Date
    Oct 2011
    Posts
    4

    Jquery selector

    Ok I have revised my code and am getting closer to a solution, I just need one more piece.

    What I need to know is in the code below how do I use jquery selectors to select thumb2 and replace it with another value such as thumb3?

    I want to be able to do this without messing with /wowie or wowie.jpg as they are php variable outputs

    Code:
    <div id="tabs-2"<a href="/" title="Wie" onMouseOver="setpage('thumb2', '/wowie', 'wowie.jpg' )">

    I think it should be something like

    Code:
    $('#tabs-2 a[onmouseover*="thumb2"]')
    but this selects the entire #tabs2 div content instead of just the value "thumb2"

  6. #6
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    you may very well want to show the entire page's code.
    - From what you are asking I suspect there is a much simpler way to accomplish the task.

    - also Id liek to point out, you cant use the text() function to edit the onmouseover attribute int he first place. .text() is for text, .attr or .prop are used to change atrribute values.

  7. #7
    Join Date
    Dec 2008
    Posts
    488
    Try this instead:

    Code:
    $("#tabs-2").text($("#tabs-2").text().replace("thumb1", "thumb2"));

  8. #8
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    Oh also ID's are Unique. you have three elements with an id of "one". if you want to reassign the event for the first li, try this:
    in the head section
    Code:
    $(document).ready(function(){
    $("#test").click(function(){
    //if you cant fix the mutiple same ids use : $("#tabs-2 div ol li").eq(0).find("a") instead of $("#one") to find //the A element in the first LI
         $("#one").unbind("onmouseover");
          $(#one").bind("onmouseover",setpage('thumb2', '/', ''));
         });
    });
    HTML Code:
    <div id="tabs-2">
    	<button type="button" value="change element function" id="test"><br>
    	<div style="width: 270px; float:left">
    	<ol>
    	<li><a id="one" href="/" title="Wie" onMouseOver="setpage('thumb1', '/', '')"><span class="wpp-post-title">Wowie</span></a> <span class="wpp-post-time">( )</span></li>
    	<li><a id="two" href="" title="Bow wow" onMouseOver="setpage('thumb1', '', '')"><span class="ost-title">Bow wow</span></a> <span class="st-time">( )</span></li>
    	<li><a id="three" href="" title="" onMouseOver="setpage('thumb1', /', '')"><span class="wpp-post-title"></span></a> <span class="wpp-post-time">( )</span></li>
    	</ol>
    
    	
    	</a>
    	</div>
    Last edited by DanInMA; 12-01-2011 at 09:04 AM.

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