william
william

Reputation: 606

update json data into db

Alright... this seems complicated for me..

I don't know if it is.

filename: add_types.js

I have some data, which i create into mysql db (is for a back-end system). through jquery/ json. It work fine.

            var last_id = data.last_id;
        var fck_editor = data.fck_editor;

        var new_data = '<div id="input_highlight'+last_id+'"><strong style="font-size:14px;">Overskrift:</strong> <br />';
        new_data += '<input type="text" name="overskrift[]" /><br />';
        new_data += '<input type="hidden" name="tekst_id[]" value="'+data.last_id+'" />';
        new_data +=  fck_editor;
        new_data += '<a href="javascript:;" onclick="remove_rejse('+last_id+');" title="Slet"><img src="/gfx/admin/icons/delete.png" alt="" />Slet</a>';
        new_data += '</div><div id="loader'+last_id+'"></div><br />';                       

        $(div_id).append(new_data);

Now I just need to update it (in the same file where it gets outputed)

rejser.php my data goes out here in a div

<div id="add_here" class="add_here_bg"></div>

I want the ouput from add_types.js to be updated in db when i submit another form in the rejser.php file.

pls inform me, if my question is understandable.

Upvotes: 0

Views: 1085

Answers (1)

JorenB
JorenB

Reputation: 1831

You could use a regular jQuery AJAX-request, which submits the contents of your div to a server-side script:

var content = $('#add_here').html();
$.get(url_of_script, content);

And then have the script add it to the DB. Are you familiar with using PHP/MySQL to do this?

If you want to update this stuff when a form is submitted, try attaching an event listener to the onSubmit event of the form.

Edit:

So, first add the onSubmit attribute to your form:

<form onSubmit="return formSubmit(event);">

Now, you'll have to define this function somewhere - really doesn't matter where you do it, though the <head> section of your page is recommended. External file is, of course, also possible.

function formSubmit(event) {
    var content = $('#add_here').html();

    // this callback will make sure the form is submitted after having completed the other request
    var callback = function() { event.target.submit() };
    $.get(url_of_script, content, callback);

    // Now, cancel the default event, the callback will take care of the submit afterwards
    event.stopPropagation();
} 

Haven't tested it, but something like this is supposed to work. Let me know if you need some more help.

Upvotes: 1

Related Questions