Displaying content based on the id attribute

[mostwanted]

I have a hidden span that i want displayed when a link is clisked while waiting for the page to load but this is not working! I dont know where I am going wrong but thought I had it right, please assist me.

CSS:

.link_loader
{
    display: none;
}

CONTROLLER

#The yellow line is the hidden span that has the loader I want to display

def ajaxlivesearch():
    keywords = request.vars.keywords
    print "Keywords: " + str(keywords)

    if keywords:
        query = reduce(lambda a,b:a&b,[db.services.service_name.contains(k) for k in keywords.split()])
    services = db(query).select()
    items = []

if services:
        for c in services:
            items.append(DIV(SPAN("loading ...", SPAN(_class="fa fa-spinner fa-spin"), _class="link_loader", data={'id':"res%s"%c.service_name}), A(c.service_name, _class="service", _style="font-weight: bold;", _href=URL('companies', args=c.id), _id="res%s"%c.service_name, _onclick="updatelivesearch(jQuery('#res%s').html())" % c.service_name)))

VIEW

#This jQuery script attempts to display the hidden span

<script>
$(document).ready(function(){
            $('.service').click(function(e) {
        const id = $(this).data('id');
        $('#' + id).fadeIn();
        e.preventDefault();

            });
            });
</script>

Regards;

Mostwanted

[Jim S]

Have you checked your browser console to see if you have any javascript errors?

-Jim

[mostwanted]

Hey Jim, I have but it shows no errors!

[Jim S]

Can you put some console.log() statements in your javascript inside your function to see what is/isn't working?

-Jim

[mostwanted]

I threw in  console.log("Hello world!");  but its not printing anything on the console! The link events are not being handled!

[Jim S]

Ok, trying to better understand your intent.

You said:

I have a hidden span that i want displayed when a link is clisked while waiting for the page to load but this is not working! I dont know where I am going wrong but thought I had it right, please assist me.

Are you trying to show the span when the link is clicked 'while' the page is loaded?  I'm guessing you are clicking the link after the page is loaded.  Can you confirm?

Also, where in your javascript did you add the console.log()?

-Jim

[mostwanted]

" Are you trying to show the span when the link is clicked 'while' the page is loaded?  ":  Yes sir

" I'm guessing you are clicking the link after the page is loaded ": Yes sir

"Also, where in your javascript did you add the console.log()?":  I added it inside the click function just before initialization of the id variable

<script>
$(document).ready(function(){

            $('.service').click(function(e) {

console.log( "Hello world!" );

        const id = $(this).data('id');
        $('#' + id).fadeIn();
        e.preventDefault();

            });
            });
</script>

[Jim S]

What is the 

_onclick="updatelivesearch(jQuery('#res%s').html())" % c.service_name

on your anchor tag inside your span?

Can you try removing that?

Since you have a listener for the click of that element already, I'm not sure how it behaves if you have the onclick attribute set as well.  Maybe there are some stronger javascript people that can jump in.

-Jim

[mostwanted]

_onclick="updatelivesearch(jQuery('#res%s').html())" % c.service_name

This is a function that displays suggested names through ajax auto-completion everytime a user types something on the search-textfield. When they type, a suggestion-div appears below the search-field with suggested names as links ofcourse and when the users identifies the name they were looking for & clicks on it this function populates the search-textfield with the clicked name & causes the suggestion-div with names to disappear.

function updatelivesearch(value){
jQuery("#livesearch").val(value);
jQuery("#livesearchresults").hide();
}

Thanks alot for your input Jim i'll keep working on it, one way or the other i'll figure it out.

Gratitude.

[Jim Steil]

Can you remove the _onclick from that element and add that function call to the end of your listener defined in document ready?

-Jim

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/O9iXEbdOkFE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/4863b201-a4eb-4f4c-b9bd-edb6ca808acdn%40googlegroups.com.

[mostwanted]

Hey Jim I did remove the _onclick function & tried to apply to the end of the listener as you've suggested but still nothing is happening, these links are not responsive & I dont know why!

[Jim S]

Can you post the final html that is generated by web2py?

-Jim

[mostwanted]

What do you mean the final html Jim? Do you mean the actual code or the page generated?

[Jim S]

The page that was generated

-Jim

[mostwanted]

The links in the black box are the results generated when when a user searches for a service & those are the links that when clicked I need to display the hidden div next to them to show that the page is loading

[Jim S]

