We Keep Coding

How to add radioButtons in wix and link each radio button to a page

I am trying to make radio buttons on wix.com on my website My website it is still being constructed I have gone to support Wix and didn't get anything. I am trying to make radio buttons and linked each radio button to a page each radio button linking to a specific page. I have tried:
Html:
<form>
<fieldset>
<legend>Choose your Website</legend>
<input type="radio" id="youtube" name="monster">
<label for="youtube">Youtube</label><br />
<input type="radio" id="google" name="monster">
<label for="google">Google</label><br />
</fieldset>
</form>
<button id="go_to_website">
Go to website
</button>
Javascript:
$(document).ready(function() {
$("#go_to_website").click(function(event) {
var link_id = $("input[name='monster']:checked").attr("id");
if (link_id) {
switch (link_id) {
case "youtube":
// code block
window.location.href = 'www.youtube.com';
break;
case "google":
// code block
window.location.href = 'www.google.com';
break;
default:
// code block
}
} else {
alert("please pick an option")
}
})
});
Here is what it looks like except I wan it on six and I want it to look better https://jsfiddle.net/pc62oL74/4/#

If you use the standard Wix Radio Button element, you can interact with it in Corvid plus use the WixLocation API .to() function to navigate to a URL.
It would look something like this:
import wixLocation from 'wix-location';
export function submitButton_click(event) {
let url = $w('#radioGroup').value;
console.log(url)
wixLocation.to(url);
}
where $w('#radioGroup') is the standard Wix Radio Input element and the values are linked to the URL you want to navigate to. The labels can be the Website name, like Youtube or Google in your example. That can be set up completely in the Drag+Drop environment or via a database connection.

How to Set Header Text of Modal Dialog According to the Table element and his ID

Hello everyone and sorry in advance for my very bad English.
I'm working on an ASP.NET MVC project with a JavaScript framework as the front-end.
I have a table which contains customer names retrieved from a database. Now I want to show a modal dialog and set the text of its header according to the customer name which has been clicked. At the same time I would like to get the customer Id. For example, when clicking "Georges", the modal dialog pops up and its header text is set to "Georges".
Here is my code.
The customer table look like this:
<div class="col-lg-6">
<div class="container-fluid" id="DailyTask">
<h4>Daily Tasks</h4>
#if (Model != null)
{
List<SchedulerTool.Models.spGetDailyBatchTask_Result> batches = Model.DailyTask;
foreach (var batch in batches)
{
<div class="bs-callout bs-callout-warning" id="dailybatch">
<input name="currentdailyBatchId" id="#batch.BatchId" hidden type="text" value="#batch.BatchId" />
<input name="currentdailyBatchName" id=" #batch.BatchName " hidden type="text" value=#batch.BatchName />
<button class="btn btn-group-justified" id="dailybatchTask" data-title="#batch.BatchName" data-target="#dailybatchTaskModal" data-toggle="modal" data-bid="#batch.BatchId">
<span class="fa-bitbucket-square" id="name">#batch.BatchName</span>
</button>
</div>
}
}
</div>
The JavaScript code is:
$('dailybatchTask').on('click', function ()
{
var batchId = $(this).data('bid');
var batchName = $(this).data('title');
// Here I set the table name a template table
$("h4 a#bathDailyTaskModalLabel").html(batchName);
// Here I set the Id to a template table
loadMasterTable("LoadObjectsNotBatched", batchId, DailyBatchElementUrl, "DailyBatchCollapseElementId");
});
Customers table:
The modal that is popover when clicked on customer:
The problem is: when I clicked on the first element of the customer table, the modal is correctly shown (the header and id are correct) but when I clicked on the others elements the JavaScript code is not executed.
Hope someone can try to understand my problem and will help me!

You are trying to catch all buttons by ids. But in HTML ids must be unique. Because that jquery your click event only matches first data. You need to fix ids before jquery part. If you really need it you can define a counter for loop and use it like this;
id="dailybatchTask-#counter"
But you already defined data-bid so basically, you can just add a class name for the button like this;
class="btn btn-group-justified daily-batch-button"
then only you need to;
$('daily-batch-button').on('click', function () {
...
...
...
});

how to check the toggle button on/off state ionic to send to db

I have one text called Developer = toggle button on/off. So user can do on/off with the toggle button. But in same screen I have one button called submit. So while submitting I need to sent whether user has on/off or checked/unchecked the developer option and I need to sent that to db.
So like [ developer: yes/1/ON/ ] like this. How can i do that. If user checked the toggle button i need to keep as yes or no.
Here is my code :
<label class="item item-input " style="height: 50px;"><span class="input-labels-over"><font style="color:#696969; padding-top: 0px;">Claim</font></span>
<ion-toggle toggle-class="toggle-calm"></ion-toggle>
</label>
My controller code :
$scope.submit = function() {}
I am stuck more than 2 hr. I am new to ionic.
If user checked means to db I need to sent yes. If user didn't checked the toggle button I need to sent no to db.
How can I do this?

Use ng-model
<label class="item item-input " style="height: 50px;"><span class="input-labels-over"><font style="color:#696969; padding-top: 0px;">Claim</font></span<ion-toggle toggle-class="toggle-calm" ng-model="data.toggle"></ion-toggle></label>
and in the controller
$scope.data = {}
$scope.submit = function() {
var toggleStatus = $scope.data.toggle //return true or false
//your code
}

DOM manupulation in meteor

