Loading...
 

Tikiwiki-devel (mailman list mirror)


run jquery on the results of a custom search call (ajax)

posts: 1785 Catalan Countries

Hi all:

I've noticed an issue when we wanted to run some jquery code at the
results of a custom search call in a wiki page. This is to get some sort
of "Show more/show less" functionality going with simple jquery to show
a trimmed version of a paragraph, or hide it and show a long version
when the user clicks at the "Show more".

In theory, there seems to be a callbackscript parameter for "Custom
Search" which seems to allow that. But it seems it's not working in
15.x, as the documentation says:
https://doc.tiki.org/PluginCustomSearch#Advanced_adding_of_jquery_javascript_on_AJAX_loading_of_results

-------------------------------

The custom search call looks like this:

{CUSTOMSEARCH(wiki="Custom Search Courses Tpl" recalllastsearch="0"
searchonload="1" requireinput="0" searchable_only="1" customsearchjs="1"
callbackscript="shortenDescriptions")}

fooo

\{CUSTOMSEARCH\}

-------------------------------


The page "Custom Search Courses Tpl" has this type of code:

<div id="courseOverviewShort">\{$courseDescription|truncate:30:"...":false\}</div>

<a class="readMore" >Read more</a>

<div id="courseOverviewFull">\{$courseDescription\}</div>



-------------------------------

And the page shortenDescriptions has this code:

\{HTML()\}
$('#courseOverviewLong').hide();
//using the .readMore class as a selector for the click event over it.
$('.readMore').click(function(){
$('#courseOverviewShort').hide('slow');
$('#courseOverviewLong').show('slow');
});
\{HTML\}


Any clue?

Thanks

Xavi

posts: 126257 United Kingdom

Hi Xavi

I generally use this code:

$(document).bind("pageSearchReady", function() {

doYourStuff();

return true;
});

HTH

jb

> On 12 Aug 2016, at 09:46, Xavier de Pedro <tiki@seeds4c.org> wrote:
>
> Hi all:
>
> I've noticed an issue when we wanted to run some jquery code at the results of a custom search call in a wiki page. This is to get some sort of "Show more/show less" functionality going with simple jquery to show a trimmed version of a paragraph, or hide it and show a long version when the user clicks at the "Show more".
>
> In theory, there seems to be a callbackscript parameter for "Custom Search" which seems to allow that. But it seems it's not working in 15.x, as the documentation says:
> https://doc.tiki.org/PluginCustomSearch#Advanced_adding_of_jquery_javascript_on_AJAX_loading_of_results
>
> -------------------------------
>
> The custom search call looks like this:
>
> \{CUSTOMSEARCH(wiki="Custom Search Courses Tpl" recalllastsearch="0" searchonload="1" requireinput="0" searchable_only="1" customsearchjs="1" callbackscript="shortenDescriptions")\}
>
> fooo
>
> \{CUSTOMSEARCH\}
>
> -------------------------------
>
>
> The page "Custom Search Courses Tpl" has this type of code:
>
>

> <div id="courseOverviewShort">\{$courseDescription|truncate:30:"...":false\}</div>

> <a class="readMore" >Read more</a>

> <div id="courseOverviewFull">\{$courseDescription\}</div>

>
> -------------------------------
>
> And the page shortenDescriptions has this code:
>
> \{HTML()\}
> $('#courseOverviewLong').hide();
> //using the .readMore class as a selector for the click event over it.
> $('.readMore').click(function(){
> $('#courseOverviewShort').hide('slow');
> $('#courseOverviewLong').show('slow');
> });
> \{HTML\}
>
>
> Any clue?
>
> Thanks
>
> Xavi
>
>
> ------------------------------------------------------------------------------
> What NetFlow Analyzer can do for you? Monitors network bandwidth and traffic
> patterns at an interface-level. Reveals which users, apps, and protocols are
> consuming the most bandwidth. Provides multi-vendor support for NetFlow,
> J-Flow, sFlow and other flows. Make informed decisions using capacity
> planning reports. http://sdm.link/zohodev2dev___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