Sorry, I was looking for the actual html code that is generated. 

-Jim

[mostwanted]

<div id="find">
<div id="titles">
<div id="alheader">SESOA<span style="font-size: 20px;">™</span><br>
<span id="alsubheader">Kgolagano Ya Kgwebo™</span><br>
</div>
</div>
<br>
<br>
<script>
$(document).ready(function(){
$('a.service').on("click",function() {
const id = $(this).attr('id'); // Extract the data-id attribute of the link.

$(data('id')==id).fadeIn(); // Select the contact with that id.
//e.preventDefault();

});
});
</script>
<input type="text" id="livesearch" autocomplete="off" onkeyup="livesearch(this.value);" autofocus="" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Search by service or product"><br>
<div id="livesearchresults" style="display: block;"><div><div><div><span class="link_loader" data-id="resCarpentry and Wood Work">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/4" id="rescaww" onclick="updatesearch(jQuery('#rescaww').html())" style="font-weight: bold;">Carpentry and Wood Work</a></div><div><span class="link_loader" data-id="resCab">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/20" id="rescab" onclick="updatesearch(jQuery('#rescab').html())" style="font-weight: bold;">Cab</a></div><div><span class="link_loader" data-id="resCar Electricity">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/21" id="rescaeltcty" onclick="updatesearch(jQuery('#rescaeltcty').html())" style="font-weight: bold;">Car Electricity</a></div><div><span class="link_loader" data-id="resPrivate Clinics &amp; Health Care">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/29" id="resprvtclncs" onclick="updatesearch(jQuery('#resprvtclncs').html())" style="font-weight: bold;">Private Clinics &amp; Health Care</a></div><div><span class="link_loader" data-id="resFood Catering">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/30" id="resfdctrng" onclick="updatesearch(jQuery('#resfdctrng').html())" style="font-weight: bold;">Food Catering</a></div><div><span class="link_loader" data-id="resElectrical Installation">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/38" id="reselctrcn" onclick="updatesearch(jQuery('#reselctrcn').html())" style="font-weight: bold;">Electrical Installation</a></div><div><span class="link_loader" data-id="resAcademic Tutoring">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/41" id="resadmcttrn" onclick="updatesearch(jQuery('#resadmcttrn').html())" style="font-weight: bold;">Academic Tutoring</a></div><div><span class="link_loader" data-id="resLandscaping and Gardening">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/56" id="reslnscpngdng" onclick="updatesearch(jQuery('#reslnscpngdng').html())" style="font-weight: bold;">Landscaping and Gardening</a></div><div><span class="link_loader" data-id="resInternet Cafe">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/73" id="resintcf" onclick="updatesearch(jQuery('#resintcf').html())" style="font-weight: bold;">Internet Cafe</a></div><div><span class="link_loader" data-id="resCalligrapher">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/76" id="resclgrph" onclick="updatesearch(jQuery('#resclgrph').html())" style="font-weight: bold;">Calligrapher</a></div><div><span class="link_loader" data-id="resPre-school, Day Care Center, Creche">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/79" id="rescreche" onclick="updatesearch(jQuery('#rescreche').html())" style="font-weight: bold;">Pre-school, Day Care Center, Creche</a></div><div><span class="link_loader" data-id="resCar, Mats and Sofa Washes">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/80" id="rescmw" onclick="updatesearch(jQuery('#rescmw').html())" style="font-weight: bold;">Car, Mats and Sofa Washes</a></div><div><span class="link_loader" data-id="resCattle Breeding">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/91" id="rescbrdn" onclick="updatesearch(jQuery('#rescbrdn').html())" style="font-weight: bold;">Cattle Breeding</a></div><div><span class="link_loader" data-id="resCattle Trailer Hiring">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/98" id="resctrhrn" onclick="updatesearch(jQuery('#resctrhrn').html())" style="font-weight: bold;">Cattle Trailer Hiring</a></div><div><span class="link_loader" data-id="resScaffold Structure Hiring">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/101" id="resssh" onclick="updatesearch(jQuery('#resssh').html())" style="font-weight: bold;">Scaffold Structure Hiring</a></div><div><span class="link_loader" data-id="resCar Parts &amp; Components">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/106" id="rescpac" onclick="updatesearch(jQuery('#rescpac').html())" style="font-weight: bold;">Car Parts &amp; Components</a></div><div><span class="link_loader" data-id="resElectrical Parts &amp; Components">loading ...<span class="fa fa-spinner fa-spin"></span></span><a class="service" href="/init/default/companies/107" id="resepac" onclick="updatesearch(jQuery('#resepac').html())" style="font-weight: bold;">Electrical Parts &amp; Components</a></div></div><div><div><a class="product" href="/init/default/companies2/1" id="rescabp" onclick="updatesearch(jQuery('#rescabp').html())" style="font-weight: bold;">Cakes and Bakery Products</a></div><div><a class="product" href="/init/default/companies2/10" id="resbcaf" onclick="updatesearch(jQuery('#resbcaf').html())" style="font-weight: bold;">Business Cards and Flyers</a></div><div><a class="product" href="/init/default/companies2/14" id="resbc" onclick="updatesearch(jQuery('#resbc').html())" style="font-weight: bold;">Brahman Cattle</a></div><div><a class="product" href="/init/default/companies2/21" id="resllcf" onclick="updatesearch(jQuery('#resllcf').html())" style="font-weight: bold;">Lab-Lab Cattle Feed</a></div><div><a class="product" href="/init/default/companies2/22" id="resngcf" onclick="updatesearch(jQuery('#resngcf').html())" style="font-weight: bold;">Nupia Grass Cattle Feed</a></div><div><a class="product" href="/init/default/companies2/23" id="resymcf" onclick="updatesearch(jQuery('#resymcf').html())" style="font-weight: bold;">Yellow Maize Cattle Feed</a></div></div><div><div style="color: red; font-weight: bold;"><span class="fa fa-exclamation-triangle"></span>NO RESULTS IN PRIVATE SELLERS!</div></div></div></div>
</div>