I want to know abt DOM manipulation in meteor. My code goes as follows:
<template name = "studentList">
{{#each}}
<div class = "name">
Name: {{this.name}}
</div>
<div class = "age">
Age: {{this.age}}
</div>
<button class = "edit"> Edit </button>
{{/each}}
<button class = "addStudent"> Add Student </button>
</template>
Template.studentList.helpers({
studentlist:function(){
return Students.find();
}
});
Template.studentList.events({
//I am doing the DOM manupulation here based on the buttons clicked
});
I get a list of Student Info from the DB and display them in the template. Now for each student, there is an edit button. When user clicks this edit button, I want to change the "name" and "age" field of the student as text field and give an option to "save" and "cancel".
Similarly, I have an "add student" button at the end of the template. When a user clicks it, I want to display a form, where student's name and age is added and then saved.
So far, I am being able to do this, but in a very naive way by using lots of Jquery/Javascript code in the events of studentList. I read many post that says this is not the correct way.
Can anyway please tell how can this feature be achieved in meteor. Or just to some possible ways of doing it.
Help appreciated.

This is a possible way to accomplish this.
Lets try to do this step-by-step
First this is how the HTML should look.
{{#if editName}} <!-- editName template helper -->
<!-- If the Session is equal to true this part of the html will be showed -->
<input type="text" class="newName" value="{{this.name}}" />
{{else}}
<!-- this is what we show by default on the view, if user click the div, the input will be showed -->
<div class="name">Name: {{this.name}} </div>
{{/if}}
Now the JS.
The helper should look like this.
Template.studentList.helpers({tName:function(){
return Session.get("studentName" + this._id); //getting the session true or false.
}
});
And the Events.
Template.studentList.events({
'click .name' : function(event,template){
//On this event we are Setting the Session to true and holding the id of the student
return Session.set("studentName" + this._id,true)
},
'keypress .newName':function(event,template){
//Some keypress to update the value
//using http://docs.meteor.com/#/full/template_$ to get the value using meteor
var newNameStudent = template.$('.newName').val();
if(event.keyCode == 13){ //if enter lets update the value
Students.update({_id:this._id},{$set:{name:newNameStudent}})
return Session.set("studentName" + this._id,false) //setting to false the session to hide the input and show the <div>
}
},
'click .cancel':function(){
return Session.set("studentName" + this._id,false) //setting to false the session to hide the input and show the <div>
}
})
If you see there is not too much code (i guess), you get the idea how to use the sessions to do simple CRUD operations.
I made a Meteorpad of this working example, check it.

Checkbox reminder script doesn't remember checkbox status when dynamically load test.php which contains the checkbox

I have a working checkbox reminder script: http://mauricederegt.nl/test/index.html
It simply remembers the checkbox status, so when you come back to the webpage later, it will still be checked to unchecked. This works all great.
Now I need to dynamically load a php page in my HTML page (the original php page gets some stuff out of my database and displays a list of names. Underneath that list, this checkbox appears, followed by another list from the db).
I've placed the checkbox in the php file, but it will be shown in the HTML file when the php file is loaded. The js file is still loaded in the HTML file (also tried loading it in the php file, but this had no effect).
PROBLEM: The checkbox isn't remembered anymore :( See this demo: http://mauricederegt.nl/test/index2.html
I think this is because the page is dynamically loaded now and isn't visible in the HTML?
How can I fix this, so the checkbox is remembered again?
Please see the source code of the HTML files for the js code if needed (is too much to post here)
Kind regards,
the php code:
<?php
$q=$_GET["q"];
$checked = ($_GET['checked'] == 1 ) ? 'checked="checked"' : '';
if ($q == 1) {
echo '<ul>
<li>Mike</li>
<li>Peter</li>
<li>Richard</li>
<li>Quintin</li>
</ul>
<div id="soundcheck" class="button blue"><input type="checkbox" value="Name" id="sound" '.$checked.' /><label for="sound"></label></div>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Pineapple</li>
</ul>';
}
?>

The problem is that the code to check and then set the remembered status for the checkboxes is only called when the page is first loaded (bound to the DOM ready event), and therefore isn't called when you dynamically load content.
Call this part of your existing code:
$('div#soundcheck input:checkbox').each(function() {
// on load, set the value to what we read from storage:
var val = storedData.get(this.id);
if (val == 'checked') $(this).attr('checked', 'checked');
if (val == 'not') $(this).removeAttr('checked');
if (val) $(this).trigger('change');
});
after dynamically loading your checkboxes, and that should fix the problem.
Edit:
You'll need to add the above code to this section of your existing Javascript:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("scoreboard").innerHTML=xmlhttp.responseText;
// add the above code here
}
}

If the php that loads the GET, I assume it returns the following:
<php
echo <<<OUTPUT
<div id="soundcheck" class="button blue">
<input type="checkbox" value="Name" id="sound">
This is the checkbox, uncheck it and refresh the page. It should remain unchecked!
</div>
OUTPUT;
Instead, have it return:
To make it a bit tighter, I would would go with:
<php
echo <<<OUTPUT
<div id="soundcheck" class="button blue">
<input type="checkbox" value="Name" id="sound">
<label for="sound">This is the checkbox, uncheck it and refresh the page. It should remain unchecked!</label>
</div>
OUTPUT;
This will always return a blank checkbox, regardless of what they submitted.
Now if the issue is that it should stay checked unless they uncheck the box, go with:
<php
$checked ($_GET['checked'] == 1 ) ? 'checked="checked" : '';
echo <<<OUTPUT
<div id="soundcheck" class="button blue">
<input type="checkbox" value="Name" id="sound" $checked>
<label for="sound">This is the checkbox, uncheck it and refresh the page. It should remain unchecked!</label>
</div>
OUTPUT;
With the following in your js:
xmlhttp.open("GET","test.php?q="+str+"&checked=1",true);