I am trying to make an online shop that allow users to spend minimum time on checkout.
They have to select from 4 possibilities which i can make it two ways.
First i can make a select field with jquery to update the next fields from database or i can make 4 tabs and each of them have diferent forms that take data from database.
Bassicaly i want to ask what should i choose and i don't really know how to do it with jquery so if you suggest that way please post a tutorial if available cause i didn't found one related to updating select fields from database.
Second i need to know if choosing the tabs should cause any problem of security on posting form or something like that.
i use CI2.
Thank you in advance.
Thats true, sorry. Here a code fragment from one of my projects
$('select.myfield').change(function(){
var data = $('select.myfield').val();
$.ajax({
url: 'Url/to/your/script',
dataType: 'json',
type: 'post',
data: data,
success: function(data) {
//validate
//change form fields
}
});
});
in your PHP method, you need return json_encode($data);
Related
In my project I have rows of modules loaded from Partial views.
So imagine a grid of small squares with information.
There is a popup dialog for all of them, that displays the data of the clicked module.
Currently when I submit a change in the dialog, the javascript reloads the entire page. BUT, this takes a long time, and I need to be able to refresh only the one dialog.
I can imagine to make a separate js function for each type of module, and then pass some data in, so jquery can find the specific module, and then make an ajax get, for the data. But this requires me to do all the data insertion from js always. instead of using razor and MVC's built in awesomeness.
Does anyone know of a way, to call a partial view inside a div?
Also in the future I will need to reload "some" but not all the modules in an interval refresh. So for future proofing purposes:
What im looking for is something like:
function reloadElement(row, column, id){
var target = $("#div1");
// todo find row and column
target.html.partial("url", model); //<----- looking for something like this. cross fingers.
}
Thanks to GregH for a few key words, that lead to some ideas.
I solved it myself, so if you land on this problem also, here is how i solved it:
Controller:
You want to make your controller return PartialView("somePartialViewUrl", new SomeModel()), apparently saving the model and relying on the data collection isn't good enough, i hadto make a new instance of the model.
Javascript
in the "click" that handles the event, put:
$.ajax({
url: "controllerName/actionName",
data: JSON.stringify({ row:1,column:2 .... }),
contentType: "application/json",
dataType: "html",
type: "POST",
success: function (partial) {
$("#div2").html(partial);
}
});
this will override the html in your "#div2".
im sure you can also use $("#div2").innerHTML = partial; or $("#div2").load("url",parameters); and probably many other ways.
done.
I am very much new to CRM, I got a requirement, asking me to create a simple accordion with name and status - as panel heading. And after expanding the panel, I should give all the details about the user details in the entity. All the details will be fetched dynamically from the back end. Can some one help me in writing this. I don't know how to start. everything will be dynamic, depends on the field in the DB. Hope I explained clearly
First of all you should design a accordion or dropdown-toggle etc with html, css and JavaScript . Second you should call Ajax to fetch data from back-end then back-end gonna return a JSON. After that you should assign values to their own places. The code below is a sample for calling an Ajax with JQuery:
var parameters = {id:10};
$.ajax({
type: "POST",
data: parameters,
datatype: "json",
url: '#Url.Action("ProductList", "Product")',
success: function(result){
$("#username").attr('value', result.Username);
}
This is my first time attempting filtering and searching the mySQL database. From my research I have found out I need an AJAX call and some PHP query that will help my achieve the filtering I want to achieve.
This is what I want the AJAX search to do:
Have an Apply button. When I click the button I want a URL to get generated and the AJAX call to happen.
Only reload part of the page where the data queried is contented.
So far I have managed to create this:
$("#filteridname").change(function() {
$value=$(this).val();
$.ajax({
type: "get",
url: "{{$myurl}}",
data: {'search':$value},
success: function(data){
$('#data-holder').html(data);
}
});
});
This manages to create the URL one of the filters, but it does not take the other filters into consideration. I also did not manage to create the button. I am guessing you would need a where statement in the PHP to filter the database?
Would anyone be willing to assist me in creating the AJAX call and PHP query for the filters?
In total I have three filters, and when I click a button I want an AJAX call to filter my database with the three filters and return the results without having to reload the whole webpage.
EDIT: Here is my JS AJAX query:
$("#apply").click(function() {
$country=$('#filter-country').val();
$type=$('#filter-type').val();
$year=$('#filter-year').val();
$.ajax({
type: "GET",
url: "{{$launchsitename->site_code}}",
data: {'country':$country, 'type':$type, 'year':$year},
success: function(data) {
$('#data-holder').append(data);
}
});
});
Now I just need to create a PHP query.
you can use propriety called .Append() instead of .html() ,also here you are getting one element value on change , if you want to get the three of them at one button click , you can make it the same way that you got the val of the first one , and just adding it to the request and handle it back in PHP to divide and execute each one or just pass the three of them to your procedure , depends on what you have
$("#filteridname").change(function() {
$value=$(this).val();
$.ajax({
type: "get",
url: "{{$myurl}}",
data: {'search':$value},
success: function(response){
$('#data-holder').append(response);
}
});
});
Read about .append()
I have a page and I ask them zipcode. While they are filling the form right after they finish writing 5 numbers of zipcode, It will check if it is covered from my database and will show a check or cross sign near it and will disable submit.
To summarize.
Will wait for visitor to type 5 digits zip code( If we can check if customer only enters number it will be a plus and great)
It will check if it is covered in database ( I don't ask for php part. Probably we will send it as POST to a php file)
If it exists in database it will show check else it will show cross and will not allow the form to be submitted.
I checked some websites but couldn't find an exact solution.
Thank you
Probably you need have an image tag besides the zip code text box with the src attribute set to an invisible image. Then perform an ajax upon the blur event.
HTML:
<input type="text" id="zip" name="zip"> <img id="imgconf" src="images/blank.png">
Javascript:
$('#zip').blur(function() {
$.ajax({
url: "script.php",
type: "POST",
data: "zip=" + $('#zip').val(),
dataType: "text",
success: function (data){
if (data=="1"){
$('#imgconf').attr("src", "images/correct.png");
} else {
$('#imgconf').attr("src", "images/wrong.png");
}
}
});
});
For the numeric validation, you may use the same PHP script to return another flag besides "1" and display it in another span element that the data entered is not numeric. Just add another key-value pair in the data part, maybe.
You will need to use AJAX. JQuery has a built in AJAX function. On each keyup event, you can have it run this AJAX function. The PHP should return a value of either 1 or 0 to make it easy. 1 obviously is match, and 0 is no-match.
$('#YourObjectID').keyup(function (event) {
searchZips();
})
function searchZips()
{
var myJSON = $.ajax({
url: options.script + '?Q=' + curValue,
type: 'POST',
contentType: 'application/json',
success: function (msg) {
if(msg==="1"){
// CODE TO SHOW YOUR X DIV
}
}
}
You will want to also add functionality on clearing the search, checking if null or empty string, etc., etc., but this is the basics that should get you going. I use this all the time. Once you get the hang of it, it's VERY useful. Then look into building a jQuery plugin. Once you can do the above functionality, you can build it into a plugin (with tons of cool options!) GOOD LUCK and happy programming.
I'm trying to save dynamically created elements in my application.js file to the database. Would the code look something like this?:
$.ajax({
type: "POST",
data: { title: 'oembed.title', thumbnail_url: 'oembed.thumbnail_url'}
});
Is there anything I'm missing? Assume that oembed.title and oembed.thubnail_url hold the values I want to save, and that title and thumbnail are the database columns.
First problem I see is your data is strings. Get rid of the ' quotes
$.ajax({
type: "POST",
data: { title: oembed.title, thumbnail_url: oembed.thumbnail_url}
});
I'm going to assume you need to incorporate some user-supplied data into the new DB object - otherwise, it would be way easier to just create it from Rails.
If you're using entirely user-supplied data, you can use the serialize() method (use hidden fields for server-generated stuff):
jQuery.ajax({
url: '/path/to/whatever',
data: $('#MyForm').serialize(),
type: 'POST'
});
Or you could use the jQuery Form Plugin - it'll let you easily combine user-supplied data with server-generated data. For example:
$('#MyForm').ajaxForm({
//Hardcoded/server-generated stuff goes in here
//(and will be added to the data from the form inputs):
data: {title: oembed.title},
type: 'POST'
});
The ajaxForm() function will set up the form and its defaults, and sends an AJAX call when the user hits the submit button (see also: ajaxSubmit()).
On the Rails side, everything should work exactly the same as if the user had submitted the form normally (though you might want to just respond with a status code/message - no call for a redirect or page render).
Hope this helps!
PS: From your example, it looks like you might be able to use data: oembed in your AJAX calls. This will submit all oembed's attributes...