Isotope filtering with search field problem

[BlitzWarTank]

http://stackoverflow.com/questions/23819517/filters-search-with-isotopes-breaks-search

Currently the one in the notepad is the correct one, but I just can't seem to implement in my code without breaking it.


This is my full code for search field, the search function is working well but not the filter buttons

 

[davidktw]

http://stackoverflow.com/questions/23819517/filters-search-with-isotopes-breaks-search

Currently the one in the notepad is the correct one, but I just can't seem to implement in my code without breaking it.


This is my full code for search field, the search function is working well but not the filter buttons

You may want to put the following before line 35 and see what you are getting

console.debug("TEXT=" + $(this).text() + ", " + "REGEX=" + qsRegex);
console.debug($(this).text().match(qsRegex));

Observe via your web console in the browser and see if your filtering function gets invoked and whether the input and output are to your expectation.

 

[BlitzWarTank]

Done that, is it this?

http://sgweddingcollective.com/ (under portfolios section)
The searchbar is working well, type party and it will work. But clicking those category buttons will give empty result.

Before I added the searchfield, the category buttons were working fine. So is the problem entirely at my javascript?

HTML:

<div id="filters" class="button-group">          
<button class="btn2 btn2-default" data-filter=".ftvid" data-toggle="tooltip" data-placement="top">Feat. Videographers</button>

<!--GALLERY--> 
<div class="gallery js-isotope" data-isotope-options="{ "itemSelector": ".gallery-inner", "masonry": { "columnWidth": ".grid-sizer" } }">


                <div class="isotope">
                <!--AURORABLITZ -->
                <div class="gallery-inner mid ftvid pre ad mv par eve ">
                    <!-- caption -->
                    <div class="caption text-center ">
                        <div class="captionWrapper valign">
                                <div class="caption-heading display2">
                                <div class="tags">Aurorablitz</div>

 

[davidktw]

Done that, is it this?

http://sgweddingcollective.com/ (under portfolios section)
The searchbar is working well, type party and it will work. But clicking those category buttons will give empty result.

Before I added the searchfield, the category buttons were working fine. So is the problem entirely at my javascript?

HTML:

<div id="filters" class="button-group">          
<button class="btn2 btn2-default" data-filter=".ftvid" data-toggle="tooltip" data-placement="top">Feat. Videographers</button>

<!--GALLERY--> 
<div class="gallery js-isotope" data-isotope-options="{ "itemSelector": ".gallery-inner", "masonry": { "columnWidth": ".grid-sizer" } }">


                <div class="isotope">
                <!--AURORABLITZ -->
                <div class="gallery-inner mid ftvid pre ad mv par eve ">
                    <!-- caption -->
                    <div class="caption text-center ">
                        <div class="captionWrapper valign">
                                <div class="caption-heading display2">
                                <div class="tags">Aurorablitz</div>

...

No those errors are problems from elsewhere. It seems you didn't even get that far to the filtering anonymous function.

Look at

<div class="gallery js-isotope" data-isotope-options="{ "itemSelector": ".gallery-inner", "masonry": { "columnWidth": ".grid-sizer" } }">

Notice you are using the double-quotes encapsulation incorrectly for the data-isotope-options attribute ? The whole string is encapsulated using double-quotes, but the attributes and values in it also using the same, how can the parser knows where to end ?

Try this instead

<div class="gallery js-isotope" data-isotope-options='{ "itemSelector": ".gallery-inner", "masonry": { "columnWidth": ".grid-sizer" } }'>

 

[BlitzWarTank]

Thanks! I have tried testing in my personal portfolio website and both filter and searchfield work together, so the problem is in the html.

But by changing to single quote, my website is totally broken. No scrolling animation, no video loading on top and the searchfield is not working.

EDIT: I decided to rebuild the html file from my original portfolio website, so it's working now

 

[davidktw]

Thanks! I have tried testing in my personal portfolio website and both filter and searchfield work together, so the problem is in the html.

But by changing to single quote, my website is totally broken. No scrolling animation, no video loading on top and the searchfield is not working.

EDIT: I decided to rebuild the html file from my original portfolio website, so it's working now

I can't help you much without debugging on the fly.

However loading your main page only already have quite a number of issues that could potentially contribute to the woes you are experiencing.

 

[BlitzWarTank]

Currently my website seems to run fine on both Chrome and Firefox. But not Edge:

It seems to be using only around 66% of the width, I suspect it must be something to with the html again.

As my portfolio website works well with all 3 browsers: http://aurorablitz.com/

 

[davidktw]

Currently my website seems to run fine on both Chrome and Firefox. But not Edge:

It seems to be using only around 66% of the width, I suspect it must be something to with the html again.

As my portfolio website works well with all 3 browsers: http://aurorablitz.com/

Stop comparing what is correctly running elsewhere and focus on the errors generated for the site you are debugging