Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Changing params in javascript without reloading page

    Hi, I need to dynamically change the params in a script used in a Paypal checkout.
    The page script they generate looks like this:
    Code:
    <script> 
        data-callback="my-callback-page.asp" 
        data-tax="0" 
        data-shipping="0" 
        data-currency="GBP" 
        data-amount="5.00" 
        data-name="High-resolution JPEG - <%=filenames(0)%>" 
        data-button="cart" src="paypal-button-minicart.min.js?merchant=myMerchantID"
    ></script>
    As you can see, I've modified it to dynamically populate the product description ('data-name') using ASP, but only on loading the page. I want to change this parameter for each image clicked, without reloading the page each time.
    Thanks

  • #2
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    give the tag an id, use getElementById() to grab the tag, and then call tag.setAttribute on the tag object to configure it how you need. looks to me like you're closing the opening tag too early, and the data-attribs should be in the open tag...
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #3
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks.
    Um... what do you mean by tag?
    I wondered if I could give the script an ID and refer to it, but Dreamweaver didn't seem happy with it so I didn't go any further

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,028
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    And you *TRUST* DrunkWalker to do anything in coding right?

    That's 80% of your problem, right there. DoofusWhacker should have been named "Nightmare Stalker" as that's the only kinds of coding "dreams" it can produce.

    Anyway, he was referring to the fact that you started out with
    Code:
    <script>
    That is, you *CLOSED* the <script> tag way way too soon.

    The closing > must come *after* all the properties.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    AH yes. duh. didn't notice that '>'
    So while I wait for a reply, I'll assume it's possible to give the script an ID (<script id="myscript") and I'll look for ways to call it and change it, starting with myscript.attribute or something similar??

    Thanks folks, it's all helpful

  • #6
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by darkmunk View Post
    AH yes. duh. didn't notice that '>'
    So while I wait for a reply, I'll assume it's possible to give the script an ID (<script id="myscript") and I'll look for ways to call it and change it, starting with myscript.attribute or something similar??

    Thanks folks, it's all helpful
    yes, for example:
    Code:
    <script id=myScript
        data-callback="my-callback-page.asp" 
        data-tax="0" 
        data-shipping="0" 
        data-currency="GBP" 
        data-amount="5.00" 
        data-name="High-resolution JPEG - <%=filenames(0)%>" 
        data-button="cart" src="paypal-button-minicart.min.js?merchant=myMerchantID"
    ></script>
    
    
    <script>
    
    var scr=document.getElementById("myScript");
    scr.setAttribute("data-amount", "12.34");
    
    //in modern browsers you can use the shortcut:
    scr.dataset.currency="USD";
    
    //look at the changes:
    alert(scr.outerHTML);
    </script>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • #7
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks,
    I have tried to add a version of your code to my function, but this new part of it isn't working. The alert isn't popping up and the data-name attribute isn't changing.
    Here's the function that is being called successfully and changes the image, but nothing else
    Code:
    <script language="JavaScript">
    		function changeImage(imageName, desc){
    			var imgobj;
    			var divobj;
    			imgobj=document.getElementById('bigImage1');
    			imgobj.setAttribute('src','<%=path%>/' + imageName );
    			divobj=document.getElementById('descp').innerHTML=desc;
    			
    var buttonScript=document.getElementById("paypalButton");
    buttonScript.setAttribute("data-name", "test");
    
    alert("test alert" + buttonScript.outerHTML);
      
    		}
    	</script>
    And here's the modified PayPal code which I have tried to give an ID to:
    Code:
    <script id="paypalButton" 
        data-callback="my-callback-page.asp" 
        data-tax="0" 
        data-shipping="0" 
        data-currency="GBP" 
        data-amount="5.00" 
        data-name="High-resolution JPEG - " 
        data-button="cart" src="paypal-button-minicart.min.js?merchant=myMerchantID"
    ></script>
    any ideas?

  • #8
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,277
    Thanks
    10
    Thanked 581 Times in 562 Posts
    Quote Originally Posted by darkmunk View Post
    Thanks,
    I have tried to add a version of your code to my function, but this new part of it isn't working. The alert isn't popping up and the data-name attribute isn't changing.

    any ideas?

    it's gotta be something not shown in the code on this page, i just tested your+my code and it's fine:

    Code:
    <script id="paypalButton" 
        data-callback="my-callback-page.asp" 
        data-tax="0" 
        data-shipping="0" 
        data-currency="GBP" 
        data-amount="5.00" 
        data-name="High-resolution JPEG - " 
        data-button="cart" src="paypal-button-minicart.min.js?merchant=myMerchantID"
    ></script>
    
    
    <button onclick=changeImage()>testme</button>
    <script>
        	function changeImage(imageName, desc){
    			
    			
    var buttonScript=document.getElementById("paypalButton");
    buttonScript.setAttribute("data-name", "test");
    
    alert("test alert" + buttonScript.outerHTML);
      
    		}
       
    
    </script>
    my site (updated 13/9/26)
    BROWSER STATS [% share] (2014/5/28) IE7:0.1, IE8:5.3, IE11:8.4, IE9:3.2, IE10:3.2, FF:18.2, CH:46, SF:7.9, NON-MOUSE:32%

  • Users who have thanked rnd me for this post:

    darkmunk (07-05-2013)


  •  

    Posting Permissions

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