Jquery show hide issue on server - javascript

I am creating a simple show/hide all toggle button for my images in my instagram feed. It works fine in the fiddle but when I put the same code on my server nothing works with no error. Can anyone help me troubleshoot why this isn't working.
Here is the HTML
<div class="btn btn-success toggleAll">
Show All/Hide All
</div>
Here is the Javascript
$('.toggleAll').on('click',function(){
$('.pp, .coat, .heart-wrap, .comment-wrap, .check-wrap, .grip .btn').slideToggle('fast');
});
and here is the jsfiddle that works
https://jsfiddle.net/galnova/ua0ojhhe/5/
Here is my site where it doesn't work
http://galnova.com
Any help is welcome guys.

Try
$(document).on('click', '.toggleAll', function(){
$('.pp, .coat, .heart-wrap, .comment-wrap, .check-wrap, .grip .btn').slideToggle('fast');
});

I don't see this code in your website's code:
$('.toggleAll').on('click',function(){
$('.pp, .coat, .heart-wrap, .comment-wrap, .check-wrap, .grip .btn').slideToggle('fast');
});
I ran this in the console and the show/hide button started working fine.

Related

Clicking AJAX links? Watir

SOLVED:
I figured out my problem with this little piece of code:
b.link(id: 'm_wm_w5_m_lv_ctrl1_m_lnkWatch').fire_event :click
QUESTION:
I am having trouble clicking AJAX links with Watir.
Here is what I want to click.
https://i.imgur.com/Md4Rha3.png
This is what HTML looks like
<a id="m_wm_w5_m_lv_ctrl1_m_lnkWatch" href="javascript:__doPostBack('m_wm$w5$m_lv$ctrl1$m_lnkWatch','')"
style="white-space:nowrap; font-size:11px;">New Listing (160)</a></td>
So, in Watir, I used the following to click to think
b.link(id: 'm_wm_w5_m_lv_ctrl1_m_lnkWatch').click
But when I do that, I get this CSS pop up:
https://i.imgur.com/2DKWAhF.png
The HTML for close button on the pop up is:
<div id="NewsDetailDismissNew" class="btn mtx-btn-confirm enabled" title="Close">Close</div>
But when I use this in Watir
b.div(id: 'NewsDetailDismissNew').click
Nothing happens.
I did find some javascript that seems to correspond with the buttons
<!--<div class="container" >-->
<script>
var cvMarkAsRead=function( ){ return "Mark as Read"; };
</script>
<script>
var cvClose=function( ){ return "Close"; }; //This is closes the CSS pop up as far as I can tell
</script>
<script>
var cvOK=function( ){ return "OK"; };
</script>
<script>
var cvDismiss=function( ){ return "I've Read This"; };
</script>
<script>
var cvPreview=function( ){ return "Print Preview"; };
</script>
<!-- End NewsDetail modal -->
My question to you guys is
How can I click "New Listings" in Watir?
How can I click the "Close" button on the pop up?
I see that the link has some javascript, but I am not familiar enough with Watir to use b.execute_script successfully. I read the documentation. I am not understanding it and the examples provided are not similar enough to my problem for me to learn by practicing or copying.
Thank you in advance.
The piece of code below solves my problem. It clinks on New Listing and successfully loads all the new listings as well as avoids triggering that erroneous CSS pop up.
I think what this code does is activate the javascript by clicking the link.
I successfully clicked this link
<a id="m_wm_w5_m_lv_ctrl1_m_lnkWatch" href="javascript:__doPostBack('m_wm$w5$m_lv$ctrl1$m_lnkWatch','')"
style="white-space:nowrap; font-size:11px;">New Listing (160)</a>
By using this code in Watir:
b.link(id: 'm_wm_w5_m_lv_ctrl1_m_lnkWatch').fire_event :click

Jquery script doesn't work in jquery loaded page

