jquery - Converting inline Javascript to an onclick event -


i'll blunt. of skill in pure html , css. i'm trying more , more expand javascript , jquery , have experience, enough understand many simple tutorials , implement them own changes, not enough on own without cheatsheet or similar example work from. anyway:

i wanted try this tutorial found use ajax replace contents of div, implementation requires poor markup (inline js). doesn't suggest way utilize onclick event instead, , prefer inline js.

this "ajax engine" provides, choose import/link because feel it's silly dump in html:

<script type="text/javascript"> // version 1.1 of may 16, 2013 function requestcontent(url,id) { var http; if (window.xmlhttprequest) {    try { http = new xmlhttprequest(); }    catch(e) {}    }  else if (window.activexobject) {    try { http = new activexobject("msxml2.xmlhttp"); }    catch(e) {       try { http = new activexobject("microsoft.xmlhttp"); }        catch(e) {}       }    } if(! http) {    alert('\n\nsorry, unable open connection server.');    return false;    } http.onreadystatechange = function() { publishcontent(http,id); }; http.open('get',url,true); http.send(''); }  function publishcontent(content,id) { try {    if (content.readystate == 4) {       if(content.status == 200) { document.getelementbyid(id).innerhtml=content.responsetext; }       else { alert('\n\ncontent request error, status code:\n'+content.status+' '+content.statustext); }       }    } catch(error) { alert('error: '+error.name+' -- '+error.message); } } </script>

in order use function requestcontent, offers option plop inline js so:

<ul> <li> <a href="javascript:requestcontent('/library/ajaxcontent1.html','fill-me3')"> click here</a> fill div below master form .php logo. </li> <li> <a href="javascript:requestcontent('/library/ajaxcontent2.html','fill-me3')"> click here</a> fill div below master form v4 logo. </li> <li> <a href="javascript:requestcontent('/library/ajaxcontent3.html','fill-me3')"> click here</a> fill div below popular logo. </li> </ul>

i understand how inline js works, i'm not sure how write in way allow onclick event.

how go converting inline js? appreciate help.

using data attribute hold value allow add more links without having write more javascript.

html

<ul>   <li>     <a href="#" class="somelink" data-request-content="ajaxcontent1"> click here</a> fill div below master form .php logo.   </li>   <li>     <a href="#" class="somelink" data-request-content="ajaxcontent2"> click here</a> fill div below master form v4 logo.   </li>   <li>     <a href="#" class="somelink" data-request-content="ajaxcontent3"> click here</a> fill div below popular logo.   </li> </ul>

javascript

$('.somelink').on('click', function(e) {   var content = $(e.currenttarget).data('request-content');   requestcontent('/library/' + content + '.html', 'fill-me3'); });

Comments

Post a Comment

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

Image
i have page in each contest shown in row. each row contains contest id , link other model names have foreign key contest. news model: class news(models.model): title = models.charfield(max_length=50, null=true) description = models.textfield() time = models.timefield( default= datetime.datetime.now().time()) contest = models.foreignkey(contest) i want use admin adding , changing these models. want when user clicks on 'news' has foreign key contest id=1, shows list of news value foreign key. use {% instance in instances %} <tr class="{% cycle 'row1' 'row2' %}"> <td>{{ instance.title }}</td> <td>{{ instance.starttime }}</td> <td>{{ instance.timespan }}</td> <td>{{ instance.date }}</td> <td><a href="/adm
Read more

css - Make div keyboard-scrollable in jQuery Mobile? -

from can tell, although jquery-mobile-powered pages can contain divs overflow set scroll or auto, , these divs can scrolled one-screen bar or mouse wheel, cannot scrolled using arrow keys, page-up/page-down, or home/end. instead, official "page" div (with data-role="page") absorbs input. perhaps other divs can't acquire focus, i'm not sure. is there way around this? edit: jsfiddle of simple example: https://jsfiddle.net/qogz0shx/ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"> </script> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"/> <style> #outer { overflow:scroll; height: 50vh; width: 50vw; } #inner { height: 500vh; width: 500vw; } &l
Read more

ruby on rails - Seeing duplicate requests handled with Unicorn -

recently upgraded our ec2 instances c3.large in order boost more unicorn workers handle increased traffic our site. (6xworkers per machine - 2 ec2 instances). when did this, started seeing duplicate records being created! looks somehow, maybe 2 unicorn workers attempting process same request? in nginx logs see 1 [post] request particular rails controller - yet 2 records being created in database. i'm hitting kind of race condition issue - have no idea how debug this. doesn't happen time, when it's frustrating well. noticed 2 database records within 5 seconds of each other. (and yes disable button when user clicks submit button). unicorn 4.8.2 ruby 1.9.3 rails 3.2.14 any great! thanks! although may not fix problem, upgrade ruby 2.0.0. there blog mentioning idea upgrade ruby 2.0.0 if using unicorn. for example: https://www.digitalocean.com/community/articles/how-to-optimize-unicorn-workers-in-a-ruby-on-rails-app specifically: if using ruby 1.9,
Read more