I can get the results fine but each data-value results are comma seperated because it's an array. I would like to make the query without any commas and maybe remove the last AND.
Is that possible ?
jQuery
//Submit Adv Search
$('#submitAdvSearch').click(function(){
var query = "SELECT * FROM table WHERE ";
var yo = $('.subCat span[data-value].checked').map(function(){
return $(this).attr('data-value')+'=1 AND ';
}).get();
console.log(query+' '+yo);
});
HTML
<div class="cat">
<div class="catTitle">
<h2>Performance</h2>
<span class="arrow"></span>
<br class="clear"/>
</div>
<div class="subCat" data-cat="performance">
<div>
<span data-all="all">○ Tous</span><br>
<div class="after">
<span data-value="30000_doublefrotements" class="checked">○ +30,000 double frottement</span><br>
<span data-value="atcc96_lavablecommercial">○ ATTCC 96</span><br>
<span data-value="nfpa701_inifuge">○ NFPA 701</span><br>
<span data-value="resistanrayonsuv">○ Uv résistant</span>
</div>
</div>
</div>
</div>
<div class="cat">
<div class="catTitle">
<h2>Style</h2>
<span class="arrow"></span>
<br class="clear"/>
</div>
<div class="subCat" data-cat="style">
<div>
<span data-all="all">○ Tous</span><br>
<div class="after">
<span data-value="contemporain" class="checked">○ Contemporain</span><br>
<span data-value="traditionnel">○ Traditionel</span><br>
<span data-value="transitionnel" class="checked">○ Transitionel</span>
</div>
</div>
</div>
</div>
<div id="submitAdvSearch">Submit</div>
Result
SELECT * FROM table WHERE 30000_doublefrotements=1 AND ,contemporain=1 AND ,transitionnel=1 AND
Use join(" AND ") to concatenate ANDs between each condition:
var yo = $('.subCat span[data-value].checked').map(function() {
return $(this).attr('data-value')+'=1';
}).get();
console.log(query + yo.join(" AND "));
This will give you:
SELECT * FROM table WHERE 30000_doublefrotements=1 AND contemporain=1 AND transitionnel=1
Try this:
//Submit Adv Search
$('#submitAdvSearch').click(function(){
var query = "SELECT * FROM table WHERE ";
var yo = $('.subCat span[data-value].checked').map(function(){
return $(this).attr('data-value')+'=1 AND ';
}).get();
yo = yo.join(' ').replace(/\s*AND\s*$/, '');
console.log(query+' '+yo);
});
This worked for me:
//Submit Adv Search
$('#submitAdvSearch').click(function(){
var query = "SELECT * FROM table WHERE ";
var where_clause = [];
var yo = $('.subCat span[data-value].checked').map(function(){
var item = $(this).attr('data-value')+'=1';
where_clause.push(item);
}).get();
console.log(query+' '+ where_clause.join(" AND "));
});
Related
I have a quiz like slideshow that dynamically generates the questions and the list of answer options.
The answer options are of input type button and are generated dynamically from a table. The button name is also dynamically generated. The number of answer options is dymamic.
When a user clicks on an answer option I need to capture the name of the button.
I have tested out several interations of my code but am not successfully capturing the button clicked. Any input, insight is greately appreicated. Code is below. Just a quick callout - the HTML works without issue. I am using AMPSCRIPT for a Salesforce Makreting Cloud pages.
function btnAnswer(){
var btnClicked = $('.slide :button[clicked]');
var btnValue = $(btnClicked).val();
var btnName = $(btnClicked).attr("name");
var btnQuestion = btnName.substring(0, btnName.indexOf('A'));
btnQuestion = btnQuestion.substring(btnQuestion.indexOf('Q') + 1);
var btnAnswer = btnName.substring(btnName.indexOf('A') + 1);
updateScore(btnQuestion, btnAnswer);
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div class="slide">
<p class="question-p">%%=TreatAsContent(FIELD(ROW(#quizData,#qNum),'QuestionBackground'))=%%</p>
<h3 class="question-h3">%%=TreatAsContent(FIELD(ROW(#quizData,#qNum),'Question'))=%%</h3>
<div id="" class="question">
%%[
SET #answerOptions = BuildRowsetFromString(FIELD(ROW(#quizData,#qNum),'QuestionAnswerOptions'),'|')
SET #answerCount = RowCount(#answerOptions)
FOR #aNum = 1 to #answerCount DO
SET #answer = FIELD(ROW(#answerOptions,#aNum),1)
]%%
<div id="answerOptions">
<input value="%%=TreatAsContent(#answer)=%%" class="button-submit btnAnswer" name="Q%%=V(#qNum)=%%A%%=V(#aNum)=%%" type="button">
</div>
%%[
NEXT #aNum
]%%
<!-- BEGIN HIDE CRCT ANSWER FOR JS VALIDATION -->
<input name="crctAnswer" value="%%=V(FIELD(ROW(#quizData,#qNum),'questionCrctAnswerValue'))=%%" type="hidden">
</div>
<!-- END HIDE CRCT ANSWER FOR JS VALIDATION -->
<!-- HIDE/SHOW BASED ON SELECTION -->
<div id="" class="answer">
<div class="answer-title" style="display:none;"> <img class="icon" src="http://image.em.pge.com/lib/fe8c13727666037a72/m/6/general_cancel.png">
<h4 class="answer-h4-incorrect" style="display:none;">You are incorrect.</h4> </div>
<div class="answer-title" style="display:none;"> <img class="icon" src="http://image.em.pge.com/lib/fe8c13727666037a72/m/6/general_check.png">
<h4 class="answer-h4-correct" style="display:none;">You are correct!</h4> </div>
<div class="answer-explaination" style="display:none;">
<p class="answer-explaination" style="display:none;"><strong>The correct answer.</strong>%%=TreatAsContent(FIELD(ROW(#quizData,#qNum),'QuestionCrctAnswerText'))=%%</p>
</div>
</div>
</div>
Try using the jQuery button click handler
$(".btnAnswer").click( function() {
$(this).attr('name');
// or
this.name;
});
I guess you'd use Jquery like this:
$(".btnAnswer").click(function() {
// jQuery way
var btnValue = $(this).val();
var btnName = $(this).attr("name");
// Javascript way
var btnValue = this.value;
var btnName = this.name;
var btnQuestion = btnName.substring(0, btnName.indexOf('A'));
btnQuestion = btnQuestion.substring(btnQuestion.indexOf('Q') + 1);
var btnAnswer = btnName.substring(btnName.indexOf('A') + 1);
updateScore(btnQuestion, btnAnswer);
});
I'm creating a store locator for a website and ive got a tooltip box that displays an email the i want to make a link. this is the html:
<div class="gm_popup">
<span class="address"> Address</span><br>
<span class="city"> City</span><br>
<span class="phone"> 123 456</span><br>
<span class="email"> email#example.com</span><br>
</div>
and this is the js:
jQuery(document).ready(function(){
var old_focus_and_popup = focus_and_popup;
focus_and_popup = function (id){
return_val = old_focus_and_popup (id);
setTimeout(function (){
jQuery("#store_map .gm_popup .email").click(function(){
var text = jQuery(this).text();
document.location = "mailto:" + text.trim();
});
jQuery(".gm_popup .email").css('text-decoration','underline').css('color','#2aa8e0');
}, 200);
return return_val ;
}
});
any idea why this wouldnt be working? after adding some console.logs it seems like its getting as far as the .click but no going inside the function. Thanks
You are registering click event
This won't trigger until any click is done manually.
If you wanna get auto click then try like this after registering click event
jQuery("#store_map .gm_popup .email").click();
or
jQuery("#store_map .gm_popup .email").trigger("click");
Well you have all the events code inside the function, and you never end up calling that function. So I've made some changes, removed the setTimeout, as that was unnecessary. Also, made a call to that function.
<div id="store_map">
<div class="gm_popup">
<span class="address"> Address</span><br>
<span class="city"> City</span><br>
<span class="phone"> 123 456</span><br>
<span class="email"> email#example.com</span><br>
</div>
</div>
jQuery(document).ready(function(){
focus_and_popup = function (id){
//return_val = old_focus_and_popup (id);
jQuery("#store_map .gm_popup .email").click(function(){
var text = jQuery(this).text();
console.log("HERE");
document.location = "mailto:" + text.trim();
});
jQuery(".gm_popup .email").css('text-decoration','underline').css('color','#2aa8e0');
return return_val ;
}
focus_and_popup();
var old_focus_and_popup = focus_and_popup;
});
I wrote for you a snippet that simply works.
jQuery(document).ready(function () {
jQuery(".gm_popup .email").click(function () {
alert('hello');
var text = jQuery(this).text();
document.location = "mailto:" + text.trim();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="gm_popup">
<span class="address"> Address</span>
<br>
<span class="city"> City</span>
<br>
<span class="phone"> 123 456</span>
<br>
<span class="email"> email#example.com</span>
<br>
</div>
I am trying to display user data in div blocks depending upon the number of users. I will get the number of users and data from server using ajax. I want to display the user data in a separate div block. If the number of users is 2, I want to display two blocks , 3 users in three blocks...I defined a div
<div class = "users> </div>.
Inside this div, I want to append the users details like
<div class=" user1"> <p><span class="name"></span></p>
<p><span class="age"></span></p>
<p><span class="address"></span></p>
</div>
using jQuery. If there are two users, I have to display the blocks in the center. Depending upon the number of users , I have to align the blocks.(For ex : 6 users - 3 in one row)
How to display the data inside the div?
code:
<div class="users">
<div class="user1">
<p> <span class="name"> </span> </p>
<p> <span class="age"> </span> </p>
<p> <span class="address"> </span> </p>
<p> <span class="phone"> </span> </p>
</div>
<div class="user2">
<p> <span class="name"> </span> </p>
<p> <span class="age"> </span> </p>
<p> <span class="address"> </span> </p>
<p> <span class="phone"> </span> </p>
</div>
</div>
for(var user_name in res) {
$.ajax({
type: 'GET',
timeout: 10000,
dataType: 'json',
url: multidashboard_info_url + '?client=' + user_name,
async: true,
})
.done(function(data) {
console.log(" success and data is ",data);
var dashboard_info = data["dashboard_info"];
var name = dashboard_info["details"]["name"],
age = dashboard_info["details"]["age"],
address = dashboard_info["details"]["address"],
})
.fail(function() {
console.log("error");
})
}
You can use append() method to add content inside html and for multiple solution, you need to create a dynamic function like this:
Here is working jsFiddle.
function addUserData($selector,name,age,address) {
$selector.append('<p><span class="name">'+ name +'</span></p>' +
'<p><span class="age">'+ age +'</span></p>' +
'<p><span class="address">'+ address +'</span></p>');
}
var name1 = 'John',
age1 = 23,
address1 = 'New York';
addUserData($('.user1'),name1,age1,address1);
var name2 = 'Wall',
age2 = 32,
address2 = 'Istanbul';
addUserData($('.user2'),name2,age2,address2);
You may wanna try something like this:
//this object you should be returned as a json_encoded(USERS_ARRAY) at your php controller
var jsonEncodedObject = '[{"name":"Gonsalo Sousa","age":23,"address":"Some Address"},{"name":"Jonh Doe","age":40,"address":"Some Address"}]';
//parseJSON to use with jscript
var users = $.parseJSON(jsonEncodedObject);
//now run the object using $.each()
$(users).each(function(index) {
//appends each user to the #users <div>
$('#users').append('<div class="user' + index + '"><p><span class="name">' + this.name + '</span></p>' + '<p><span class="age">' + this.age + '</span></p>' + '<p><span class="address">' + this.address + '</span></p></div>');
});
[class*="user"] {
border: 1px solid black;
margin-bottom: 5px;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="users"></div>
UPDATE
Maybe this can help you
var i = 0;
jQuery(dashboard_info["details"]).each(function(){
var className = "user"+i;
jQuery('#users').append('<div class="'+className+'">/*rest of your html*/</div>')
i++;
});
I am trying to add social likes values(Twitter,Facebook,GooglePlus,Pinterest,emailaccount) using jquery. This is my html code.
<div class="social-likes">
<span class='st_twitter_vcount' displayText='Tweet' st_via=""></span>
<span class='st_facebook_vcount' displayText='Facebook'></span>
<span class='st_googleplus_vcount' displayText='Share'></span>
<span class='st_pinterest_vcount' displayText='Pinterest'></span>
<span class='st_email_vcount' displayText='Email'></span>
<span id="total_shares"></span> // Display the total
</div>
and here is the jquery code.
<script type="text/javascript">
var TweetCount = jQuery('.st_twitter_vcount .stBubble .stBubble_count').text();
var FacebookCount = jQuery('.st_facebook_vcount .stBubble .stBubble_count').text();
var GooglePlusCount = jQuery('.st_googleplus_vcount .stBubble .stBubble_count').text();
var PinInterestCount= jQuery('.st_pinterest_vcount .stBubble .stBubble_count').text();
var EmailCount = jQuery('.st_email_vcount .stBubble .stBubble_count').text();
var TotalShares = parseInt(TweetCount) + parseInt(FacebookCount) + parseInt(GooglePlusCount) + parseInt(PinInterestCount) + parseInt(EmailCount);
jQuery('#total_shares').text(TotalShares );
Alert(TotalShares);
</script>
When I try in inspect each element on a browser, the codes are these.
<span class="st_twitter_vcount" st_via="" displaytext="Tweet" st_processed="yes">
<span class="stButton" style="text-decoration:none;color:#000000;display:inline- block;cursor:pointer;">
<div>
<div style="display: block;" class="stBubble">
<div class="stBubble_count">0</div>
</div>
</div>
</span>
<span class="st_facebook_vcount" displaytext="Tweet" st_processed="yes">
<span class="stButton" style="text-decoration:none;color:#000000;display:inline- block;cursor:pointer;">
<div>
<div style="display: block;" class="stBubble">
<div class="stBubble_count">12</div>
</div>
</div>
</span>
.... and other...
But when I tried to put alert into the script, It returns an Undefined value(NaN). Did I missed something? please help me I am new on jquery/javascript. My goal is something like this. http://mashable.com/2013/11/05/voice-impressions-video/ . Getting the total shares.
This is my page source :
<body>
<div>
<p><span id="1">word</span> <span id="2">word</span> </p>
<div><span id="3">word</span> <span id="4">word</span></div>
<ul>
<li><span id="5">word</span> <span id="6">word</span></li>
</ul>
</ul>
<p><span id="7">word</span> <span id="8">word</span> <strong><span id="9">word</span></strong> </p>
</div>
</body>
I want to highlight(apply a new class) user selected spans and get it id's.
I can get user selected content through window.getSelection().But i don't know how to get selected text nodes.
Thanks in advance,
Logan
The window.getSelection() returns a selection object (ref) that includes the start (anchorNode) and end (extentNode). So based on the HTML you provided - with the ID's modified to not using only numbers (ref) - here is a demo. Click on any word, or select a group of words to see them get the "red" class name.
Modified HTML
<div>
<p><span id="s1">word1</span> <span id="s2">word2</span> </p>
<div><span id="s3">word3</span> <span id="s4">word4</span></div>
<ul>
<li><span id="s5">word5</span> <span id="s6">word6</span></li>
</ul>
<p><span id="s7">word7</span> <span id="s8">word8</span> <strong><span id="s9">word9</span></strong> </p>
</div>
Script
$('div').bind('mouseup', function(){
var i,
s = window.getSelection(),
// get ID of starting node
start = parseInt((s.anchorNode.parentNode.id || '').substring(1), 10),
// get ID of end node
end = parseInt((s.extentNode.parentNode.id || '').substring(1), 10),
// start gathering spans
spans = $('#s' + start);
// remove selected class
$('span[id^=s]').removeClass('red');
// add each span
for (i = start; i <= end; i++) {
spans = spans.add( $('#s' + i) );
}
// add selected class
spans.addClass('red');
});