Two same href URL give different outcome

help
1

Hi guys,

I hope someone can help figure out what is going on here. I have tried my best console.log() everywhere and Chrome Dev Debugging Tool and etc.

I just can’t figure out what is going on here.

After login, there is a top bar with a static link and a search box beside it.

Click on the static link will go to “/productorder/3631” URL/path and it work as expected.

But when using search function to search “dc22”, wait for the result and click on the result link, which will go to the EXACT same URL/path of “/productorder/3631”, but this time, after a few seconds, the browser will reload the whole page and causing the whole app to reload again including script in my mainapp.js and lose Session value.

As mentioned before, I try debug for the whole day and can’t find the cause of this error. Please help.

Thanks in advance…

Regards,
Lesz

2

Your search link likely has an error which causes the link to return to default behavior which is reloading the tab with the new url mentioned in the link tag. To check this go to your console and check the “preserve logs” checkbox.

Unfortunatly i’m on my phone so I cant be sure but its an educated guess

3

Looks like the classes might be changing the behaviors.

This causes the refresh:
image

Edit the classes by hand to match the working link, then click the link, and no refresh:
image

1 Like
4

Thanks for the advice.

5

Thanks for the hint… I’ll try to fix it now. Thanks again.

6 
<template name="mainSearch">
    <div class="ui two top fixed menu borderless mainsearchbar item">
        <div class="ui search item mainSearchDiv">
            <div class="ui icon input">
                <input class="prompt" type="text" placeholder="Search products...">
                <i class="search link icon"></i>
            </div>
            <div class="results">
            </div>
        </div>
        <a class="ui button item" href="/productorder/3631">
            static href="/productorder/3631"
        </a>
    </div>
</template>

HI, the above is the original code, the search part mostly from https://semantic-ui.com/modules/search.html#/usage

Change the HTML/CLASS even removed results class, it doesn’t fix the error

7

I’m also really interested to know how CSS can cause complete loaded page to refresh. Would like to know the root cause. Thanks

8

Try changed css class but not fix. Worst case for me I’ll just use other Live Search library instead of Semantic UI built in.

But beside that, really hope can understand the root cause of this issue for the sake of learning.

9

What @vigorwebsolutions meant is that the class might be bound by a javascript onClick handler somehow. It’s for us just a guessing game if you don’t share the underlying javascript. There’s obviously some kind of redirect going on somewhere.

Can you either give us the full code (javascript) or share an unbuilt version of your app?

10

Hi @cloudspider, The handling and processing of the form search function is not my code, it’s Semantic UI feature/function.

11

Alright, so here’s the thing. Those searches are dropdowns. You are using different clickable components. You are adding the search snippet somewhere right?

$('.ui.search')
  .search({
    type          : 'category',
    minCharacters : 3,
    apiSettings   : {
      onResponse: function(githubResponse) {
        var
          response = {
            results : {}
          }
        ;
        // translate GitHub API response to work with search
        $.each(githubResponse.items, function(index, item) {
          var
            language   = item.language || 'Unknown',
            maxResults = 8
          ;
          if(index >= maxResults) {
            return false;
          }
          // create new language category
          if(response.results[language] === undefined) {
            response.results[language] = {
              name    : language,
              results : []
            };
          }
          // add result to category
          response.results[language].results.push({
            title       : item.name,
            description : item.description,
            url         : item.html_url
          });
        });
        return response;
      },
      url: '//api.github.com/search/repositories?q={query}'
    }
  })
;

And you must have some kind of template to display the actual result items

12 
<template name="mainSearch">
    <div class="ui two top fixed menu borderless mainsearchbar item">
        <div class="ui search item mainSearchDiv">
            <div class="ui icon input">
                <input class="prompt" type="text" placeholder="Search products...">
                <i class="search link icon"></i>
            </div>
            <div class="results">
            </div>
        </div>
        <a class="ui button item" href="/productorder/3631">
            static href="/productorder/3631"
        </a>
    </div>
</template>

The “results” class DIV is the drop-down that hold the results. This is Semantic UI given structure.

13

I’m looking for your Template.mainSearch.helpers and Template.mainSearch.events. You are now giving me just the HTML

14

There is nothing in Event and Helper related to this search function. I think you don’t really understand Semantic UI search function, I just need to pass in the API endpoint, I don’t need to capture search keywords and return result by helpers and such.

I guess I better build one with Session, I guess it’s pretty easy. Debug this will spend longer time.

15

Alright. Its just, the link that you’ve sent gives me those examples. Good luck anyways!

16

You could at least deploy in dev mode so that you can debug it. And BTW both links throws an error when clicked, something with Tracker.flush.

17

With the search function it looks a lot like a form is being POSTed, so the page gets refreshed.

The template code that you have shown is presumably the code that you wrote, and not the actual code in the browser right? If so, can you post the actual code produced by the browser?