------------------------------------------------------------------------------
What NetFlow Analyzer can do for you? Monitors network bandwidth and traffic
patterns at an interface-level. Reveals which users, apps, and protocols are
consuming the most bandwidth. Provides multi-vendor support for NetFlow,
J-Flow, sFlow and other flows. Make informed decisions using capacity
planning reports. http://sdm.link/zohodev2dev
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

posts: 1785 Catalan Countries

Thanks Jonny, I replaced the code in the page shortenDescriptions with
this, based on your suggestion:

\{HTML()\}
$(document).bind("pageSearchReady", function() {

$('#courseOverviewLong').hide();
//using the .readMore class as a selector for the click event
over it.
$('.readMore').click(function(){
$('#courseOverviewShort').hide('slow');
$('#courseOverviewLong').show('slow');
});
return true;
});
\{HTML\}

But no luck either.

Xavi

El 12/08/16 a les 11:16, Jonny Bradley ha escrit:
> Hi Xavi
>
> I generally use this code:
>
> $(document).bind("pageSearchReady", function() {
>
> doYourStuff();
>
> return true;
> });
>
> HTH
>
> jb
>
>> On 12 Aug 2016, at 09:46, Xavier de Pedro <tiki@seeds4c.org> wrote:
>>
>> Hi all:
>>
>> I've noticed an issue when we wanted to run some jquery code at the results of a custom search call in a wiki page. This is to get some sort of "Show more/show less" functionality going with simple jquery to show a trimmed version of a paragraph, or hide it and show a long version when the user clicks at the "Show more".
>>
>> In theory, there seems to be a callbackscript parameter for "Custom Search" which seems to allow that. But it seems it's not working in 15.x, as the documentation says:
>> https://doc.tiki.org/PluginCustomSearch#Advanced_adding_of_jquery_javascript_on_AJAX_loading_of_results
>>
>> -------------------------------
>>
>> The custom search call looks like this:
>>
>> \{CUSTOMSEARCH(wiki="Custom Search Courses Tpl" recalllastsearch="0" searchonload="1" requireinput="0" searchable_only="1" customsearchjs="1" callbackscript="shortenDescriptions")\}
>>
>> fooo
>>
>> \{CUSTOMSEARCH\}
>>
>> -------------------------------
>>
>>
>> The page "Custom Search Courses Tpl" has this type of code:
>>
>>

>> <div id="courseOverviewShort">\{$courseDescription|truncate:30:"...":false\}</div>

>> <a class="readMore" >Read more</a>

>> <div id="courseOverviewFull">\{$courseDescription\}</div>

>>
>> -------------------------------
>>
>> And the page shortenDescriptions has this code:
>>
>> \{HTML()\}
>> $('#courseOverviewLong').hide();
>> //using the .readMore class as a selector for the click event over it.
>> $('.readMore').click(function(){
>> $('#courseOverviewShort').hide('slow');
>> $('#courseOverviewLong').show('slow');
>> });
>> \{HTML\}
>>
>>
>> Any clue?
>>
>> Thanks
>>
>> Xavi
>>
>>
>> ------------------------------------------------------------------------------
>> What NetFlow Analyzer can do for you? Monitors network bandwidth and traffic
>> patterns at an interface-level. Reveals which users, apps, and protocols are
>> consuming the most bandwidth. Provides multi-vendor support for NetFlow,
>> J-Flow, sFlow and other flows. Make informed decisions using capacity
>> planning reports. http://sdm.link/zohodev2dev___
>> TikiWiki-devel mailing list
>> TikiWiki-devel at lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>
> ------------------------------------------------------------------------------
> What NetFlow Analyzer can do for you? Monitors network bandwidth and traffic
> patterns at an interface-level. Reveals which users, apps, and protocols are
> consuming the most bandwidth. Provides multi-vendor support for NetFlow,
> J-Flow, sFlow and other flows. Make informed decisions using capacity
> planning reports. http://sdm.link/zohodev2dev
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>


------------------------------------------------------------------------------
What NetFlow Analyzer can do for you? Monitors network bandwidth and traffic
patterns at an interface-level. Reveals which users, apps, and protocols are
consuming the most bandwidth. Provides multi-vendor support for NetFlow,
J-Flow, sFlow and other flows. Make informed decisions using capacity
planning reports. http://sdm.link/zohodev2dev
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

posts: 126257 United Kingdom

