I have a modal window that works fine on laptop..
On a smart phone, as soon as I click any input field (to edit), the modal disappears, and page reloads...
What is causing this behavior ?
<div class='modal fade my_modal' id='edit-member-container' tabindex='-1' role='dialog' aria-hidden='true'>
<div class='modal-dialog'>
<div class='row'>
<div class='col-sm-6 col-centered'>
<form id='contact' action='' method='post'>
<h3>Edit</h3>
<fieldset>
<input placeholder='First Name' type='text' tabindex='1' id='txtFname' value='$first_name'>
</fieldset>
<fieldset>
<input placeholder='Last Name' type='text' tabindex='2' id='txtLname' value='$last_name'>
</fieldset>
<fieldset>
<button type='button' id='btnsaveEdit'>Save Changes</button>
</fieldset>
</form>
</div><!-- col -->
</div><!-- row -->
</div><!-- dialog -->
</div> <!-- close edit member modal -->
<script>
$(document).on("click","#btnsaveEdit",function(){
var id_key = $("#id_key").val();
var first_name = $("#txtFname").val();
var last_name = $("#txtLname").val();
var value = {
id_key:id_key,
first_name:first_name,
last_name:last_name
};
$.ajax(
{
url : "http://www.clubsandgroups.com/new-crud/application/member/save_user_edit_member_3.php",
method: "POST",
data : value,
dataType : "JSON",
success: function(response)
{ ... }
});
});
</script>
Related
When I click the button on my modal with an empty field on my input its give me an undefined value on my console. And when I put a value on my input and click the button it is adding to my database. The problem is even the empty field or the undefined value are also adding to my database and the sweetalert is not working. I want to prevent the empty field adding to my database and prevent the undefined. Can somebody help me?
//start of method
checkForm: function(e) {
if (this.category_description) {
return true;
}
this.errors = [];
if (!this.category_description) {
this.errors.push('Category required.');
}
e.preventDefault();
},
addCategory : function() {
axios({
method : "POST",
url : this.urlRoot + "category/add_category.php",
data : {
description : this.category_description
}
}).then(function (response){
vm.checkForm(); //for FORM validation
vm.retrieveCategory();
console.log(response);
swal("Congrats!", " New category added!", "success");
vm.clearData();
}).catch(error => {
console.log(error.response);
});
},
//end of method
<form id="vue-app" #submit="checkForm">
<div class="modal" id="myModal" > <!-- start add modal -->
<div class="modal-dialog">
<div class="modal-content " style="height:auto">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title"> Add Category </h4>
<button #click="clearData" type="button" class="close" data-dismiss="modal"><i class="fas fa-times"></i></button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="form-group">
<div class="col-lg-12">
<input type="text" class="form-control" id="category_description" name="category_description" v-model="category_description" placeholder="Enter Description">
<p v-if="errors.length">
<span v-for="error in errors"> {{ error }} </span>
</p>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="submit"#click="category_description !== undefined ? addCategory : ''" class="btn btn-primary"> Add Category </button>
</div>
</div>
</div>
</div>
</form>
The easiest way to stop this is adding data check. And condition check at top of your method.category_description !== undefined. Btw, move your e.preventDefault() to top too.
First of all do this:
- <button type="submit" #click="category_description !== undefined ? addCategory : ''" class="btn btn-primary"> Add Category </button>
+ <button type="submit" #click.prevent="addCategory" class="btn btn-primary"> Add Category </button>
and then in addCategory:
addCategory() {
if (!this.category_description) {
return;
} else {
// do your stuff here
}
}
When you are clicking on Add Category button, it is triggering the addCategory along with your validation method.
The return value of validation method has no impact on triggering of addCategory.
This issue can be handled in following ways.
Call addCategory only when there is some valid data
<button type="submit" #click="category_description != undefined ? addCategory() : ''" class="btn btn-primary"> Add Category </button>
Call the validation method inside addCategory and then proceed.
I have a code from a website as follows and I want to use the 5th line from code segment below <input type="text" placeholder="Enter Workflow Name"
Code
<div class="workflow-container ng-scope" data-ng-controller="sourceCode.Designer.uiComponents.conciergeScreen.templates.NewWorkflowController">
<div class="input">
<div class="wrapper top" data-ng-class="{'fill': hosted === true}">
<label class="welcome">What should your workflow be called?</label>
<input type="text" placeholder="Enter Workflow Name" class="workflow-name-textbox ng-valid ng-not-empty ng-touched ng-dirty ng-valid-parse" data-ng-class="{'error': errors.error}" autofocus="" data-ng-focus="select($event)" data-ng-model="conciergetitle" data-ng-model-options="{ updateOn: 'default blur', debounce: { default: 300, blur: 300 } }" data-ng-change="inputchange(designeritems)" data-ng-keyup="$event.keyCode == 13 && createnewstudioitem(designerItems[0], conciergetitle, $event)" style="">
<div class="errogory">
<div class="summary">
<!-- ngIf: errors.error || errors.category -->
</div>
<div class="category" data-ng-click="categorypicker($event)">
<label>Folder</label>
<i class="icon icon-set-assetbrowser icon-size16 ic-categoryserver"></i>
Workflow
</div>
</div>
<div class="concierge-button-grid">
<div class="concierge-button-container">
<button id="createWorkflow" data-button-error="false" class="concierge-button button-command" data-ng-disabled="!newWorkflowReady" data-ng-class="{ 'error': errors.button, 'is-disabled error' : errors.button }" data-ng-click="createnewstudioitem(designerItems[0], conciergetitle, $event)" disabled="disabled">
<!-- ngIf: !errors.button --><span data-ng-bind="getString('new_workflow_create_button')" data-ng-if="!errors.button" class="ng-binding ng-scope">Create</span><!-- end ngIf: !errors.button -->
<!-- ngIf: errors.button -->
</button>
</div>
<div class="concierge-button-container">
<button id="discardWorkflow" class="concierge-button concierge-button-discard button-command tertiary" data-ng-click="discard()">
<span data-ng-bind="getString('discard_workflow_button')" class="ng-binding">Discard</span>
</button>
</div>
</div>
</div>
<!-- ngIf: showrecent -->
<!-- ngIf: showrecent -->
</div>
I want to click in the textbox so that I can clear the text. I have tried the following:
describe("New Screen", function () {
it("Should give textbox a new name", function () {
browser.sleep(10000);
console.log('Enter new name');
var editName = element.all(by.className('.workflow-name-textbox'));
editName.first().click().then(function () {
console.log('Clicked on Create');
})
browser.sleep(10000);
})
I get a error: Index out of bound. Trying to access element at index: 0 ...
if I change my code above to:
var editName = element.all(by.css('.workflow-name-textbox'));
editName.click().then(function () {
console.log('Clicked on Create');
I dont get errors but I dont see any clicking going on.
I know my protractor works because I have navigated to this page using similar code.
Do anyone have suggestions what else I could try.
I had to go two iFrames down:
//Parent
browser.switchTo().frame('Iframe1');
//Child
browser.switchTo().frame('Iframe2');
//var NewTextBox = browser.findElement(by.css('.name-textbox')).clear();
var NewTextBox = element.all(by.css('.name-textbox'));
NewTextBox.clear().then(function () {
console.log('Clear text');
Did you tried this way instead of element.all.
element.all return a list elemenet and element return only single element.
var NewTextBox = element(by.css('.workflow-name-textbox'));
or
var NewTextBox = element(by.xpath('//input[#placeholder='Enter Workflow Name']'));
I know that I can directly add HTML forms via the message, however can I do something like:
message: document.getElementById('formContent').innerHTML?
Is this my DIV.
<div class="col-sm-6">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Search For Options</label>
<input disabled.bind="readonly" type="text" class="form-control" value.bind="SearchForOptions">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">AND / OR</label>
<dropdown disabled.bind="readonly" options.bind="core.GetOptionsList()" value.bind="OptionId" selected.bind="OptionId" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<button click.trigger="cancelSearch()" class="btn btn-default" type="button">Cancel</button>
<button click.trigger="searchOptions()" class="btn btn-info" type="button" disabled.bind="!canSearch">Search</button>
</div>
</div>
</div>
core. GetOptionsList() - Aureila
import {Core} from 'admin/core';
#inject(Core)
constructor(core){
this.core = core;
}
UPDATE
Its pulling the content of the <div> however not the values from the DD
bootbox.dialog({
title: "This is a form in a modal.",
message: jQuery('#search').html(),
buttons: {
success: {
label: "Save",
className: "btn-success",
callback: function () {
//var name = $('#name').val();
//var answer = $("input[name='awesomeness']:checked").val()
//Example.show("Hello " + name + ". You've chosen <b>" + answer + "</b>");
}
}
}
});
UPDATE
addNew(){
bootbox.dialog({
title: "Search Options",
message: jQuery('#searchCriteria').html(),
buttons: {
cancel: {
label: 'Cancel',
className: 'btn btn-default'
},
confirm: {
label: 'Search',
className: 'btn-primary btn btn-info',
callback: function() {
var text = $("#SearchForOptions").val();
var dropdown = $("#OptionId").val();
alert(text);
alert(dropdown);
if (!text || !dropdown){
return false;
} else {
this.searchOptions(text, dropdown);
}
}
},
}
});
}
Sorry, I forgot to put this in my original question. dropdown is a custom element, which takes the following:
options: list of options
value: value of selected option
selected: value of selected option
My main issue is can I use aureila i.e. binding elements such as value.bind, or do I need to build my DD manually etc? As it currently looks like I cannot use any binding.
I am new to backbone and Marionette.
My requirement is,
I have a main grid having few rows. If i select a row from grid i need to fetch the details and display on the same page.
Binding the grid is working fine. But when i click on the row data is not binding to html template. I am unable to find out the issue.
Below is my html template for row details
<script id="selected-broker-details-tmpl" type="text/x-handlebars-template">
<div id="pnl-broker-details" class="panel panel-default">
<div class="panel-heading">
Broker Details
</div>
<div id="broker-details-container" class="panel-body">
<div class="col-md-6">
<div class="form-group">
<label for="inputbrokerName" class="col-sm-3 control-label">BrokerName</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputbrokerName" placeholder="Broker Name" value="{{BrokerName}}">
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="inputMnemonic" class="col-sm-3 control-label">Mnemonic</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputMnemonic" placeholder="Mnemonic" value="{{Mnemonic}}">
</div>
</div>
</div>
</div>
</div>
</script>
Backbone view declaration
App.Views.BrokerDetails = Backbone.View.extend({
initialize: function () {
this.listenTo(this.model, 'change', this.render);
},
el: '#details',
template: brokerTemplates.BrokerDetailsTempalte,
render: function () {
this.$el.html(this.template({}));
}
});
Model and collection declaration
var BrokderDetails = Backbone.Model.extend({
BrokerId: null,
BrokerName: null,
Mnemonic: null,
OASYSMnemonic: null
});
var BrokerDetailsCollection = Backbone.Collection.extend({
initialize: function (options) {
this.model = BrokderDetails;
this.url = '/api/BrokerSelections/SelectedBroker/';
}
,
setParam: function (str) {
this.url = '/api/BrokerSelections/SelectedBroker/' + str;
this.fetch();
},
parse: function (data) {
return data;
}
});
click event in main grid
events: {
"click .selection": "selectedBroker",
},
selectedBroker: function (e) {
var details = new BrokerDetailsCollection();
var brokerdetails = new App.Views.BrokerDetails({ model: null, collection: details });
details.setParam($(e.currentTarget).data("id"));
details.fetch();
brokerdetails.render();
},
Now there are 2 issues,
1. Click event is firing 2 times, if i select a row i main grid
2. Model data is not binding to html template. I mean html template is displayed, but with empty values in textboxes
I am trying to post feedback on an object from a modal popup. No values on the popup are populated from server side.
<div class="modal fade" id="msg-editor">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Title of the form</h3>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="controls span10">
<label class="control-label" for="Title">Title and message</label>
<input type="text"
class="input-xlarge" id="Title" name="Title"
placeholder="Title of the message" />
<textarea class="input-xlarge" id="Message"
name="Message" rows="5" cols="9"
placeholder="Message"></textarea>
<label class="checkbox">
<input type="checkbox" value="option2" id="EmailSelf">
Send a copy of this message to yourself
</label>
</div>
</div>
</div>
<div class="modal-footer">
Close
<a id="Submit" class="btn btn-primary" href="#Url.Action("AddDocumentMessage", "Invoice", new { param1 = $('#myFormSubmit').value, param2 = Model.Obj.Value1, param3 = Model.HashedValue })">Send</a>
</div>
</div>
The part that doesnt work is
param1 = $('#myFormSubmit').value.
How do I pass the client side value?
You can't...!
Because razor code is parsed and rendered in the server side, and in server, there is no jquery or any client code or data...
An alternative similar work can be like the following:
<div class="modal-footer">
Close
<input type="button" value="Send" onclick="submit()" />
</div>
<script>
function submit() {
$.ajax({
url: #Url.Action("act", "con") + '?param1=' + $('#myFormSubmit').value +
'¶m2=' #Model.Obj.Value1 +
'¶m3=' + #Model.HashedValue,
type: 'POST',
// ... other ajax options ...
});
}
</script>
Then, in your action method you'll receive all params in string:
[HttpPost]
public ActionResult act(string param1, string param2, string param3)
{
ViewBag.Message = "Your contact page.";
return View();
}
The problem you are running into is that the Razor code is executed on the server to create the URL and then sent to the client, so the client side value is not known at the time the URL is created. You need to create a placeholder in the URL so that the client side value can be inserted when the document is ready.
So something like this:
<a id="Submit" class="btn btn-primary" href="#Url.Action("AddDocumentMessage", "Invoice", new { param1 = "param1_placeholder" , param2 = Model.Obj.Value1, param3 = Model.HashedValue })">Send</a>
$(function () {
var url = $('#Submit').attr('href');
$('#Submit').attr('href', url.replace('param1_placeholder', $('#myFormSubmit').value));
});
You may try to generate and append the link you need:
<div class="modal-footer">
Close
<div class="link"></div>
</div>
$(function () {
var path ="#Url.Action("AddDocumentMessage", "Invoice",new {param2 = Model.Obj.Value1, param3 = Model.HashedValue })
$('.link').append('<a id="Submit" class="btn btn-primary" href="'+path+'¶m1='+$('#myFormSubmit').val()+'">Send</a>')
});