We Keep Coding

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

Run Java Script in Wordpress

I have bought one WordPress theme which have Live Chat button in header. Its support link to open chat. But I have got java script to open button. I am learning php and does not know how can I run java script on button press WordPress.
I have code in wordpress header theme is like below
<?php }if( !empty( $king->cfg['topInfoLiveChat'] ) ){ ?>
<a href="<?php echo esc_attr( $king->cfg['topInfoLiveChat'] ); ?>" class="chat">
<i class="fa fa-comments-o"></i> <?php _e('Live Chat', 'arkahost' ); ?>
</a>
Zopim chat have given me script to run is like below.
$zopim.livechat.window.show();
They have given example to include like below
<img src="INSERT_IMG_SRC_HERE"/>
But if I use like above my design getting changed. Anyone can please help me how can I integrate this script in my above codes ?
Thanks

Did you learn some javascript and jQuery? You can run codes when an event happen. Like you have clicked a ahref element with .chat class.
<script>
jQuery("a.chat").on("click", function(e) {
e.preventDefault();
// Your code goes here. Example:
$zopim.livechat.window.show();
});
</script>
P/s: you should have a better selector like .header a.chat, or all ahref element have .chat class will show your Zopim windows when users clicked on it.

Remember use 'jQuery' instead of '$' in wordrpess.

If you would like to add the code in JS like:
$zopim.livechat.window.show();
and fire it on click event on your button, you need just to add the script (if you have jquery) to your file (with button):
<script type="text/javascript">
jQuery('a.chat').on('click', function(e) {
e.preventDefault();
$zopim.livechat.window.show();
});
</script>
or add it to the JS file, that included into your page:
jQuery('a.chat').on('click', function(e) {
e.preventDefault();
$zopim.livechat.window.show();
});
Where a.chat is the link ( tag) and .chat is the class name of your link, like in your example. You can add the parrent elements.
e.preventDefault() - default event for the link will not fire
Thanks

JQUERY Ajax When I Click A Href

I am new to JavaScript, Jquery and Ajax. This is what I am trying to do:
When I click on Pro-Hashtagh, I want to display a word in Show-Id.
This Pro-Hashtagh HTML code:
<li>
Pro Hashtagh
</li>
Show-Id HTML code:
<div class="body" id="Show-Id">
</div>
Ajax Code:
<script type="text/javascript">
$(function () {
var waiting = '<center><h3>Please Wait ...</h3></center>';
$('#Pro-Hashtagh').click(function(){
$("#Show-Id").html(waiting);
});
});
</script>
But when I click, nothing happens

I just created a fiddle with your code and everything seams to be fine.
https://jsfiddle.net/eh2xbxpe/
Of course you have to add Jquery to your project, that'S the only error I see.
Beside, you don't call any AJAX request in your code, you are just adding a please wait. If you are trying to reach an external ressources via AJAX, it is not the case here.
$(function () {
var waiting = '<center><h3>Please Wait ...</h3></center>';
$('#Pro-Hashtagh').click(function(){
$("#Show-Id").html(waiting);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<li>
Pro Hashtagh
</li>
<div class="body" id="Show-Id">
</div>

I guess you're working on a local environment.
Something happens when you click on the link but the page reloads way to fast for you to see anything. You need to update your onclick event so it prevent the link default behavior.
$('#Pro-Hashtagh').click(function(event){
event.preventDefault();
$("#Show-Id").html(waiting);
});

try
Pro Hashtagh
and create check function in javascript

<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<div class="body" id="Show-Id">
</div>
<li>
Pro Hashtagh
</li>
<script type="text/javascript">
$(function () {
var waiting = '<center><h3>Please Wait> .
..</h3></center>';
$('#Pro-Hashtagh').click(function(){
$("#Show-Id").html(waiting);
});
});
</script>

Make a Popup/Alert Window in a html with a "dont show again" option

I am trying to make a popup / alert window so that when the page is being loaded, the popup will open. I searched around and found something I like, but I don't know how to get this option working with the ability to not show the popup to the user more than once (with a "Don't show this again" option).
I added this to my header in the script part:
$(document).ready(function(){ alert('hi')});
I know that I need the jQuery script for this, so I added
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to my HTML page. This is working fine, but I don't know how I could modify my alert in a way for making a checkbox or a button with "Don't show this again".
I also found a solution where the alert was an external popup HTML page, but I want it inside my HTML page. Is there a way to solve my problem over that, or is the way over the alarm better?

Unfortunately, you can't do this through a typical JavaScript alert box. You'll need to build you own modal popup to simulate an alert box. jQuery's plugin jQuery UI has a really nice built-in function for this, and I'll use this in my example.
To give the user the option of not showing a window again, you need to make use of localStorage. You would need to create a condition that checks for whether a localStorage item is set. If it is not, display the modal, if it is, hide the modal:
if (!localStorage.hideAlert) {
$(function() {
$("#dialog").dialog();
});
}
else {
$("#dialog").css("display", "none");
}
In the modal itself, you would have a 'No' button that adds the relevant value to localStorage:
<div id="dialog" title="Show Again?">
<p>Would you like to show this dialog again?</p>
<button name="yes" class="yes">Yes</button>
<button name="no" class="no">No</button>
</div>
$(".yes").on("click", function() {
$("#dialog").dialog("close");
});
$(".no").on("click", function() {
localStorage.setItem('hideAlert', true);
$("#dialog").dialog("close");
});
I've created a working example showcasing this here.
This way, all of your code can reside within a single file, though remember that you'll still need to include the external jQuery UI JavaScript, and optional CSS:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Hope this helps! :)

In the example below, every popup window has a "Don't Show This Again" button.
Main document:
Code:
<HTML>
<Head>
<Script Language=JavaScript>
var expDate = new Date();
expDate.setTime(expDate.getTime()+365*24*60*60*1000); // one year
function setCookie(isName,isValue,dExpires){
document.cookie = isName+"="+isValue+";expires="+dExpires.toGMTString();
}
function getCookie(isName){
cookieStr = document.cookie;
startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1){return false}
endSlice = cookieStr.indexOf(";",startSlice+1)
if (endSlice == -1){endSlice = cookieStr.length}
isData = cookieStr.substring(startSlice,endSlice)
isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return isValue;
}
function initPopups(){
if (!getCookie('pop1'))
{popWin1 = window.open("1/pop1.html","","width=200,height=150,top=50,left=400")}
if (!getCookie('pop2'))
{popWin2 = window.open("1/pop2.html","","width=200,height=150,top=50,left=180")}
}
window.onload=initPopups;
</Script>
</Head>
<Body>
</Body>
The popup files are in a folder named 1
pop1.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop1',0,opener.expDate);self.close()">
</Body>
</HTML>
pop2.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop2',0,opener.expDate);self.close()">
</Body>
</HTML>

Stop some links (href containing certain string) from working

I'm attempting to stop some links on my site from working.
Here is my code:
Links:
<a href='http://mysite.home.com'>Home</a><br>
<a href='http://mysite.home.com/nextpage'>Next Page</a><br>
<a href='http://mysite.string.home.com'>Home 2</a><br>
<a href='http://mysite.string.home.com/otherpage'>Other Page</a>
Jquery:
<script>
$("a[href*='.string.']").click(function(e) {
e.preventDefault();
alert('You cannot use this link');
});
</script>
The goal is to stop the last two links (with href containing '.string.') from working and instead display the alert. However, this code isn't working and the links still work. What am I doing wrong?
The strange thing is the code works fine here: http://jsfiddle.net/TzUN3/364/
but not on my site. I have the script and links both in the <body> of my page, script after the links. Is this correct?
Thanks.

Forgot to add
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
to my page. Feel like an idiot.
Thank you all.

$(function() {
// Jquery is ready
// *= is contains
$("a[href*='.string.']").click(function(e) {
e.preventDefault();
alert('You cannot use this link');
});
});