I have tried to search for similar questions, but I could not find anything, so if you know any similar question please let me know.
Let me explain what Im doing:
I have a script that validates forms in a js file, It works fine in any page with a form I have, the problem is that when I load a form using jquery it just doesn't work, I have tried using the next line in different places: Header, footer, etc
<script src='myFile.js'></script>
By far the only thing that has worked for is writing the line of code above inside the form itself.
I think it has something to do with the form that the DOM works, I have also tried using and not using it.
$(document).ready(function (){ //code});
It only will work when I add the script tag with the src attribute inside the form itself.
It would not represent a big problem for me to add the script tag to any form I load using jquery but it's a little bit more of work an unefficient, and also when I add the script tag to any form and load it using ajax I get the next console warning that only goes away when I remove the script tag from the form file:
jquery-3.2.1.min.js:4 [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
Here is a part of my code:
<!--home.html-->
<div id='formFrame'>
</div>
<script>
$("#formFrame").load("html/loginForm.html");
</script>
<!--end of home.html-->
<!--loginForm.html-->
<form action='somePage.php' method='post' id='loginForm'>
<input type='email' name='email' placeholder='email'>
<input type='password' name='password' placeholder='password'>
<input type='submit' name='submit' value='Login'>
</form>
<script src='js/validate.js'></script>
<!--end of loginForm.html-->
<!--validation script (validate.js)-->
$(document).ready(function (){
$("#loginForm").submit(function (e){
e.preventDefault();
alert("Working");
});
});
Thanks for spending some of your valuable time on reading this, I appreciate it a lot!
As I can't comment, putting my comment in answer!
I am not sure what you have written in validate.js, but if you are using jQuery unobtrusive validation, then you must rebind the validators to the form if you are loading it dynamically.
I was facing same issue in ASP.NET MVC while loading forms using AJAX. I am not sure will it help you or not but below is the code.
$("#formFrame").load("html/loginForm.html", function(){
var $form = $("formSelector");
$form.removeData('validator');
$form.removeData('unobtrusiveValidation');
$.validator.unobtrusive.parse($form);
});
Well guys I found a solution:
As there seems to be a conflict when loading an external page using ajax (.load) I opted to use php instead of javascript which worked fine:
I removed the next code
<script>
$("#formFrame").load("html/loginForm.html");
</script>
And added the next to the div where I want to load my content:
<!--home.php (changed html to php)-->
<div id='formFrame'>
<?php
require 'html/loginForm.html';
?>
</div>
I would have prefered to use the load method from ajax to avoid loading the content befere the user could request it, but by far that's the only solution I have been able to think about.
Thanks to everybody for your help it was really helpful!

Email current page button does not work in Chrome

I have this little piece of code in a site to send the current page by email. It works on Firefox but not in Chrome. I've googled the issue but haven't found any answer. Is there anything I'm doing wrong?
<script>
function emailCurrentPage(){
// In comments, other things I've tried
//window.location.href="mailto:?subject="+document.title+"&body="+escape(window.location.href);
//document.location.href="mailto:?subject="+document.title+"&body="+escape(document.location.href);
document.location="mailto:?subject="+document.title+"&body="+escape(document.location);
}
</script>
<button onclick="emailCurrentPage();">
Send by email
</button>
Thank you.
Change your function:
window.location.href="mailto:?subject="+document.title+"&body="+encodeURI(document.location);

Icon missing: 404 Not Found on SkyDriveIcon_blue.png

My website uses the SkyDrive Javascript API to show an 'Open from SkyDrive' button (using Wl.ui).
I noticed that the icon that used to be shown is no longer showing, I get a 404 - file not found on http://js.live.net/v5.0/images/SkyDrivePicker/SkyDriveIcon_blue.png
Has anyone seen the same issue and does anyone know how to solve it?
Some snippets:
The script
<script type="text/javascript" src="//js.live.net/v5.0/wl.js"></script>
The div for the button
<DIV ID="uploadFile_div">SkyDrive save button to appear here</DIV>
And the code for WL.ui
WL.ui({
name: "skydrivepicker",
element: "uploadFile_div",
mode: "open",
select: "single",
onselected: onPickFileCompleted,
onerror: onUploadFileError
});
The website that shows the problem is http://www.padvark.nl/index.php?page=gpxpauser
Thanks in advance,
Koen
This is actually an issue on the OneDrive side. We have a fix that should hopefully make it out soon.

pinterest button stopped working on Blogspot site

I had successfully implemented the pinterest pin it button on my site, but it has recently stopped working. Could anyone tell me why?
My website is http://www.lookbookcookbook.com and I am using the following code
<div class='w2bPinitButton' expr:id='"w2bPinit-" + data:post.id' style='display: none;visibility: hidden;height: 0;width:0;overflow: hidden;'>
<data:post.body/>
<script type='text/javascript'>
w2bPinItButton({
url:"<data:post.url/>",
thumb: "<data:post.thumbnailUrl/>",
id: "<data:post.id/>",
defaultThumb: "http://4.bp.blogspot.com/-YZe-IcKvGRA/T8op1FIjwYI/AAAAAAAABg4/j-38UjGnQ-Q/s1600/w2b-no-thumbnail.jpg",
pincount: "horizontal"
});
</script>
Looks like you have managed to sort out your issue?
If not this link may be helpful or to others that want to implement it in their Blogspot site.
http://www.way2blogging.org/2012/06/add-dynamic-pinterest-pin-it-button-for-blogger-blogspot.html

Categories