I'm not sure if this is what you are looking for but that is what is generated for the above screenshot i sent earlier.

Sorry i couldnt format the code in editor text, ever since the platform changed I never know how to format the code to look like the code with all the necessary color coding!

[Jim S]

There is more to it, right?  I see lots of javascript functions in there with no definition.

-Jim

[mostwanted]

Yah there is more ot it, is there something specific you were looking for? Some javascript functions I have saved seperately like the one being called by the function in the controller ( _onclick="updatelivesearch(jQuery('#res%s').html())" % c.service_name )

[Jim S]

I'm confused by this:

$(data('id') == id).fadeIn(); // Select the contact with that id.

What is data('id') supposed to return?

Or is this some jquery thing I'm not aware of?

-Jim

[mostwanted]

I dont think i wrote this  $(data('id') == id) properly but data('id') is supposed to return the data-id attribute of the hidden span i'm trying to show

[Jim Steil]

Can you test that?

Jim

To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/05b5bbe7-0587-4661-9070-213c008b0ba2n%40googlegroups.com.

[mostwanted]

So Jim i've decided to take a different approach with my code because my initial approach is giving me a headache.

I got rid of this function below:

<script>
            $(document).ready(function(){
            $('a.service').on("click",function() {
        const id = $(this).attr('id'); // Extract the data-id attribute of the link.
        $(data('id')==id).fadeIn(); // Select the contact with that id.
        //e.preventDefault();
               
            });
            });
</script>

& decided to have every link display a loading image upon clicking them so that my PWA application can have a way of showing the user that the link they clicked is in the progress of opening a new page so I implemented this function below:

<script>

$(function(){
              $('#loading').css('display', 'none');
       $("a:not([href*='#'])").on('click', function(e) {
           var link =$(this).attr('href');
              $('#loading').css('display', 'inline');
           window.location.href=link;
           e.preventDefault();
       });
          });

</script>

<div id="loading">
{{=SPAN("loading ...", SPAN(_class="fa fa-spinner fa-spin"), _id="loading-image")}}
      </div

And its achieving the desired goal.

I just wanna thank you for taking your time in helping figure out whats wrong with my code. I really really appreciate it.

Thank you.

[AGRogers]

That was a long thread which I didn't read fully. But what I did read made me think that maybe the original problem was that you needed a slight delay between when you showed the span and when you made the ajax call. I do that by putting the ajax call in a setTimeout function. If I don't, the screen doesn't update until the ajax call is completed. 

--

Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---

You received this message because you are subscribed to the Google Groups "web2py-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/3b8a175c-ecdc-47e5-a157-45e7fe260f9fn%40googlegroups.com.

[mostwanted]

Oh ok, that makes sense, that could've worked