Re: [web2py] Re: Displaying content based on the id attribute

Jim S Sat, 07 Nov 2020 11:39:15 -0800

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


-Jim


On Saturday, November 7, 2020 at 1:23:26 PM UTC-6, mostwanted wrote:
>
> <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!
> On Saturday, November 7, 2020 at 8:09:47 PM UTC+2 Jim S wrote:
>
>> Sorry, I was looking for the actual html code that is generated.  
>>
>> -Jim
>>
>>
>> On Saturday, November 7, 2020 at 12:06:32 PM UTC-6, mostwanted wrote:
>>>
>>> [image: Screenshot (38).png]
>>> 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
>>> On Saturday, November 7, 2020 at 7:49:47 PM UTC+2 Jim S wrote:
>>>
>>>> The page that was generated
>>>>
>>>> -Jim
>>>>
>>>> On Saturday, November 7, 2020 at 11:48:37 AM UTC-6, mostwanted wrote:
>>>>>
>>>>> What do you mean the final html Jim? Do you mean the actual code or 
>>>>> the page generated?
>>>>>
>>>>> On Saturday, November 7, 2020 at 7:08:36 PM UTC+2 Jim S wrote:
>>>>>
>>>>>> Can you post the final html that is generated by web2py?
>>>>>>
>>>>>> -Jim
>>>>>>
>>>>>>
>>>>>> On Saturday, November 7, 2020 at 10:52:29 AM UTC-6, mostwanted wrote:
>>>>>>>
>>>>>>> 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!
>>>>>>>
>>>>>>> On Thursday, November 5, 2020 at 4:33:32 AM UTC+2 Jim S wrote:
>>>>>>>
>>>>>>>> Can you remove the _onclick from that element and add that function 
>>>>>>>> call to the end of your listener defined in document ready?
>>>>>>>>
>>>>>>>> -Jim
>>>>>>>>
>>>>>>>>
>>>>>>>> On Wed, Nov 4, 2020 at 8:29 PM mostwanted <godir...@gmail.com> 
>>>>>>>> wrote:
>>>>>>>>
>>>>>>>>> _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.
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> On Wednesday, November 4, 2020 at 7:34:44 PM UTC+2 Jim S wrote:
>>>>>>>>>
>>>>>>>>>> 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
>>>>>>>>>>
>>>>>>>>>>
>>>>>>>>>> On Wednesday, November 4, 2020 at 11:23:45 AM UTC-6, mostwanted 
>>>>>>>>>> wrote:
>>>>>>>>>>>
>>>>>>>>>>>
>>>>>>>>>>> *" 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>* 
>>>>>>>>>>> On Wednesday, November 4, 2020 at 4:09:12 PM UTC+2 Jim S wrote:
>>>>>>>>>>>
>>>>>>>>>>>> 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
>>>>>>>>>>>>
>>>>>>>>>>>>
>>>>>>>>>>>> On Wednesday, November 4, 2020 at 12:34:02 AM UTC-6, mostwanted 
>>>>>>>>>>>> wrote:
>>>>>>>>>>>>>
>>>>>>>>>>>>> I threw in  console.log("Hello world!");  but its not printing 
>>>>>>>>>>>>> anything on the console! The link events are not being handled!
>>>>>>>>>>>>>
>>>>>>>>>>>>>
>>>>>>>>>>>>> On Tuesday, November 3, 2020 at 11:35:19 PM UTC+2 Jim S wrote:
>>>>>>>>>>>>>
>>>>>>>>>>>>>> Can you put some console.log() statements in your javascript 
>>>>>>>>>>>>>> inside your function to see what is/isn't working?
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> -Jim
>>>>>>>>>>>>>>
>>>>>>>>>>>>>>
>>>>>>>>>>>>>> On Tuesday, November 3, 2020 at 12:10:06 PM UTC-6, mostwanted 
>>>>>>>>>>>>>> wrote:
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> Hey Jim, I have but it shows no errors!
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>> On Tuesday, November 3, 2020 at 6:02:50 PM UTC+2 Jim S wrote:
>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> Have you checked your browser console to see if you have 
>>>>>>>>>>>>>>>> any javascript errors?
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> -Jim
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> On Tuesday, November 3, 2020 at 3:36:22 AM UTC-6, 
>>>>>>>>>>>>>>>> mostwanted wrote:
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>> 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
>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>> -- 
>>>>>>>>> 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
>>>>>>>>>  
>>>>>>>>> <https://groups.google.com/d/msgid/web2py/4863b201-a4eb-4f4c-b9bd-edb6ca808acdn%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>>>>>>> .
>>>>>>>>>
>>>>>>>>

-- 
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+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/web2py/f9fccb5f-f8c5-49d9-8d26-f0322f9308b0o%40googlegroups.com.

Re: [web2py] Re: Displaying content based on the id attribute

Reply via email to