Try in a JQ plugin? (it's JavaScript, not html)

jonny

> On 12 Aug 2016, at 10:56, Xavier de Pedro <tiki@seeds4c.org> wrote:
>
> Thanks Jonny, I replaced the code in the page shortenDescriptions with
> this, based on your suggestion:
>
> \{HTML()\}
> $(document).bind("pageSearchReady", function() {
>
> $('#courseOverviewLong').hide();
> //using the .readMore class as a selector for the click event
> over it.
> $('.readMore').click(function(){
> $('#courseOverviewShort').hide('slow');
> $('#courseOverviewLong').show('slow');
> });
> return true;
> });
> \{HTML\}
>
> But no luck either.
>
> Xavi
>
> El 12/08/16 a les 11:16, Jonny Bradley ha escrit:
>> Hi Xavi
>>
>> I generally use this code:
>>
>> $(document).bind("pageSearchReady", function() {
>>
>> doYourStuff();
>>
>> return true;
>> });
>>
>> HTH
>>
>> jb
>>
>>> On 12 Aug 2016, at 09:46, Xavier de Pedro <tiki@seeds4c.org> wrote:
>>>
>>> Hi all:
>>>
>>> I've noticed an issue when we wanted to run some jquery code at the results of a custom search call in a wiki page. This is to get some sort of "Show more/show less" functionality going with simple jquery to show a trimmed version of a paragraph, or hide it and show a long version when the user clicks at the "Show more".
>>>
>>> In theory, there seems to be a callbackscript parameter for "Custom Search" which seems to allow that. But it seems it's not working in 15.x, as the documentation says:
>>> https://doc.tiki.org/PluginCustomSearch#Advanced_adding_of_jquery_javascript_on_AJAX_loading_of_results
>>>
>>> -------------------------------
>>>
>>> The custom search call looks like this:
>>>
>>> \{CUSTOMSEARCH(wiki="Custom Search Courses Tpl" recalllastsearch="0" searchonload="1" requireinput="0" searchable_only="1" customsearchjs="1" callbackscript="shortenDescriptions")\}
>>>
>>> fooo
>>>
>>> \{CUSTOMSEARCH\}
>>>
>>> -------------------------------
>>>
>>>
>>> The page "Custom Search Courses Tpl" has this type of code:
>>>
>>>

>>> <div id="courseOverviewShort">\{$courseDescription|truncate:30:"...":false\}</div>

>>> <a class="readMore" >Read more</a>

>>> <div id="courseOverviewFull">\{$courseDescription\}</div>

>>>
>>> -------------------------------
>>>
>>> And the page shortenDescriptions has this code:
>>>
>>> \{HTML()\}
>>> $('#courseOverviewLong').hide();
>>> //using the .readMore class as a selector for the click event over it.
>>> $('.readMore').click(function(){
>>> $('#courseOverviewShort').hide('slow');
>>> $('#courseOverviewLong').show('slow');
>>> });
>>> \{HTML\}
>>>
>>>
>>> Any clue?
>>>
>>> Thanks
>>>
>>> Xavi
>>>
>>>
>>> ------------------------------------------------------------------------------
>>> What NetFlow Analyzer can do for you? Monitors network bandwidth and traffic
>>> patterns at an interface-level. Reveals which users, apps, and protocols are
>>> consuming the most bandwidth. Provides multi-vendor support for NetFlow,
>>> J-Flow, sFlow and other flows. Make informed decisions using capacity
>>> planning reports. http://sdm.link/zohodev2dev___
>>> TikiWiki-devel mailing list
>>> TikiWiki-devel at lists.sourceforge.net
>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>
>> ------------------------------------------------------------------------------
>> What NetFlow Analyzer can do for you? Monitors network bandwidth and traffic
>> patterns at an interface-level. Reveals which users, apps, and protocols are
>> consuming the most bandwidth. Provides multi-vendor support for NetFlow,
>> J-Flow, sFlow and other flows. Make informed decisions using capacity
>> planning reports. http://sdm.link/zohodev2dev
>> ___
>> TikiWiki-devel mailing list
>> TikiWiki-devel at lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>
>
> ------------------------------------------------------------------------------
> What NetFlow Analyzer can do for you? Monitors network bandwidth and traffic
> patterns at an interface-level. Reveals which users, apps, and protocols are
> consuming the most bandwidth. Provides multi-vendor support for NetFlow,
> J-Flow, sFlow and other flows. Make informed decisions using capacity
> planning reports. http://sdm.link/zohodev2dev
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>


------------------------------------------------------------------------------
What NetFlow Analyzer can do for you? Monitors network bandwidth and traffic
patterns at an interface-level. Reveals which users, apps, and protocols are
consuming the most bandwidth. Provides multi-vendor support for NetFlow,
J-Flow, sFlow and other flows. Make informed decisions using capacity
planning reports. http://sdm.link/zohodev2dev
___
TikiWiki-devel mailing list
TikiWiki-devel at lists.sourceforge.net
https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel

posts: 1785 Catalan Countries

Yay, that was the critical info I needed (the documentation was
misleading, since it clearly stated to use plugin HTML to surround the
javascript/jq code, and not plugin JQ. but fixing that allowed me some
way to get it working, at least. Probably ugly jq (below), but it
currently works!
I fixed the documentation:
https://doc.tiki.org/tiki-pagehistory.php?page=PluginCustomSearch&history_offset=1&paginate=on&history_pagesize=50&tra_lang=sq&diff_style=sidediff&diff_style=sidediff&show_all_versions=y&compare=Compare&newver=0&oldver=80


For ther record, the working solution in my case was:

The custom search call was left with same content as before:

\{CUSTOMSEARCH(wiki="Custom Search Courses Tpl" recalllastsearch="0" searchonload="1" requireinput="0" searchable_only="1" customsearchjs="1" callbackscript="shortenDescriptions")\}

fooo

\{CUSTOMSEARCH\}

-------------------------------


The page "Custom Search Courses Tpl" has this type of code:


<span
id="courseOverview">\{$row.courseDescription|truncate:30:"...":false\}</span>
<a class="readMore" >Read more</a>
<span id="courseOverviewFull" style="display: none">\{$row.courseDescription\}</span> <a class="readLess" style="display: none">Read less</a>

-------------------------------

And the page shortenDescriptions:

\{JQ()\}
$(document).bind("pageSearchReady", function() {

//using the .readMore class as a selector for the click event over it.
$('.readMore').click(function(){
$('#courseOverview').toggle();
$('#courseOverviewFull').show();
$('.readLess').show();
$('.readMore').hide();
});
$('.readLess').click(function(){
$('#courseOverview').toggle();
$('#courseOverviewFull').hide();
$('.readLess').hide();
$('.readMore').show();
});

return true;
});
\{JQ\}

---------------------------

Thanks!

Xavi

El 12/08/16 a les 12:02, Jonny Bradley ha escrit:
> Try in a JQ plugin? (it's JavaScript, not html)
>
> jonny
>
>> On 12 Aug 2016, at 10:56, Xavier de Pedro <tiki@seeds4c.org> wrote:
>>
>> Thanks Jonny, I replaced the code in the page shortenDescriptions with
>> this, based on your suggestion:
>>
>> \{HTML()\}
>> $(document).bind("pageSearchReady", function() {
>>
>> $('#courseOverviewLong').hide();
>> //using the .readMore class as a selector for the click event
>> over it.
>> $('.readMore').click(function(){
>> $('#courseOverviewShort').hide('slow');
>> $('#courseOverviewLong').show('slow');
>> });
>> return true;
>> });
>> \{HTML\}
>>
>> But no luck either.
>>
>> Xavi
>>
>> El 12/08/16 a les 11:16, Jonny Bradley ha escrit:
>>> Hi Xavi
>>>
>>> I generally use this code:
>>>
>>> $(document).bind("pageSearchReady", function() {
>>>
>>> doYourStuff();
>>>
>>> return true;
>>> });
>>>
>>> HTH
>>>
>>> jb
>>>
>>>> On 12 Aug 2016, at 09:46, Xavier de Pedro <tiki@seeds4c.org> wrote:
>>>>
>>>> Hi all:
>>>>
>>>> I've noticed an issue when we wanted to run some jquery code at the results of a custom search call in a wiki page. This is to get some sort of "Show more/show less" functionality going with simple jquery to show a trimmed version of a paragraph, or hide it and show a long version when the user clicks at the "Show more".
>>>>
>>>> In theory, there seems to be a callbackscript parameter for "Custom Search" which seems to allow that. But it seems it's not working in 15.x, as the documentation says:
>>>> https://doc.tiki.org/PluginCustomSearch#Advanced_adding_of_jquery_javascript_on_AJAX_loading_of_results
>>>>
>>>> -------------------------------
>>>>
>>>> The custom search call looks like this:
>>>>
>>>> \{CUSTOMSEARCH(wiki="Custom Search Courses Tpl" recalllastsearch="0" searchonload="1" requireinput="0" searchable_only="1" customsearchjs="1" callbackscript="shortenDescriptions")\}
>>>>
>>>> fooo
>>>>
>>>> \{CUSTOMSEARCH\}
>>>>
>>>> -------------------------------
>>>>
>>>>
>>>> The page "Custom Search Courses Tpl" has this type of code:
>>>>
>>>>

>>>> <div id="courseOverviewShort">\{$courseDescription|truncate:30:"...":false\}</div>

>>>> <a class="readMore" >Read more</a>

>>>> <div id="courseOverviewFull">\{$courseDescription\}</div>

>>>>
>>>> -------------------------------
>>>>
>>>> And the page shortenDescriptions has this code:
>>>>
>>>> \{HTML()\}
>>>> $('#courseOverviewLong').hide();
>>>> //using the .readMore class as a selector for the click event over it.
>>>> $('.readMore').click(function(){
>>>> $('#courseOverviewShort').hide('slow');
>>>> $('#courseOverviewLong').show('slow');
>>>> });
>>>> \{HTML\}
>>>>
>>>>
>>>> Any clue?
>>>>
>>>> Thanks
>>>>
>>>> Xavi
>>>>
>>>>
>>>> ------------------------------------------------------------------------------
>>>> What NetFlow Analyzer can do for you? Monitors network bandwidth and traffic
>>>> patterns at an interface-level. Reveals which users, apps, and protocols are
>>>> consuming the most bandwidth. Provides multi-vendor support for NetFlow,
>>>> J-Flow, sFlow and other flows. Make informed decisions using capacity
>>>> planning reports. http://sdm.link/zohodev2dev___
>>>> TikiWiki-devel mailing list
>>>> TikiWiki-devel at lists.sourceforge.net
>>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>> ------------------------------------------------------------------------------
>>> What NetFlow Analyzer can do for you? Monitors network bandwidth and traffic
>>> patterns at an interface-level. Reveals which users, apps, and protocols are
>>> consuming the most bandwidth. Provides multi-vendor support for NetFlow,
>>> J-Flow, sFlow and other flows. Make informed decisions using capacity
>>> planning reports. http://sdm.link/zohodev2dev
>>> ___
>>> TikiWiki-devel mailing list
>>> TikiWiki-devel at lists.sourceforge.net
>>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>
>> ------------------------------------------------------------------------------
>> What NetFlow Analyzer can do for you? Monitors network bandwidth and traffic
>> patterns at an interface-level. Reveals which users, apps, and protocols are
>> consuming the most bandwidth. Provides multi-vendor support for NetFlow,
>> J-Flow, sFlow and other flows. Make informed decisions using capacity
>> planning reports. http://sdm.link/zohodev2dev
>> ___
>> TikiWiki-devel mailing list
>> TikiWiki-devel at lists.sourceforge.net
>> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel
>>
>
> ------------------------------------------------------------------------------
> What NetFlow Analyzer can do for you? Monitors network bandwidth and traffic
> patterns at an interface-level. Reveals which users, apps, and protocols are
> consuming the most bandwidth. Provides multi-vendor support for NetFlow,
> J-Flow, sFlow and other flows. Make informed decisions using capacity
> planning reports. http://sdm.link/zohodev2dev
> ___
> TikiWiki-devel mailing list
> TikiWiki-devel at lists.sourceforge.net
> https://lists.sourceforge.net/lists/listinfo/tikiwiki-devel


Why Register?

Register at tiki.org and you'll be able to use the account at any *.tiki.org site, thanks to the InterTiki feature. A valid email address is required to receive site notifications and occasional newsletters. You can opt out of these items at any time.